jQuery等价选择器 [英] jQuery equivalent selectors

问题描述

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

Are the following exactly equivalent? Which idiom do you use and why?

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

推荐答案

我会用＃2或＃4：

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

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

Both of the above are essentially the same. Behind the curtain when you specify a context this is what's happening anyway:

jQuery( context ).find( selector );

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

The reason I would avoid #1 and #3 is because they're both significantly slower than #2/#4.

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

Just did a quick test: 1000 input elements using YOUR selectors:

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

这篇关于jQuery等价选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！