Qu'est-ce que le «contexte» dans le sélecteur jQuery?

Il y a une différence, et ce n'est pas subtile comme d'autres le croient.

EDIT: l'exemple de Layman de chacun:

• Appelez toutes les maisons bleues en ville (contexte), si Jane est là, rabattez son chapeau.
• Appelez tous les bâtiments en ville (pas encore de contexte). Si c'est une maison bleue (ajoutez un contexte) et Jane est là, rabaissez son chapeau.

Abandons ce qu'il sélectionne.

Tout d'abord, nous avons: Sélecteur de contexte http://api.jquery.com/jQuery/#jQuery-selector-context

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

Cela dit: utilisez un sélecteur dans son contexte. http://api.jquery.com/jQuery/#jQuery-selector-context

Alors que cette forme pourrait fonctionner, elle devrait vraiment être:

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

OU

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

Cela répond à l'exigence qu'un sélecteur de contexte soit respecté: "Un Élément DOM, Document ou jQuery à utiliser comme contexte".

Cela dit: en utilisant le contexte, trouvez à l'intérieur que le sélecteur. Un équivalent serait:

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

C'est ce qui se passe en interne. Trouvez '#storePreferences' et recherchez tous les éléments correspondants 'input.current_title' .

Ensuite, nous avons: Sélecteur descendant

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

Il s'agit d'un sélecteur descendant ("ancêtre descendant") http://api.jquery.com/descendant-selector/ qui dit: trouvez tous les éléments input.current_title dans l'élément #storePreferences . C'EST LÀ QUE ÇA DEVIENT DÉLICAT! – C'est EXACTEMENT ce qu'il fait –

input.current_title TOUT le input.current_title (n'importe où), puis trouve ceux INSIDE l'élément #storePreferences .

Ainsi, nous nous trouvons dans le sélecteur droit-gauche de jQuerys 'Sizzle – alors il trouve initialement PLUS (potentiellement) qu'il n'en a besoin qui pourrait être un succès / un problème de performance.

Ainsi, la forme de:

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

Serait plus performant que la version descendante.

Existe-t-il une différence entre $('input.current_title', '#storePreferences').prop('disabled', false); Et $('#storePreferences input.current_title').prop('disabled', false); ?

Oui, mais c'est subtil

La différence est dans la façon dont les éléments sont sélectionnés.

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

Équivaut à ¹ :

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

Mais ne correspond pas à:

 $('#storePreferences input.current_title'); 

Même si les mêmes éléments seront affectés.

La raison pour laquelle ils ne sont pas identiques est que l'utilisation de la find permet de find le contexte dans #storePreferences lorsque la end est appelée.

_{1: lignes 194-202 dans la source jQuery v1.9.1}

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

Dans le contexte de votre question, les mêmes éléments seront modifiés, donc il n'y a pas de différence dans la fonctionnalité, mais il est important de prendre conscience des implications plus larges des sélecteurs que vous utilisez.