jQuery等价选择器

Question

以下是完全相同的吗？你使用哪种成语？为什么？

$('#form1 .edit-field :input')
$('#form1 .edit-field').find(':input')
$('.edit-field :input', '#form1')
$(':input', '#form1 .edit-field')

Answer 1

我会使用#2或#4:

$('#form1 .edit-field').find(':input')
$(':input', '#form1 .edit-field')

以上两者基本相同.当你指定一个上下文时幕后,这就是正在发生的事情:

jQuery( context ).find( selector );

我避免#1和#3的原因是因为它们都明显慢于#2 /#4.

编辑:刚做了一个快速测试:使用你的选择器的1000个输入元素:

$('#form1 .edit-field :input')            // 55ms
$('#form1 .edit-field').find(':input')    // 21ms
$('.edit-field :input', '#form1')         // 47ms
$(':input', '#form1 .edit-field')         // 18ms