javascript - jQuery 选择器中的 "context"是什么？

Question

有什么区别吗

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

和

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

?

Answer 1

是有区别的，并不像其他人认为的那样微妙。

编辑:外行的每个示例:

• 给镇上所有的蓝色房子打电话(上下文)，如果 Jane 在，请向她脱帽致敬。
• 调用镇上的所有建筑物(尚无上下文)。如果它是一个蓝色的房子(添加上下文)并且 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);

或

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/其中说:在 #storePreferences 元素中找到所有 input.current_title 元素。这就是棘手的地方! - 这正是它的作用 -

找到所有 input.current_title(任何地方)，然后找到 #storePreferences 元素内的那些。

因此，我们遇到了 jQuerys 的 Sizzle 从右到左选择器 - 因此它最初找到的(可能)比它需要的更多，这可能是性能命中/问题。

因此形式为:

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

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