如何优化jquery选择器

原文地址:http://www.sitepoint.com/efficient-jquery-selectors/

和他的字面意思一样,jQuery专注于查询. 他的核心类库允许你使用CSS选择器语法和集合中的方法来查找DOM树中的元素.

jQuery使用本地浏览器中的API方法来获取DOM集合. 比较新的浏览器都支持getElementByClassName,querySelector和querySelectorAll来解析CSS, 较老的浏览器只支持个getElementById, getElementsByTagName. 可糟糕的是, jQuery'sizzle engine 必须分析选择器的字符并寻找与之匹配的元素.

记下来5个技巧希望能帮助优化你的jQuery选择器.

1。尽可能使用ID选择器

HTML的ID属性在每个页面中都是唯一的, 即使最老的浏览器也能够最快的定位到该元素.

$('#myelement');

2。避免只用类选择器

下面的例子在比较新的浏览器中运行的是比较快的.

$(".myclass");

但是在比较老的浏览器比如IE6/7, Firefox2中,jQuery必须检查页面上的所有元素, 以确定哪些应用了该类样式.

但如果我们加上标签限定一下的话,查询结果会更快些, 如下:

$("div.myclass"); 

因为jQuery可以将查询限定在div元素内.

3。尽量使选择器语法简单

要避免过于复杂的选择器。除非你的HTML结构非常复杂，否则很少出现2或3层以上的选择器语法.

看看下面的复杂选择器的例子:

$("body #page:first-child article.main p#intro em"); 

除了<p>标签和#intro 是必须的外,其他的可以简化为如下:

$("p#intro em");

4。从左至右缩小范围,增加独有性

了解一点jQuery选择器的知识很有用.(废话,没用我学他干嘛)  他是从最后面的选择器开始查询, 在老版本的浏览器中, 例如下面的例子

$("p#intro em"); 

先加载所有的em元素到一个数组中, 然后在他的父节点中剔除掉所有不是p标签和没有intro  ID的。如果你的页面有几百个em标签的话,那运行起来肯定慢啦.根据自己的文档结构,使查询先搜寻最容易找到的选择器, 然后把他当做选择器的起点来查询.如下:

$("em", $("p#intro")); // or $("p#intro").find("em"); 

5。避免重复查询

现实中极少使用2次相同的选择器, 如下, 每个p标签被查询了3次:

$("p").css("color", "blue"); $("p").css("font-size", "1.2em"); $("p").text("Text changed!"); 

注意: jQuery提供了链查询, 多个选择器可以串联起来使用, 相同的代码可以重写, 串联起来后的代码如下:

$("p").css({ "color": "blue", "font-size": "1.2em"}).text("Text changed!"); 

是不是简单了许多?

如果同一个选择器多次使用的话,应该把他做为缓存放到一个变量中. 如下:

var $p = $("p"); $p.css("color", "blue"); $p.text("Text changed!");

不同于标准的DOM树集合, jQuery采集器不是实时的, 当有段落标签从文档中增加或减少时, 对象不会实时更新. 你可以创建一个DOM集合并把他传递给需要他的jQuery函数, 如下例:

var p = document.getElementByTagName("p"); $(p).css("color", "blue"); // update the DOM $(p).text("Text changed!"); 

注意:作者有的例子举得并不好, 比如第3个例子 p #intro, 明显不好, 直接用$('#intro') 使用唯一的ID显然更快. 不过作者毕竟提供的几个好的方法.