Что такое "контекст" в селекторе jQuery?

Ответ 1

Есть разница, и это НЕ тонко, как считают другие.

РЕДАКТИРОВАТЬ: Пример 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 (в любом месте), а затем находит INSIDE в элементе #storePreferences.

Таким образом, мы запускаем селектор jQuerys Sizzle справа налево - поэтому он сначала находит MORE (потенциально), чем он нуждается, что может быть связано с производительностью/проблемой.

Таким образом, форма:

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

скорее всего будет лучше, чем версия Descendant.

Ответ 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 позволяет вернуть контекст на #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 );
}

в контексте вашего вопроса, те же элементы будут изменены, поэтому нет никакой разницы в функциональности, но важно помнить о более широких последствиях используемых вами селекторов.