006 Javascript(075

[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 值得是对象的内容