高效jQuery选择器的5个技巧实例分析
本文实例讲述了高效jQuery选择器的5个技巧。分享给大家供大家参考，具体如下：
顾名思义，jQuery专注于查询（queries）。库的核心允许你使用CSS选择器语法，以及通过在集合上执行函数，来查找DOM元素。
jQuery使用浏览器原生API方法获取DOM集合。现代浏览器支持getElementsByClassName,querySelector以及querySelectorAll（可以解析CSS语法）。然而，老版本的浏览器可能只提供getElementById以及getElementByTagName。在最坏的情况下，jQuery的Sizzle引擎必须解析选择器字符串来匹配元素。
下面是可以帮助你优化jQuery选择器的5点提示：
1.尽量使用ID
HTMLID属性在每一个页面上都是唯一的，并且即使老版本的浏览器也可以非常迅速地定位一个元素：
$("#myelement");
2.避免只使用类名称
下面的类选择器在现代浏览器中执行迅速：
$(".myclass");
不幸的是，在老版本的浏览器，比如IE6/7和Firefox2，jQuery必须检查页面上的每一个元素来确定“myclass”是否被元素所包含。
如果通过标签名加以限定可以让选择器更加的高效，例如：
$("div.myclass");
jQuery现在可以将搜索范围限定在DIV元素。
3.保持简单!
避免过于复杂的选择器。除非你要查找一个极其复杂的HTML文档，很少有需要使用多于2，3个修饰符的情况。
考虑下面的复杂选择器：
$("body#page:first-childarticle.mainp#introem");
p#intro一定是唯一的，因而选择器可以这样简化：
$("p#introem");
4.从左往右增加特异性
了解一点jQuery选择器引擎的相关知识是有帮助的。查找首先从最后一个选择器开始，因此，在老版本的浏览器中，一个类似于这样的查询：
$("p#introem");
将所有的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("Textchanged!");
记住jQuery支持链式操作；多个方法可以应用于同一个集合之上。因此，同样效果的代码可以通过单一的选择器重写：
$("p").css({"color":"blue","font-size":"1.2em"}).text("Textchanged!");
如果需要多次使用同一组元素集合，你应该将jQuery对象使用变量加以缓存，例如：
var$p=$("p");
$p.css("color","blue");
$p.text("Textchanged!");
与标准的DOM集合不同，jQuery集合并不是实时的，并且对象不会在paragraph标签从文档中新增或者移除时自动更新。你可以利用这个限制，创建DOM集合，并在需要时将其传递给jQuery函数，例如：
varp=document.getElementByTagName("p");
$(p).css("color","blue");
//updatetheDOM
$(p).text("Textchanged!");
原文链接：5TipsforMoreEfficientjQuerySelectors
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。