zoukankan      html  css  js  c++  java
  • 数组方式使用jQuery对象

    一、

    使用jQuery选择器获取结果是一个jQuery对象。然而,jQuery类库会让你感觉你正在使用一个定义了索引和长度的数组。在性能方面,建议使用简单的for或者while循环来处理,而不是$.each(); 这样能使你的代码更快。

    console.time('array');
    var
    array = ["Aaa","Bbbb","Cccc"]; $.each(array, function(i){ //array[i] = i; console.log(i+" : "+array[i]);
    });
    console.timeEnd('array');

    使用for代替each方法:

    console.time('arr');
    var
    arr = ["aaa","bbb","ccc"]; for(var i=0;i<arr.length;i++){ //arr[i] = i; console.log(i+" : "+arr[i]); }
    console.timeEnd('arr');

    效果-执行时间:

    另外需要注意的是:检查长度也是检查jQuery对象是否存在的方法。下面一段代码通过length属性来检查页面中是否含有id为“content”元素。

     var content = $("content");
         if (content) {   //总是true  都会执行
              //do something
          } 
                         
         if (content.length) { //拥有元素采薇true  才会执行
             //do something
          }

     ===================================================================================

    二、用数组方式来遍历jQuery 对象集合

    你或许没有注意到,但是在性能方面,对于jQuery each方法这种优雅实现是有代价的。有一个办法能够更快地遍历一个jQuery对象。就是通过数组来实现,jQuery对象集合就是一个类数组,具有length和value属性。可以通过程序来测试一下性能:

    HTML:

    <ul id="testList" >
       <li>Item</li>
       <li>Item</li>
       <li>Item</li>
       <li>Item</li> 
       <li>Item</li>
       <li>Item</li>
       <li>Item</li>
       <li>Item</li>
       <li>Item</li>
       <!-- add 50 more -->
    </ul>

    JavaScript:

    var arr = $('li'),
        iterations = 100000;
    //------------------------------
    // Array实现:    
    console.time('Native Loop');
    for (var z = 0; z < iterations; z++) {
        var length = arr.length;
        for (var i = 0; i < length; i++) {
            arr[i];
        }
    }
    console.timeEnd('Native Loop');
    
    //------------------------------
    // each实现:    
    console.time('jQuery Each');
    for (z = 0; z < iterations; z++) {
        arr.each(function(i, val) {
            this;
        });
    }
    console.timeEnd('jQuery Each');

     结果:

    可以看到通过数组实现方式遍历,执行效率更高。

    ========================================================================================

    三、适应join来拼接字符串:

    创建一个数组,然后循环,最后只用join();把数组转换成字符串,代码如下:

      <body>
            <div id="content"></div>
            
            <script src="js/jquery.js"></script>
            <script type="text/javascript">
                  var arr = ["aaaaaaa","22222","cccccc"];
                 for (var i=0;i<arr.length;i++) {
                     arr[i]="<li>"+i+" : "+arr[i]+"</li>";
                 }
                 $("#content").html(arr.join(''));
                     
            </script>
        </body>

     

  • 相关阅读:
    AWVS 安全渗透扫描
    Nmon 监控结果分析
    Jmeter 插件图表分析
    Nmon 安装
    子母钟系统(卫星时钟系统)在医院网络中的架设与设计
    从NTP网络授时到社交GPS千奇百怪的应用方式
    NTP网络时钟系统技术参数与详细介绍
    GPS北斗子母钟系统在某机场系统中的应用
    GPS北斗时间频率信号源的定义及简介
    ntp对时服务器同步网络中计算机详细配置
  • 原文地址:https://www.cnblogs.com/xiangru0921/p/6535023.html
Copyright © 2011-2022 走看看