数组方式使用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=;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对象的更多相关文章
- JavaScript 对象、DOM对象、jquery对象的区别、转换详解
一.JavaScript 对象 JavaScript 提供多个内建对象,比如 String.Date.Array 等等. 对象只是带有属性和方法的特殊数据类型. 访问对象的属性: [javascrip ...
- JQuery $ $.extend(),$.fn和$.fn.extend javaScript对象、DOM对象和jQuery对象及转换 工具方法(utility)
一.为什么jquery前面要写$ Javascript没有package的概念,而作者又希望所有jQuery相关的API都能通过一个全局性的对象来容纳. 名为jQuery的全局变量就是这样一个对象,不 ...
- jQuery对象和普通DOM对象的区别
1.DOM对象DOM实际上是以面向对象方式描述的文档模型.DOM定义了表示和修改文档所需的对象.这些对象的行为和属性以及这些对象之间的关系.根据W3C DOM规范,DOM是HTML与XML的应用编程接 ...
- jQuery 对象和 DOM 对象
jQuery(DOM对象) 或者 $(DOM对象) 此函数的作用是将DOM对象,转换为jQuery的对象 DOM对象其实就是javascript的函数对象,可以用来操作所有HTML元素.比如: a标签 ...
- jQuery对象和DOM对象之间的转换
jQuery对象不能使用DOM对象的任何方法,DOM对象也不能使用jQuery对象的任何方法.在需要使用时需要对其进行转换. jQuery对象前使用"$",这不是必须的,不这么使用 ...
- js中的DOM对象 和 jQuery对象 比较
一,二者的区别 通过 jQuery 获取的元素是一个数组,数组中包含着原生JS中的DOM对象. 总结:jQuery 就是把 DOM 对象重新包装了一下,让其具有了 jQuery 方法. 二,二者的相互 ...
- jquery 源码学习(四)构造jQuery对象-工具函数
jQuery源码分析-03构造jQuery对象-工具函数,需要的朋友可以参考下. 作者:nuysoft/高云 QQ:47214707 EMail:nuysoft@gmail.com 声明:本文为原 ...
- js中的DOM对象和jQuery对象的比较
1. 二者的不同之处: 通过jQuery获取的元素是一个数组, 数组中包含着原生JS中的DOM对象. 例如, 针对下面的一个div结构: <div id="Box">& ...
- jQuery对象与dom对象相互转换
核心提示:jquery选择器得到的jquery对象和标准的 javascript中的document.getElementById()取得的dom对象是两种不同的对象类型,一般情况下,如S('#id' ...
随机推荐
- 几种API接口
实用号码归属地查询(IP 地址,手机号码): 默认格式: http://api.liqwei.com/location/ (使用来访者的 IP 地址) 指定 IP 地址格式: http://api.l ...
- python数据结构之字典
1.python字典的定义 1.用大括号{},以逗号分隔每个键值对,键与值之间用冒号连接 2.键:需要不可变的数据结构,值可以是任意的数据对象 3.字典是无序的,键在字典中必须是唯一,在字典中取值的方 ...
- 更改MVC3默认错误提示信息 模型验证 validation
原文发布时间为:2011-07-20 -- 来源于本人的百度文章 [由搬家工具导入] Model Metadata and Validation Localization using Conventi ...
- Codeforces Round #453 Div. 2 A B C D (暂时)
// 从大作业和实验报告中爬出来水一发 // 补题...还是得排在写完实验报告之后... A. Visiting a Friend 题意 给定若干段行车区间,问能否从起点到终点 思路 扫描一遍,维护最 ...
- Understand:高效代码静态分析神器详解(一)【转】
转自:http://www.codemx.cn/2016/04/30/Understand01/ 之前用Windows系统,一直用source insight查看代码非常方便,但是年前换到mac下面, ...
- java编码,乱码问题详解
一.常见的编码格式 1.ASCII 基础编码,英文和西欧字符. 用一个字节的低7位表示,一共128个. 0~13是控制字符如换行.回车.删除等,32~126是打印字符,键盘输入. 2.IOS-8859 ...
- 查看windows进程,并删除
1. 通过[任务管理器]可以查看windows进程. 有些进程不在[任务管理器]中. 2. 通过tasklist命令查看进程. 杀掉进程: epmd 进程,在停止.卸载后rabbitmq服务还在. 通 ...
- MySQL的INFORMATION_SCHEMA数据库简介
大家在安装或使用MYSQL时,会发现除了自己安装的数据库以外,还有一个 information_schema数据库.information_schema数据库是做什么用的呢,使用WordPress博客 ...
- 【mob】Android短信验证+源码
在很多的应用当中,都涉及到了短信验证的功能,比如在注册或者找回密码的时候,那么我们如何通过第三方的平台来完成这个功能呢? 本面博文就实现短信验证,来做一个小的栗子. 第一步-下载开发包 第二步-将SD ...
- Mapxtreme 在64位系统运行网站,提示未能加载文件或程序集,或它的某一个依赖项
在32位系统上开发的网站,现在需要布署到64位系统上运行,布署好后访问提示提示未能加载文件或程序集,或它的某一个依赖项.在网上搜索后,发现是64位下引用dll出现的这个问题.这个问题通常出在引用第三方 ...