006 Javascript(075 - 079)
[A] 快速找到点击按钮的下标
案例：通过循环，给三个按钮进行事件赋值
<script> window.onload = function(){ var oBtns = document.getElementsByTagName("button"); for(var i = 0; i < oBtns.length; i++){ oBtns[i].onclick = function(){ alert(i); } } } </script> <body> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> </body>
问题：当点击按钮时，发现，三个按钮，不管点击哪个，都是弹出 3.
原因：单页面加载完成后，for循环即完成，此时已经给三个按钮都添加了事件(都分配了一个function事件)，此时事件要做什么并未确定。
而且，此时 i 已经增加到 3 了，所有点击三个按钮，都输出 i 的值 3.
需求：当点击第一个按钮时，输出 1，点击按钮2时输出 2，点击按钮3时，输出 3.
解决办法：引入 this 变量解决，操作间 [B]
[B] this 变量
this的概念：只要封装函数，任何一个函数系统都会内置一个叫做 this 的变量
【功能】this变量存储的时地址，是当前主任的地址
【注】this 永远指向当前函数的主人，函数的主人是通过上下文去判断的
常见的三种判断：
1. 在对象的方法(即函数)内部，this 通常指的(即this的主人)是对象本身；
2. 写在全局的函数或者变量，其主人通常指的是Window；
3. 在给button按钮添加鼠标驱动函数时，this在函数内部的主人就是当前按钮。
【注】上述三种是常见的判断，并非所有情况都这样
上述[A] 问题的解决办法：
<script> window.onload = function(){ var oBtns = document.getElementsByTagName("button"); for(var i = 0; i < oBtns.length; i++){ oBtns[i].index = i; // 定义驱动函数时，给每个按钮增加一个属性用来给按钮编号 oBtns[i].onclick = function(){ alert(this.index); // 直接输出之前定义好的按钮编号 } } } </script> <body> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> </body>
[C] 选项卡案例
练习
[D] offset 系列方法
offset系列方法：
1. offsetWidth 快速获取元素的宽
2. offsetHeight 快速获取元素的高
3. offsetLeft 快速获取元素距离父节点左侧的距离
4. offsetTop 快速获取元素距离父节点上侧的距离
js中通过点操作(即 .style.width的方式 )获取到的元素的宽，高，距离父节点左侧和上侧的距离的值都是元素本身的大小，不受 border，padding 和 margin 大小的影响。
而通过offset系列方法获取的属性，为元素的最大的外尺寸，即指的是包含了元素本身，border，padding，margin的最外围尺寸，而且这个值是不包含 px 的一个纯数字
[E] 文档碎片
文档碎片属于html的一个高级用法，可以有效提高代码运行的效率
案例：创建10w个节点，添加到页面上
方法：1. 创建一个节点，添加一个节点，循环十万次即可
2. 一次性创建10w个节点，然后将
理论上来讲：第二种方法应该更快。
【原因】节点创建的过程在内存中进行，内存中的计算速度要快得多，而节点插入到页面上需要交互。
/* 创建10w个节点，添加到页面中 */ // 1. 创建一个节点后马上添加到页面中，循环十万次 // 耗时：748.55322265625ms window.onload = function(){ console.time("test1"); for(var i = 0; i < 100000; i++){ var oDiv = document.createElement("div"); oDiv.innerHTML = "文本" + i; document.body.appendChild(oDiv); } console.timeEnd("test1"); } // 2. 先一次性创建十万个节点，再添加到页面中 // 耗时：750.45703125ms window.onload = function(){ console.time("test2"); var node = document.createElement("div"); node.innerHTML = "测试"; for(var i = 0; i < 100000; i++){ var oDiv = document.createElement("div"); oDiv.innerHTML = "文本" + i; node.appendChild(oDiv); } document.body.appendChild(node); console.timeEnd("test2"); }
[F] 数组和对象的遍历
数组：
for循环
for....in 快速遍历
forEach 遍历
对象：
for...in 遍历 其中的遍历数 i 值得是对象的内容
