为了账号安全,请及时绑定邮箱和手机立即绑定

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

/ 猿问

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

达令说 2019-09-21 15:28:29

之间有什么区别


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


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


查看完整描述

2 回答

?
冉冉说

有区别,这并不像其他人所相信的那样微妙。


编辑:每个人的Layman的示例:


给镇上所有蓝色的房子打电话(上下文),如果简在那儿,给她的帽子给小费。

呼叫城镇中的所有建筑物(尚无上下文)。如果这是一栋蓝色的房子(添加上下文),而简在那儿,请戴上帽子。

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


首先,我们有:上下文选择器 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/,其中说:查找input.current_title元素内的所有#storePreferences元素。这就是棘手的地方!-正是它的作用-


找到所有  input.current_title(任何位置),然后在#storePreferences元素内部找到那些。


因此,我们遇到了jQuerys的Sizzle从右到左选择器-因此它最初发现的数量(可能)超过了所需数量,这可能是性能命中率/问题。


因此形式为:


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

可能比后代版本的性能更好。


查看完整回答
反对 回复 2019-09-21
?
偶然的你

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


是的,但是很微妙

区别在于如何选择元素。


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

等于1:


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

但不等同于:


$('#storePreferences input.current_title');

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


它们之所以不同,是因为using find允许将上下文返回到#storePreferenceswhen end调用。


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 );

}

根据您的问题,将修改相同的元素,因此功能上没有差异,但重要的是要意识到所使用选择器的广泛含义。


查看完整回答
反对 回复 2019-09-21

添加回答

回复

举报

0/150
提交
取消
意见反馈 邀请有奖 帮助中心 APP下载
官方微信