JQuery querySelector ：通过 class AND id 进行选择有好处吗？

Question

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

 $('.red #mydiv')

这个和

是更好、更差还是完全一样

 $('#mydiv')

为什么？性能原因？

我的好奇心非常想知道！

Answer 1

好吧，如果您想捕获具有 class 或特定 div 的所有元素的悬停事件，那么这将是有意义的。请记住，这是 OR 条件而不是 AND，因此这取决于您要完成的任务。

Answer 2

性能方面，单独使用 id 是最有效的。但是，在 id.

之前有一个祖先 class 是有效的用例

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

Answer 3

这可能取决于您要做什么。

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

这真的不是性能问题；这取决于您是否需要 .red class 选择器提供的属性，或者是否只需要 myDiv ID。此外，如果有一些其他 Javascript 或 JQuery 代码根据元素的 ID 或 class 属性选择和识别元素，则该代码可能需要其中任何一个来查找这些元素。

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

Answer 4

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

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

因此

$('.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 5

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

第一个答案是，如果代码使用这样的选择器，可能是您的伙伴错误地针对一个唯一元素 - 两次。第二个答案是，他有一个坏 html。他必须那样做。第三个回答，他在页面上有多个元素在做同样的动作。

JQuery querySelector : is there benefit to selecting by class AND id?