编写 jQuery 选择器的最佳实践答案

【问题标题】：Best Practices For Writing jQuery Selectors编写 jQuery 选择器的最佳实践
【发布时间】：2012-10-12 13:32:52
【问题描述】：

我目前正在我的 jQuery 代码中编写非常明确的选择器。例如给定这个标记

<div class="codeblue">
    <div class="codeyellow">
        <div class="codeorange">
            <div class="codewhite">
                <select id="codeChoice">
                    <option>red</option>
                    <option>green</option>
                    <option>black</option>
                </select>
            </div>
        </div>
    </div>
</div>

我使用这个显式选择器

var $select = $('.codeblue .codeyellow .codeorange .codewhite #codeChoice');

这样做会更好吗？

var $codeBlue = $('.codeblue');
var $select = $codeBlue.find('#codeChoice');

不使用显式选择器是否会影响性能？

【问题讨论】：

你为什么要这样做？应该只有一个 ID 为 codeChoice 的元素。
你所做的实际上让它变慢了。
只是一个旁注：在 javascript 中你不需要美元符号，你可以简单地使用 var selet = ...
这两个sn-ps完全不同。
stackoverflow.com/questions/6028555/…

标签： javascript jquery html jquery-selectors

【解决方案1】：

实际上，由于 ID 是唯一的，您只需从一开始就选择 ID。

var $select = $('#codeChoice');

就您的其他问题而言，没有简单的答案。多个选择器可能会导致速度变慢，但您确实必须尝试知道。此外，它取决于浏览器。检查它的最佳选择是使用http://jsperf.com/

另外，正如this 中所述，您应该确保将不太具体的选择器放在左侧，如下所示：

var $codeBlue = $('.codeblue #codeChoice');

【讨论】：

或者，如果在另一个页面上重复使用相同的脚本，其中#codeChoice 可以位于不同的结构中：$('.codeblue #codeChoice')。
我正在与其他开发人员一起编写代码，目标是拥有具有唯一 ID 的标签。但是，为了确保不会意外使用相同的 id，我将代码包装在 div 中并将 div 视为根，因此需要 $codeBlue.find('#codeChoice');使用这种方法时是否会影响性能？我知道按 id 选择是个好主意，但我不能抓住这个机会，以防其他人使用相同的 id。如果我是这个项目中唯一的人，我会简单地使用 id 选择器。
@bfavaretto 那时它将是无效的 HTML，jQuery 在看到 $("tagname #idval") 时是否优化，跳到 document.getElementById()？编辑：它没有优化，所以它是一个安全的选择。
@Halcyon 正如我在回答中所写，唯一确定的方法是对其进行测试。 IIRC 旧版本的 IE 在类选择器上存在一些减速问题。不过，您应该不会注意到大幅放缓
@KevinB 我不认为它为此进行了优化。我在考虑这样一种情况：（a）相同的 id 在两个不同的页面（每个页面上一次）中使用不同，（b）两个页面共享相同的脚本，以及（c）脚本应该以该 id 为目标只是其中一页。

【解决方案2】：

如果使用具体的 ID，jQuery 会更快，因为它使用原生方法 document.getElementById(); 由于您的第一个选择器包括 4 个类（= 慢检测）和 1 个 id（= 更快检测），而您的第二个选择器 1 个类（= 慢检测）和 1 个 Id（= 更快检测），第二个会更快。

通常选择器会更快，因为包含的片段越少。

【讨论】：

【解决方案3】：

var $select = $("#codeChoice");

应该足够了，因为id 应该是唯一的

【讨论】：

使用 jQuery $ 有意义 - 尽量不要将其用作变量名的一部分
只是复制海报的变量；）我自己永远不会这样做

【解决方案4】：

在 jQuery 中选择元素的最快方法是通过 ID。按 ID 访问元素有利于性能。因为 id 在页面上是唯一的。

High performance Javascript book

var $select = $('#codeChoice");

【讨论】：