JQuery querySelector：按类AND id选择是否有好处？

Question

我继承了一些旧的jquery代码，我注意到原始开发人员在整个地方都使用了查询选择器“.class #id”。例如：

 $('.red #mydiv')

这是

更好，更差还是完全相同

 $('#mydiv')

为什么？表现原因？

我好奇的头脑很想知道！

Answer 1

单独使用id的性能最有效。但是，在id之前有一个祖先类的有效用例。

例如，考虑一个后端模板，它根据当前使用的路径在body上设置不同的类。 id可能存在于所有路由中，但只有当该体类存在时，您可能希望对其执行特定的操作。

Answer 2

最快的方法是使用ID选择器：$('#mydiv')或document.getElementById("mydiv")。

你可以在你的特定情况下考虑（如果该代码的作者实际上知道他在做什么）是jQuery代码可能是通用的：

• 在所有页面中处理相同的jQuery代码
• #mydiv可以出现在多个页面中，但位于不同的地方
• 在某些页面中.red
• 仅定位#mydiv
中出现.red的情况

因此

$('.red #mydiv').text("Hello, World!")

page1.html

<div class="red">
   <div id="mydiv">Hello, World!</div>
</div>

page2.html

<div class="blue">
   <div id="mydiv"></div>
</div>

在选择器中添加了一层特异性。

Answer 3

好吧，如果你想捕捉让我们为该类或特定div的所有元素说悬停事件，那么这将是有意义的。请记住，这是一个OR条件而不是AND，因此它取决于您要完成的任务。

Answer 4

这可能取决于你想要做什么。

在CSS中，类属性通常用于需要继承某些样式的许多元素，而ID属性则用于需要继承某些样式的特定元素。

这不是性能问题;这是一个问题，如果你需要.red类选择器给出的属性，或者所需要的只是myDiv ID。此外，如果有一些其他Javascript或JQuery代码根据其ID或类属性选择和标识元素，则该代码可能需要任何一个来查找这些元素。

请记住，ID只能由一个元素使用，而许多元素可能有一个类，事实上，元素通常有多个类。

Answer 5

我想这个问题有多个答案。

第一个答案是，如果代码使用这样的选择器，也许你的伙伴通过定位一个独特的元素 - 两次错误。 第二个答案是，他有一个糟糕的HTML。他必须这样做。 第三个答案，他在页面上有多个元素做同样的动作。