一、

使用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. EPPlus(SQL导成Excel)

    使用Epplus方法把sql数据库中表的数据导出到excel中去: 需要使用EPPlus.dll引用. using System.IO; using OfficeOpenXml; public sta ...

  2. windows api 程序

    #include "StdAfx.h" #include<windows.h> #include<mmsystem.h> LRESULT CALLBACK ...

  3. bzoj 合集 1079 1791 1876 2208 2306

    1079 记忆化瞎搞吧,[a][b][c][d][e][l]表示当前有能涂1次的油漆a个,能涂2次的b个….前一个颜色为l,再搞下转移就行了. 1791 基环树上找直径 1876 高精度 2208 看 ...

  4. springboot开启定时任务 添加定时任务 推送

    最近在自学Java的springboot框架,要用到定时推送消息.参考了网上的教程,自己调试,终于调好了.下面将网上的教程归纳下,总结复习下.  springboot开启定时任务  在SpringBo ...

  5. vue-element-admin开发模式下style标签热更新失效[解决办法]

    参考:https://forum.vuejs.org/t/vue-cli-3-x-style/46306/3 vue.config.js添加配置 css: { sourceMap: false, mo ...

  6. How to use rowspan and colspan in tbody using datatable.js?

    https://stackoverflow.com/questions/27290693/how-to-use-rowspan-and-colspan-in-tbody-using-datatable ...

  7. ckeditor自己用的配置文件config.js

    原文发布时间为:2011-01-17 -- 来源于本人的百度文章 [由搬家工具导入] CKEDITOR.editorConfig = function(config) {    // Define c ...

  8. .net web api返回结果为json

    web api写api接口时默认返回的是把你的对象序列化后以XML形式返回,那么怎样才能让其返回为json呢,下面为大家介绍几种不错的方法 web api写api接口时默认返回的是把你的对象序列化后以 ...

  9. duilib入门简明教程 -- 前言(1) （转）

    原文转自 :http://www.cnblogs.com/Alberl/p/3341956.html     关于duilib的介绍就不多讲了,一来不熟,二来小伙伴们想必已经对比了多个界面库,也无需赘 ...

  10. VS Code开发技巧集锦【转】

    转自:http://blog.csdn.net/tiantangyouzui/article/details/52163175 入门 自定义 扩展 文件/文件夹管理 编辑技巧 智能感应功能 代码片段 ...