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

What is "context" in jQuery selector?

提问by Dims

Is there any difference between

有什么区别吗

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

and

和

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

?

?

回答by Mark Schultheiss

There IS a difference, and it is NOT subtle as others believe.

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

EDIT:Layman's example of each:

编辑：外行的例子：

• Call all the blue houses in town (context), if Jane is there, tip off her hat.
• Call all the buildings in town (no context yet). IF it is a blue house (add context) and Jane is there, tip off her hat.

• 打电话给镇上所有的蓝房子（上下文），如果简在那里，请给她小费。
• 呼叫镇上的所有建筑物（尚无上下文）。如果它是一个蓝色的房子（添加上下文）并且简在那里，请揭开她的帽子。

Let's break down what it selects.

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

First we have: Context selectorhttp://api.jquery.com/jQuery/#jQuery-selector-context

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

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

This says:use a selector in context. http://api.jquery.com/jQuery/#jQuery-selector-context

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

While this form MIGHT work, it should really be:

虽然这种形式可能有效，但它真的应该是：

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

OR

或者

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

This meets the requirement for a context selector being met: "A DOM Element, Document, or jQuery to use as context".

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

This says:using the context, find inside that the selector. An equivalent would be:

这说：使用上下文，在里面找到选择器。一个等价的将是：

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

Which is what happens internally. Find '#storePreferences'and in that find all the 'input.current_title'matching elements.

这就是内部发生的事情。查找'#storePreferences'并在其中找到所有'input.current_title'匹配的元素。

---

---

Then we have: Descendant Selector

然后我们有：后代选择器

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

This is a Descendant Selector (“ancestor descendant”) http://api.jquery.com/descendant-selector/which says: find all the input.current_titleelements inside the #storePreferenceselement. THIS IS WHERE IT GETS TRICKY! - that is EXACTLY what it does -

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

finds ALL the input.current_title(anywhere), then finds those INSIDE the #storePreferenceselement.

找到 ALL input.current_title(anywhere)，然后找到那些 INSIDE the #storePreferenceselement。

Thus, we run into jQuerys' Sizzle right to left selector - so it initially finds MORE(potentially) than it needs which could be a performance hit/issue.

因此，我们遇到了 jQuery 的 Sizzle 从右到左选择器 - 所以它最初发现（可能）比它需要的更多，这可能是性能问题/问题。

Thus the form of:

因此形式为：

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

would perform better than the Descendant version most likely.

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

回答by zzzzBov

Is there any difference between $('input.current_title', '#storePreferences').prop('disabled', false);and $('#storePreferences input.current_title').prop('disabled', false);?

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

Yes, but it's subtle

是的，但它很微妙

The difference is in how the elements are selected.

不同之处在于如何选择元素。

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

is equivalent to¹:

相当于¹：

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

but is notequivalent to:

但不等同于：

$('#storePreferences input.current_title');

even though the same elements will be affected.

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

The reason they're not the same is that using findallows for the context to be returned to #storePreferenceswhen endis called.

它们不同的原因是 usingfind允许#storePreferences在end调用时返回上下文。

_{1: lines 194-202 in the jQuery v1.9.1 source1：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 );
}

---

---

in the context of your question, the same elements will be modified, so there is no difference in functionality, but it's important to be aware of the broader implications of the selectors you use.

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

回答by Hello-World

In your example I believe that there is little difference.

在您的示例中，我认为几乎没有区别。

It comes into better use when you start selecting multiple elements in a specific DOM element.

当您开始选择特定 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);