javascript - 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