Question

之间有什么区别吗？

$('input.current_title', '#storePreferences').prop('disabled', false);

和

$('#storePreferences input.current_title').prop('disabled', false);

Answer 1

存在差异，并不像其他人所认为的那样微妙。

编辑： Layman的例子：

打电话给镇上的所有蓝色房屋（上下文），如果Jane在那里，请给她一顶帽子。
打电话给镇上的所有建筑物（尚无背景）。如果它是一个蓝色的房子（添加上下文），简在那里，请放下她的帽子。

让我们分解它所选择的内容。

首先我们有：上下文选择器 http://api.jquery.com/jQuery/#jQuery-selector-context

$('input.current_title', '#storePreferences').prop('disabled', false);

这说：在上下文中使用选择器。 http://api.jquery.com/jQuery/#jQuery-selector-context

虽然这种形式可行，但应该是：

$('input.current_title', $('#storePreferences')).prop('disabled', false);

OR

var myContext = $('#storePreferences');
$('input.current_title', myContext).prop('disabled', false);

这符合满足上下文选择器的要求：“用作上下文的DOM元素，文档或jQuery”。

这说：使用上下文，在选择器内找到。相当于：

$('#storePreferences').find('input.current_title').prop('disabled', false);

内部发生的是什么。找到'#storePreferences'，然后查找所有'input.current_title'匹配元素。

然后我们有：后代选择器

$('#storePreferences input.current_title').prop('disabled', false);

这是一个后代选择器（“祖先后代”）http://api.jquery.com/descendant-selector/，它说：找到input.current_title元素内的所有#storePreferences个元素。这就是它变得棘手的地方！ - 这完全是它的作用 -

找到所有input.current_title（任意位置），然后在#storePreferences元素中找到它们。

因此，我们遇到jQuerys的Sizzle从右到左的选择器 - 所以它最初发现的数量（可能）超过了它可能会遇到的性能问题。

因此形式为：

$('#storePreferences').find('input.current_title').prop('disabled', false);

最有可能比Descendant版本表现更好。

Answer 2

$('input.current_title', '#storePreferences').prop('disabled', false);和$('#storePreferences input.current_title').prop('disabled', false);之间有什么区别吗？

是的，但它很微妙

区别在于如何选择元素。

$('input.current_title', '#storePreferences');

相当于¹：

$('#storePreferences').find('input.current_title');

但等同于：

$('#storePreferences input.current_title');

即使相同的元素会受到影响。

它们不相同的原因是使用find允许在调用end时将上下文返回到#storePreferences。

_{1：jQuery v1.9.1源代码中的第194-202行}

// HANDLE: $(expr, $(...))
} else if ( !context || context.jquery ) {
    return ( context || rootjQuery ).find( selector );

// HANDLE: $(expr, context)
// (which is just equivalent to: $(context).find(expr)
} else {
    return this.constructor( context ).find( selector );
}

在您的问题的上下文中，相同的元素将被修改，因此功能没有区别，但重要的是要了解您使用的选择器的更广泛含义。

Answer 3

在您的示例中，我认为差异不大。

当您开始选择特定DOM元素中的多个元素时，它会更好地使用。

// Get the div in the body with the id of storePreferences
var sp = $('body div#storePreferences');


// jQquery will only look for **input.current_title** **input.name** **input.age** in side **sp** div in the DOM.
// Faster
$('input.current_title', sp).prop('disabled', false);
$('input.name', sp).prop('disabled', false);
$('input.age', sp).prop('disabled', false);




// jQquery will look for **input.current_title** in entire DOM
// Slower
$('#storePreferences input.current_title').prop('disabled', false);

什么是jQuery选择器中的“上下文”？

3 个答案:

是的，但它很微妙