Question

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

不使用显式选择器是否有性能命中？

Answer 1

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

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

就你的另一个问题而言，没有简单的答案。多个选择器可能会导致速度减慢，但您必须尝试了解。此外，它取决于浏览器。查看它的最佳选择是使用http://jsperf.com/

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

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

Answer 2

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

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

Answer 3

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

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

Answer 4

在jQuery中选择元素的最快方法是使用ID。按Id访问元素有利于提高性能。由于id在页面上是唯一的。

High performance Javascript book

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

编写jQuery选择器的最佳实践

4 个答案: