一、

使用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=;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>

数组方式使用jQuery对象的更多相关文章

  1. JavaScript 对象、DOM对象、jquery对象的区别、转换详解

    一.JavaScript 对象 JavaScript 提供多个内建对象,比如 String.Date.Array 等等. 对象只是带有属性和方法的特殊数据类型. 访问对象的属性: [javascrip ...

  2. JQuery $ $.extend(),$.fn和$.fn.extend javaScript对象、DOM对象和jQuery对象及转换 工具方法(utility)

    一.为什么jquery前面要写$ Javascript没有package的概念,而作者又希望所有jQuery相关的API都能通过一个全局性的对象来容纳. 名为jQuery的全局变量就是这样一个对象,不 ...

  3. jQuery对象和普通DOM对象的区别

    1.DOM对象DOM实际上是以面向对象方式描述的文档模型.DOM定义了表示和修改文档所需的对象.这些对象的行为和属性以及这些对象之间的关系.根据W3C DOM规范,DOM是HTML与XML的应用编程接 ...

  4. jQuery 对象和 DOM 对象

    jQuery(DOM对象) 或者 $(DOM对象) 此函数的作用是将DOM对象,转换为jQuery的对象 DOM对象其实就是javascript的函数对象,可以用来操作所有HTML元素.比如: a标签 ...

  5. jQuery对象和DOM对象之间的转换

    jQuery对象不能使用DOM对象的任何方法,DOM对象也不能使用jQuery对象的任何方法.在需要使用时需要对其进行转换. jQuery对象前使用"$",这不是必须的,不这么使用 ...

  6. js中的DOM对象 和 jQuery对象 比较

    一,二者的区别 通过 jQuery 获取的元素是一个数组,数组中包含着原生JS中的DOM对象. 总结:jQuery 就是把 DOM 对象重新包装了一下,让其具有了 jQuery 方法. 二,二者的相互 ...

  7. jquery 源码学习（四）构造jQuery对象-工具函数

    jQuery源码分析-03构造jQuery对象-工具函数,需要的朋友可以参考下.   作者:nuysoft/高云 QQ:47214707 EMail:nuysoft@gmail.com 声明:本文为原 ...

  8. js中的DOM对象和jQuery对象的比较

    1. 二者的不同之处: 通过jQuery获取的元素是一个数组, 数组中包含着原生JS中的DOM对象. 例如, 针对下面的一个div结构: <div id="Box">& ...

  9. jQuery对象与dom对象相互转换

    核心提示:jquery选择器得到的jquery对象和标准的 javascript中的document.getElementById()取得的dom对象是两种不同的对象类型,一般情况下,如S('#id' ...

随机推荐

  1. POJ 1941 The Sierpinski Fractal ——模拟

    只需要开一个数组,记录一下这个图形. 通过一番计算,发现最大的面积大约是2k*2k的 然后递归下去染三角形. 需要计算出左上角的坐标. 然后输出的时候需要记录一下每一行最远延伸的地方,防止行末空格过多 ...

  2. BZOJ2194 快速傅立叶之二 【fft】

    题目 请计算C[k]=sigma(a[i]*b[i-k]) 其中 k < = i < n ,并且有 n < = 10 ^ 5. a,b中的元素均为小于等于100的非负整数. 输入格式 ...

  3. 百度地图API 根据地址查询经纬度

    html页面.引用上API: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> ...

  4. 蔬菜（vegetable）

    蔬菜(vegetable) 题目描述 题目背景:您使用脚本刷出了上题游戏 998244353 关的最高分 (最优解),心满意足的准备点继续学习,忽然一条弹窗弹了出来:你想明白活着的意义吗?你想真正的. ...

  5. pdo防sql注入

    http://blog.csdn.net/qq635785620/article/details/11284591

  6. 【16】vuex2.0 之 getter

    有的组件中获取到 store 中的state,  需要对进行加工才能使用,computed 属性中就需要写操作函数,如果有多个组件中都需要进行这个操作,那么在各个组件中都写相同的函数,那就非常麻烦,这 ...

  7. [翻译][Nokogiri官方教程] 解析HTML/XML文档 / Parsing an HTML/XML Document

    From a String From a File From the Internet Parse Options Encoding 原文: Parsing an HTML/XML Document ...

  8. 修改linux 的bash 为zsh

    针对centos1.  yum -y install zsh git   2. git clone git://github.com/robbyrussell/oh-my-zsh.git ~/.oh- ...

  9. NIO、AIO学习历程

    今天我们以一个常见的面试题作为开始:"谈谈你对IO与NIO的理解".要回答这个问题,我们首先我要了解几个概念: NIO 同步+非阻塞 IO(BIO) 同步+阻塞 AIO 异步+非阻 ...

  10. hdu 3639 有向图缩点+建反向图+搜索

    题意:给个有向图,每个人可以投票(可以投很多人,一次一票),但是一个人只能支持一人一次,支持可以传递,自己支持自己不算,被投支持最多的人. 开始想到缩点,然后搜索,问题是有一点想错了!以为支持按票数计 ...