编写jQuery选择器的最佳实践

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/

此外,如注意到这个,你应该确保更一般的选择放在左侧,这样的:

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