高效jQuery选择器的5个技巧

顾名思义,jQuery专注于查询(queries)。库的核心允许你使用CSS选择器语法,以及通过在集合上执行函数,来查找DOM元素。

jQuery使用浏览器原生API方法获取DOM集合。现代浏览器支持getElementsByClassName, querySelector以及querySelectorAll(可以解析CSS语法)。然而,老版本的浏览器可能只提供getElementById以及getElementByTagName。在最坏的情况下,jQuery的Sizzle引擎必须解析选择器字符串来匹配元素。

下面是可以帮助你优化jQuery选择器的5点提示:

1. 尽量使用ID

HTML ID属性在每一个页面上都是唯一的,并且即使老版本的浏览器也可以非常迅速地定位一个元素:

$("#myelement");

2. 避免只使用类名称

下面的类选择器在现代浏览器中执行迅速:

$(".myclass");

不幸的是,在老版本的浏览器,比如IE6/7和Firefox 2,jQuery必须检查页面上的每一个元素来确定“myclass”是否被元素所包含。

如果通过标签名加以限定可以让选择器更加的高效,例如:

$("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父节点标签的元素。如果页面上包含数百个em标签的话,查询会变得十分的低效。

根据你的文档,查询可以通过优先使用最佳限定符来获得优化。其结果可以作为子选择器的出发点,例如:

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

5. 避免重复选择

很少需要重复使用同样的选择器两次。下面的代码对每一个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!");

如果需要多次使用同一组元素集合,你应该将jQuery对象使用变量加以缓存,例如:

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

与标准的DOM集合不同,jQuery集合并不是实时的,并且对象不会在paragraph标签从文档中新增或者移除时自动更新。你可以利用这个限制,创建DOM集合,并在需要时将其传递给jQuery函数,例如:

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

原文链接:5 Tips for More Efficient jQuery Selectors

本文链接:http://bookshadow.com/weblog/2015/10/19/5-tips-for-more-efficient-jquery-selectors/
请尊重作者的劳动成果,转载请注明出处!书影博客保留对文章的所有权利。

如果您喜欢这篇博文,欢迎您捐赠书影博客: ,查看支付宝二维码

Pingbacks已关闭。

暂无评论

张贴您的评论