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

Answer 2

比较元素选择时，前两个是等效的。但是，第二种形式在命令链中使用带有对应end()调用时，可用于在“＃form1 .edit-field”中选择更多子元素，即：

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

我不确定后两种形式，实际上，我相信它们无效。如果我错了，请纠正我，但根据文档，正确的语法将如下所示：

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

无论哪种方式，恕我直言，这些都是不太明确的说法。

总之，一般来说，我会坚持第一种形式，除非你利用第二种形式的优势来穿越更多的孩子，如上所述。

Answer 3

我在jQuery中的代码越多，我使用的选择器就越少，而我遍历的越多。我愿意：

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

它更长，但更好地传达选择过程，每一步都有更多意义。遍历对链接更有利，它使得end（）有用。

Answer 4

我会根据我已有的以及我需要使用的元素使用不同的形式。例如，如果我需要使用相同表单中的其他字段，我将保存对$（'＃form1'）的引用以保存多次搜索。

jQuery等价选择器

4 个答案: