一、

使用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. Optimal Marks(optimal)

    Optimal Marks(optimal) 题目描述 定义无向图边的值为这条边连接的两个点的点权异或值. 定义无向图的值为无向图中所有边的值的和. 给定nn个点mm条边构成的图.其中有些点的权值是给 ...

  2. 【08】node 之 fs文件

    var fs = require("fs");//fs 系统文件模块,对文件进行操作.Node.js 文件系统(fs 模块)模块中的方法均有异步和同步版本,例如读取文件内容的函数有 ...

  3. 【转】利用ScriptManager实现Javascript调用WebService中的方法

    原文发布时间为:2009-07-01 -- 来源于本人的百度文章 [由搬家工具导入] 前台调用后台方法，或者后台调用前台方法。ScriptManager实现 开发过程中，总想在前台直接调用后台的met ...

  4. js,add script async? loaded ok.

    function loadScript(url, callback){ var script = document.createElement_x("script") script ...

  5. 【Android】SQLite基本用法（转）

    在Android开发中SQLite起着很重要的作用,网上SQLite的教程有很多很多,不过那些教程大多数都讲得不是很全面.本人总结了一些SQLite的常用的方法,借着论坛的大赛,跟大家分享分享的.一. ...

  6. 基于c语言中调试工具的用法汇总(不包含gdb)【转】

    转自:http://www.jb51.net/article/36829.htm 是不是只有编译的时候才知道程序写了错误?有没有在未编译的时候就让机器帮你检查错误的工具呢? 答案是:有!! splin ...

  7. python 代码格式

    python 代码格式 Python对代码的缩进要求非常严格,如果不采用合理的代码缩进,将抛出SyntaxError异常 Python语句中一般以新行作为为语句的结束符.但是我们可以使用斜杠( )将一 ...

  8. iptables之centos6版本详解

    1 Linux防火墙概述 Linux防火墙实际指的是Linux下的Netfilter/Iptables.Netfilter/Iptables是2.4.x/2.6.x版本Linux内核集成的IP信息包过 ...

  9. AC日记——[Sdoi2010]星际竞速 bzoj 1927

    1927 思路: 连边,拆点: 每个点拆成i,i+n,都向t连边: i到t表示高速模式,i+n到t表示跳跃模式: 然后读入路径,如果u>v,则交换u,v: u向v+n连边: spfa跑最小费用: ...

  10. 深度学习_2_CNN

    Basic Conception: 感受野(Reception Field) 权值共享(shared weights) 池化,即降采样(sub-Sampling) 卷积核(kernel,filter) ...