发表于: 2019-02-18 23:42:12
1 169
今天完成的事情:(一定要写非常细致的内容,比如说学会了盒子模型,了解了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中注释的作用及重要性。
评论