DDR爱好者之家

高效jQuery选择器的5个技巧实例分析
站长资源 2024/12/29 佚名
67 1538
DDR爱好者之家 Design By 杰米

本文实例讲述了高效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

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米