jQuery代码优化 选择符篇

毫无疑问，jquery的独到之处就是它以集合为中心的操作。为了取得DOM对象集合，jQuery利用JavaScript不仅实现了（它诞生时）很多浏览器不支持的CSS选择符，还实现了不少独到的自定义选择符，为在文档中查找元素提供了极大的便利 本文就从选择符的角度简单探讨一下优化jQuery代码的问题。

Sizzle的运行机制

jQuery从1.3开始把根据选择符表达式查找元素的代码独立出来，也就是Sizzle引擎。当我们把一个选择符表达式（比如"#id"、".class"、":nth-child(2)"）传递给$()函数时，Sizzle在内部会优先利用浏览器原生支持的DOM方法来查找元素，以求得最大的执行速度。以下就是Sizzle会优先选用的几个标准的原生方法（各个方法的用途不再赘述）：

如果浏览器不支持某个方法，或者传入的选择符表达式不是标准选择符（如":eq()"、":odd"或其他自定义选择符），Sizzle就会使用document.getElementsByTagName('*')来取得文档中的所有元素，然后再遍历并测试每个元素。显然，这是万不得已才会用的方法；可想而知，这个最笨的方法，效率也是最低的。

优化示例
举个例子，假设我们要取得页面表单中的所有的文本框，即：

<input type="text">
可以使用两个选择符：

第一个选择符是标准的CSS属性选择符，第二个选择符是自定义选择符。根据前面对Sizzle引擎的分析可知，在大多数现代浏览器（支持原生querySelectorAll()方法的浏览器）中，第一个选择符的速度比第二个要快很多。

再举一个例子。假设有下面两个jQuery查询：

第一个查询先通过标准的CSS元素选择符查找所有input元素，然后再调用jQuery的eq()方法取得匹配结果中的第二个元素（eq()方法的索引参数是从0开始计算的）。第二个查询则使用了自定义的伪类选择符:eq()。通过测试可以看出，第一种方法的速度比第二种方法快得就更多了。

结论
要尽可能使用CSS规范中规定的选择符，除非没有标准选择符，才考虑使用jQuery的自定义选择符。

（注：本文基于《jQuery基础教程（第3版）》相关章节内容编撰而成。）

您可能感兴趣的文章：
细说 jQuery 元素篇（二） – 选择符
CSS弹出DIV 在窗口居中位的例子
jquery源码-核心源码结构
jQuery :target 选择器
站长必看:整站优化和单页面优化方法
编写更好的jQuery代码
浅析jquery的作用与优势
高效jQuery的奥秘 译
jQuery性能优化的38个建议
jquery高级编程的最佳实践详解