深圳企业公司做网站冯耀宗seo教程

jquery的五种选择器

顾名思义，jQuery专注于查询。 该库的核心使您可以使用CSS选择器语法查找DOM元素，并在该集合上运行方法。

jQuery使用本机浏览器API方法来检索DOM集合。 较新的浏览器支持解析CSS语法的getElementsByClassName，querySelector和querySelectorAll。 但是，较旧的浏览器仅提供getElementById和getElementByTagName。 在最坏的情况下， jQuery的Sizzle引擎必须解析选择器字符串并寻找匹配的元素。

这里有五个技巧可以帮助您优化jQuery选择器…

1.尽可能使用一个ID

HTML ID属性在每个页面中都是唯一的，即使是较旧的浏览器也可以很快找到单个元素：

$("#myelement");

2.避免仅按类别选择

以下类选择器将在现代浏览器中快速运行：

$(".myclass");

不幸的是，在IE6 / 7和Firefox 2等较旧的浏览器中，jQuery必须检查页面上的每个元素以确定是否已应用“ myclass”。

如果我们使用标签名称来限定选择器，则该选择器将更加高效

$("div.myclass");

jQuery现在可以将搜索限制为仅DIV元素。

3.保持简单！

避免选择器过于复杂。 除非您有一个非常复杂HTML文档，否则很少需要两个或三个以上的限定符。

考虑以下复杂的选择器：

$("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集合将不存在 ，并且对象也不会更新。 您可以通过创建DOM集合并在需要时将其传递给jQuery函数来绕过此限制进行编码，例如

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

您还有其他jQuery选择器优化技巧吗？

翻译自: https://www.sitepoint.com/efficient-jquery-selectors/

jquery的五种选择器