[英]What is “context” in jQuery selector?
Is there any difference between有什么区别吗
$('input.current_title', '#storePreferences').prop('disabled', false);
and和
$('#storePreferences input.current_title').prop('disabled', false);
? ?
There IS a difference, and it is NOT subtle as others believe.有区别,它并不像其他人认为的那样微妙。
EDIT: Layman's example of each:编辑:外行的例子:
Let's break down what it selects.让我们分解一下它选择的内容。
First we have: Context selector http://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_title
elements inside the #storePreferences
element.这是一个后代选择器(“祖先后代”) http://api.jquery.com/descendant-selector/它说:在
input.current_title
元素中找到所有#storePreferences
元素。 THIS IS WHERE IT GETS TRICKY!这就是棘手的地方! - that is EXACTLY what it does -
- 这正是它所做的 -
finds ALL the input.current_title
(anywhere), then finds those INSIDE the #storePreferences
element .找到所有
input.current_title
(任何地方),然后在#storePreferences
元素中找到那些。
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 版本表现更好。
Is there any difference between
$('input.current_title', '#storePreferences').prop('disabled', false);
$('input.current_title', '#storePreferences').prop('disabled', false);
之间有什么区别$('input.current_title', '#storePreferences').prop('disabled', false);
and$('#storePreferences input.current_title').prop('disabled', false);
和
$('#storePreferences input.current_title').prop('disabled', false);
??
The difference is in how the elements are selected.不同之处在于如何选择元素。
$('input.current_title', '#storePreferences');
is equivalent to 1 :相当于1 :
$('#storePreferences').find('input.current_title');
but is not equivalent to:但不等同于:
$('#storePreferences input.current_title');
even though the same elements will be affected.即使相同的元素会受到影响。
The reason they're not the same is that using find
allows for the context to be returned to #storePreferences
when end
is called.他们是不一样的原因是,使用
find
允许范围内返回到#storePreferences
当end
被调用。
// 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.在您的问题的上下文中,将修改相同的元素,因此功能上没有区别,但重要的是要了解您使用的选择器的更广泛含义。
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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.