发表于： 2019-02-18 23:42:12
1 191
今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin）
一、完成了对btn按钮添加click事件。
二、学习了alert( )和console.log( )的区别；
三、学习了怎么获取九宫格中的小格子DOM；
1、把onclick绑定在标签上。
把click写进HTML的标签里绑定，直接添加事件。（HTML元素行间事件；又称HTML事件处理程序）
写法如下：
<button id="btn1" onclick="start()">开始闪</button>
<button id="btn2" onclick="end()">结束闪</button>
2、click绑定js的方法：
是通过事件监听的方式来绑定事件。
写法如下：
startBtn是我在HTML里设的id名。
addEventListener意思是：添加事件监听者。
console.log('开始按钮');意思是：控制台打印日志。
这个是在js文件里的写法，首先var声明变量，然后使用document中的元素节点的属性获取id名，再使用function函数的showmsg的方式调用，通过事件监听的方式绑定事件。
HTML的写法如下：
前面写的时候也是出现了一些报错，基本上都是没有声明id名。要么就是写法错误 ，通过这个value值来关联js的click事件。这里的id名是重要的。这里有个问题，为什么我没有用class.Name来绑定，因为这里任务只有两个btn按钮，不用担心后面会有影响，如果用class.Name就需要设置顺序，防止后面选中的时候分不清哪个先开始，例如class=“btn1”，class=“btn2”，就需要这样写。id就不需要，因为id是唯一的，不会受到影响。
3、onclick绑定js的方法：
把一个函数赋值给一个事件处理程序属性。
var btn1 = document.getElementById('btn1');
function abc() {
alert('abc');
}
btn1.onclick = abc;//当点击的时候执行abc这个函数，等价于 btn1.onclick=function abc(){alert('abc');}
*查资料建议使用第二种方法，如果是使用js来写的话。建议使用click绑定js的方法。
二、alert( )和console.log( )的区别：
如图：
图1是console.log( )显示效果。
图2是alert( )显示效果。
三、学习了怎么获取九宫格中的小格子DOM：
1、 DOM 是 JavaScript 操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个 JavaScript 对象，从而可以用脚本进行各种操作（比如增删内容）。
2、DOM 的最小组成单位叫做节点（node）。文档的树形结构（DOM 树），就是由各种不同类型的节点组成。每个节点可以看作是文档树的一片叶子。
3、DOM节点有七种类型：
（1）document：整个文档树的顶层节点；
（2）element：元素；相当于HTML中<body>、<a>等所有元素的标签。
（3）attribute；attr：元素的属性；
（4）text：文本；相当于标签之间的文本内容。
（5）comment：注释；
（6）documentfragmemt：文档的片段；
（7）documentType：doctype标签；相当于<!DOCTYPE html>；
4、Node接口的属性：
所有 DOM 节点都继承了 Node 接口，拥有一些共同的属性和方法。这是 DOM 操作的基础。
Node.nodeName：属性返回节点的名称。
写法：
通过getElementBy来获取选择器的变量名。
明天计划的事情：（一定要写非常细致的内容）
明天需要请假。
后面随机选中三个小格子，还有随机获得三个颜色，这个写法需要研究下，再看怎么去写出来。
重点去了解for循环。
遇到的问题：（遇到什么困难，怎么解决的）
收获：（通过今天的学习，学到了什么知识）
1、js代码的一些书写规范。如：var 声明，第一个声明以后用逗号来分隔，证明这一句还没有结束，所以下一列可以不用在写var重新声明。
2、console.log的使用还有怎么在调试工具中查看报错。如：
这里箭头指的是文件名，红框中是该行的代码在第几列。
3、理解了在js中注释的作用及重要性。
返回列表
评论