jQuery代码优化 选择符篇
更新时间：2011年11月01日 17:08:39 作者：
毫无疑问，jQuery的独到之处就是它以集合为中心的操作。为了取得DOM对象集合，jQuery利用JavaScript不仅实现了（它诞生时）很多浏览器不支持的CSS选择符，还实现了不少独到的自定义选择符，为在文档中查找元素提供了极大的便利
本文就从选择符的角度简单探讨一下优化jQuery代码的问题。
Sizzle的运行机制
jQuery从1.3开始把根据选择符表达式查找元素的代码独立出来，也就是Sizzle引擎。当我们把一个选择符表达式（比如"#id"、".class"、":nth-child(2)"）传递给$()函数时，Sizzle在内部会优先利用浏览器原生支持的DOM方法来查找元素，以求得最大的执行速度。以下就是Sizzle会优先选用的几个标准的原生方法（各个方法的用途不再赘述）：
getElementById()
getElementsByTagName()
getElementsByClassName()
querySelectorAll()
如果浏览器不支持某个方法，或者传入的选择符表达式不是标准选择符（如":eq()"、":odd"或其他自定义选择符），Sizzle就会使用document.getElementsByTagName('*')来取得文档中的所有元素，然后再遍历并测试每个元素。显然，这是万不得已才会用的方法；可想而知，这个最笨的方法，效率也是最低的。
优化示例
举个例子，假设我们要取得页面表单中的所有的文本框，即：
<input type="text">
可以使用两个选择符：
$('input[type="text"]')
$('input:text')
第一个选择符是标准的CSS属性选择符，第二个选择符是自定义选择符。根据前面对Sizzle引擎的分析可知，在大多数现代浏览器（支持原生querySelectorAll()方法的浏览器）中，第一个选择符的速度比第二个要快很多。
再举一个例子。假设有下面两个jQuery查询：
$('input').eq(1)
$('input:eq(1)')
第一个查询先通过标准的CSS元素选择符查找所有input元素，然后再调用jQuery的eq()方法取得匹配结果中的第二个元素（eq()方法的索引参数是从0开始计算的）。第二个查询则使用了自定义的伪类选择符:eq()。通过测试可以看出，第一种方法的速度比第二种方法快得就更多了。
结论
要尽可能使用CSS规范中规定的选择符，除非没有标准选择符，才考虑使用jQuery的自定义选择符。
（注：本文基于《jQuery基础教程（第3版）》相关章节内容编撰而成。）
Sizzle的运行机制
jQuery从1.3开始把根据选择符表达式查找元素的代码独立出来，也就是Sizzle引擎。当我们把一个选择符表达式（比如"#id"、".class"、":nth-child(2)"）传递给$()函数时，Sizzle在内部会优先利用浏览器原生支持的DOM方法来查找元素，以求得最大的执行速度。以下就是Sizzle会优先选用的几个标准的原生方法（各个方法的用途不再赘述）：
复制代码 代码如下:
getElementById()
getElementsByTagName()
getElementsByClassName()
querySelectorAll()
如果浏览器不支持某个方法，或者传入的选择符表达式不是标准选择符（如":eq()"、":odd"或其他自定义选择符），Sizzle就会使用document.getElementsByTagName('*')来取得文档中的所有元素，然后再遍历并测试每个元素。显然，这是万不得已才会用的方法；可想而知，这个最笨的方法，效率也是最低的。
优化示例
举个例子，假设我们要取得页面表单中的所有的文本框，即：
<input type="text">
可以使用两个选择符：
复制代码 代码如下:
$('input[type="text"]')
$('input:text')
第一个选择符是标准的CSS属性选择符，第二个选择符是自定义选择符。根据前面对Sizzle引擎的分析可知，在大多数现代浏览器（支持原生querySelectorAll()方法的浏览器）中，第一个选择符的速度比第二个要快很多。
再举一个例子。假设有下面两个jQuery查询：
复制代码 代码如下:
$('input').eq(1)
$('input:eq(1)')
第一个查询先通过标准的CSS元素选择符查找所有input元素，然后再调用jQuery的eq()方法取得匹配结果中的第二个元素（eq()方法的索引参数是从0开始计算的）。第二个查询则使用了自定义的伪类选择符:eq()。通过测试可以看出，第一种方法的速度比第二种方法快得就更多了。
结论
要尽可能使用CSS规范中规定的选择符，除非没有标准选择符，才考虑使用jQuery的自定义选择符。
（注：本文基于《jQuery基础教程（第3版）》相关章节内容编撰而成。）
相关文章
这篇文章主要介绍了jQuery实现base64前台加密解密功能,结合实例形式分析了jquery.base64.js实现前台base64加密与解密功能的实现方法,并给出了java实现后台base64加密解密的操作示例对比验证加密效果,需要的朋友可以参考下2017-08-08
Javascript 使用ajax与C#获取文件大小实例详解
本文章向码农们介绍了js ajax获取文件大小的实例,涉及JavaScript调用ajax交互及后台C#文件操作的相关技巧,需要的朋友可以参考下2017-01-01
extend是常用的参数处理函数，特别是对默认值的使用，但是在使用过程中，默认值往往是不能被改变的,需要的朋友可以参考下2014-08-08
本文给大家汇总介绍了2015年7月最新发布的最热最实用的15款jQuery插件，都有着非常炫酷的效果，十分的实用，这里推荐给大家。2015-07-07
jQuery EasyUI datagrid实现本地分页的方法
这篇文章主要介绍了jQuery EasyUI datagrid实现本地分页的方法,以实例形式较为详细的分析了本地分页的原理与相关的实现技巧,需要的朋友可以参考下2015-02-02
jQuery 是最流行和使用最广泛的 JavaScript 框架，它简化了HTML文档遍历，事件处理，动画以及Ajax交互，帮助Web开发人员更快速的实现各种精美的界面效果2012-03-03
position()函数用于返回当前匹配元素相对于其被定位的祖辈元素的偏移，也就是相对于被定位的祖辈元素的坐标。该函数只对可见元素有效。2015-07-07
这篇文章主要介绍了jQuery中使用validate插件校验表单功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴,需要的朋友可以参考下2019-05-05
今天小编就为大家分享一篇js根据json数据中的某一个属性来给数据分组的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-10-10
JQuery 是一款快速、易于使用的 JavaScript 框架。芒果介绍几个实用的 JQuery 技巧和窍门。2010-04-04
最新评论