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

 

 

 

 

 

              

posted @ 2020-06-07 10:05  CarreyB  阅读(208)  评论(0编辑  收藏  举报