一、

使用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. pat 甲级 1022. Digital Library (30)

    1022. Digital Library (30) 时间限制 1000 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue A Di ...

  2. 洛谷 [P1337] 平衡点

    模拟退火练手 一道模拟退火的好题 结果一定势能最小 与模拟退火思路高度一致 #include <iostream> #include <cstdio> #include < ...

  3. 浏览器的 16ms 渲染帧

    标签 归档 关于arttle Land 浏览器的 16ms 渲染帧 DOM JavaScript 异步 性能 重绘 由于现在广泛使用的屏幕都有固定的刷新率(比如最新的一般在 60Hz), 在两次硬件刷 ...

  4. Day 26 python 正则表达式

    re模块\正则表达式 一.元字符 1.. ^ $ * + ? { } [ ] | ( ) \ "." 代表(任意一个字符) "*" 代表(任意数量任意字符,0- ...

  5. LeetCode OJ-- Maximum Depth of Binary Tree

    https://oj.leetcode.com/problems/maximum-depth-of-binary-tree/ 求二叉树的最大深度 深度优先搜索 /** * Definition for ...

  6. win7 64位数据库连接问题：在指定的 DSN 中，驱动程序和应用程序之间的体系结构不匹配

    通过ODBC/JDBC连接程序和数据库时,异常报错“在指定的 DSN 中,驱动程序和应用程序之间的体系结构不匹配”的解决办法 本机:64位win7,64位JDK,做Web实验用32位myeclipse ...

  7. RecyclerView的Item和Item内的控件点击处理

    需求场景:RecyclerView的Item需要点击,或者Item中的某个控件需要点击,或者两者同时需要点击处理. 一.adapter代码如下: package com.ldw.adapter; im ...

  8. AC日记——石子归并 51nod 1021

    石子归并 思路: 经典动态规划——归并类问题: 我们把状态划为n个,即1-n的n个长度为n个状态: 那么,每个长度为i的状态都可以由i-1个长度为i-1的状态推出: 所以,dp转移方程: dp[i][ ...

  9. Cryptography I 学习笔记 --- 基于陷门置换的公钥加密

    RSA算法的工作流程 1. 生成公钥私钥 生成两个素数p和q,计算n=p*q,计算φ(n)=n-p-q+1,然后生成e与d,使 e * d = 1 mod φ(n). 然后以(n, e)作为公钥,(n ...

  10. Codeforces 899 B.Months and Years

    B. Months and Years   time limit per test 1 second memory limit per test 256 megabytes input standar ...