2

我目前正在我的 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');

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

4

4 回答 4

13

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

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

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

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

var $codeBlue = $('.codeblue #codeChoice');
于 2012-10-22T17:26:15.477 回答
2

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

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

于 2012-10-22T17:27:17.140 回答
0 
var $select = $("#codeChoice");

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

于 2012-10-22T17:26:47.723 回答
0

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

高性能 Javascript 书籍

var $select = $('#codeChoice");
于 2012-10-22T17:27:21.743 回答