$('#tabs a')和$('#tabs').find('a')之间的差异

Question

我有以下结构

<ul id="tabs" class="nav nav-tabs">
    <li><a href="#aaa" hashval="aaa">AAA</a></li>
    <li><a href="#bbb" hashval="bbb">BBB</a></li>
    <li><a href="#ccc" hashval="ccc">CCC</a></li>
    <li><a href="#ddd" hashval="ddd">DDD</a></li>
</ul>

现在，我通过下面的代码对锚标签进行操作，并且运行良好。

$('#tabs a[href="#ddd"]').tab('show');

我正在使用pycharm，它通过说"Preface with ID selector“为这一行添加了警告。当我单击它时，pycharm会变成如下所示

$('#tabs').find('a[href="#ddd"]').tab('show');

两者都工作得很好，但我不明白其中的区别。

两者的区别是什么?更具体地说，$('#tabs a[href="#ddd"]')和$('#tabs').find('a[href="#ddd"]')之间的区别是什么

Answer 1

$("#tabs a")从右到左计算-这是Sizzle选择器引擎和querySelectorAll的原生方向-也就是说，它首先找到页面中的所有锚元素，然后将其缩小到#tabs下的那些。

$("#tabs").find("a")更直观地从左到右计算，即首先找到#tabs，然后只查找它下面的锚点元素。

很明显，后者会产生better performance，但它只有在累积的情况下才是可察觉的；也就是说，如果您运行数千个查询。否则，差异可以忽略不计。

Answer 2

如"Increase Specificity from Left to Right"中所述

对

的选择器引擎略知一二会很有用。它首先从最后一个选择器开始工作，因此，在较旧的浏览器中，查询如下：

$("p#intro em")；

将每个em元素加载到数组中。然后，它处理每个节点的父节点，并拒绝那些找不到p#intro的节点。如果页面上有数百个em标记，则查询效率会特别低。

根据您的文档，可以通过首先检索符合最佳条件的选择器来优化查询。然后，它可以用作子选择器的起点，例如

$("em"，$("p#intro"))；//或$("p#intro").find("em")；

但是Test case说$("#tabs > a")将是最快的

Answer 3

第二个要快得多。原因是jQuery的选择器引擎Sizzle，它遍历从right到left的选择，而不是相反。

这意味着选择器

$('#tabs a[href="#ddd"]')

首先在DOM文档中查询标记，该标记包含设置为#ddd的属性href。然后过滤掉所有的标签，得到每一个是<a>标签的标签。最后，它遍历每个节点的DOM树，试图找到父#tabs。

想象一下，一个网站有1.000个带有href="#ddd"的标签，那将会是多么的慢。

然后。

pycharm建议的另一种变体是首先定位元素#tabs。这非常快，因为jQuery可以利用本机浏览器方法getElementById()。有了这个节点，它就可以遍历所有匹配的标签。通过这样做，而不是all tags in the whole DOM-tree，需要检查。只有那些实际在#tabs中的。

欲了解更多信息，请访问this page in the documentation。