$('#id tag')与$('#id').find('tag') - 哪个更好？

Question

我想知道哪个选项更好,特别是在速度方面:

$('#id tag')...

要么

$('#id').find('tag')...

此外,如果您更改id和/或更换tag一个class或类似的内容,相同的答案是否适用input:checked？

例如,哪个更好:$('#id input:checked')...或$('#id').find('input:checked');？

Answer 1

您可以根据以下三点做出决定:

可读性

这与你的两个选择器没什么区别.就我而言,我更喜欢$('#id').find('inner')语法,因为它更准确地描述了它实际上在做什么.

可重用性

如果您的代码的其他部分使用相同的id选择器(或其上下文中的某些内容),则可以缓存选择器并重用它.我自己发现重构像这样编写的代码更难$('#id inner'),因为你必须首先解码css选择器,然后才能继续前进并找到可能的改进.

想象一下这两个案例并不复杂

$('#hello .class_name tag').doThis();
$('#hello .other_name input').doThat();

而另一种情况

$('#hello').find('.class_name tag').doThis();
$('#hello').find('.other_name input').doThat();

我想第二个例子尖叫着你"缓存id选择器",而第一个没有.

速度

性能总是一个好点,在这种情况下,id选择器find在大多数浏览器中都能做得更好,因为它首先建立了上下文,并且可以将降序选择器应用于较小的元素子集.

如果你想在jQuery中更多地了解context-vs子集选择器性能,那么这是一个很好的性能测试.ID的子集通常是规则.当然,你可以得到不同的结果,但在大多数情况下,他们会这样做.

因此,从我的观点来看,子集选择器为3到0.

Answer 2

这是测试用例HTML,我在其中查找span元素下的所有元素#i:

<div id="i">
  <span>testL1_1</span>
  <span>testL1_2</span>
  <div>
    <span>testL2_1</span>
  </div>
  <ul>
    <li>
      <span>testL3_1</span>
    </li>
  </ul>
  <div>
    <div>
      <div>
        <div>
          <span>testL5_1</span>
        </div>
      </div>
    </div>
  </div>
</div>

测试这三个jQuery选择器:

$("#i span");         // much slower
$("#i").find("span"); // FASTEST
$("span", "#i");      // second fastest

http://jsperf.com/jquery-sub-element-selection

我已经在谷歌Chrome和Firefox上运行了它,它似乎.find()是第三种情况紧随其后的第一种情况,而第一种情况则慢得多.