Introduction au principe du sélecteur jquery (comment utiliser $())

Introduction au principe du sélecteur jquery (comment utiliser $())_jquery

WBOY

Libérer： 2016-05-16 16:54:39

original

1198 Les gens l'ont consulté

Chaque fois qu'un objet jQuery est déclaré, l'objet jQuery.prototype.init est renvoyé. Beaucoup de gens ne comprennent pas que init est évidemment une méthode de jQuery.fn. En fait, ce n'est pas une méthode, mais la structure de. init. Fonction, car l'objet prototype de js peut réaliser l'héritage, et l'objet de js n'est qu'une référence et non une copie. Les sous-objets de new jQuery, new jQuery.fn et new jQuery.fn.init sont les mêmes. , mais ils n'ont pas été exécutés pour une initialisation différente.

Lorsque nous utilisons le sélecteur $(selector,content), init(selectot,content) sera exécuté Voyons comment il est exécuté dans inti :

Copier le code Le code est le suivant :

if ( typeof selector == "string" ) 
{
 //Correspondance régulière, voyez s'il s'agit de code HTML ou #id
 var match = quickExpr.exec(selector);
 //Il n'y a pas d'ensemble d'éléments DOM, de document ou de jQuery objet à trouver. 
 //le sélecteur est sous la forme de #id 
 if ( match && (match[1] || !context) ) 
 {
 // HANDLE: $(html) -> (array )
 //Code HTML, appelez clean pour compléter le code HTML
 if ( match[1] ){
 selector = jQuery.clean( [ match[1] ], context );
 }
 // Oui : $("#id")
 else {
 //Détermine si le Dom de l'id est chargé 
 var elem = document.getElementById( match[3] ); 
 if ( elem ){
 if ( elem.id != match[3] )
 return jQuery().find( selector );
 return jQuery( elem );//Exécution terminée return 
 }
 selector = [];
 }
 //Formulaire sans identifiant. 
 } 
 else{
 return jQuery( context ). find( selector );
 }
}

Cela signifie que seul le sélecteur écrit comme $('#id') est le plus rapide, ce qui équivaut à exécuter getElementById une fois, et le programme suivant ne nécessite plus d'exécution. Bien sûr, le sélecteur dont nous avons besoin n'est souvent pas si simple. Par exemple, nous avons besoin que le CSS sous id soit className. Il existe des méthodes d'écriture telles que $('#id.className') et $('#id'). find('.className' );Les résultats d'exécution des deux méthodes d'écriture sont les mêmes, par exemple,

reviendra certainement C'est , mais l'efficacité d'exécution est complètement différente.

Après avoir analysé le code ci-dessus, s'il ne s'agit pas d'un simple sélecteur comme $('#id'), la fonction find sera exécutée. Voyons ensuite ce que fait find :

Copier le code Le code est le suivant :

trouver : fonction (sélecteur) {
 // Rechercher 
 dans l'objet actuel var elems = jQuery.map(this, function(elem){
 return jQuery.find( selector, elem );
 });
 //Le code ci-dessous Il peut être ignoré, faites juste quelques traitements
 //Le test de méthode statique de l'objet régulier js est appliqué ici
 //indexOf("..") doit comprendre la syntaxe de xpath, qui consiste à déterminer si le sélecteur contient le nœud parent Écriture 
 //L'intention initiale est de filtrer les éléments répétés du tableau 
 return this.pushStack( /[^ >] [^ >]/.test( sélecteur ) || selector.indexOf("..") > ; -1 ?
 jQuery.unique( elems ) :
 elems );
}

Si vous écrivez $ ('#id .className') comme ceci, il exécutera Extended find('#id .className',document), car le courant this est le tableau jQuery du document, nous examinerons ensuite l'implémentation de l'extension find.Il existe de nombreux codes, nous ne les listerons donc pas.En bref, nous commencerons par le deuxième. Commencez à rechercher le premier nœud enfant du DOM après avoir passé les paramètres, rencontrez # et comparez l'ID, rencontrez et comparez. ClassName, et : < - et autres traitements. Alors si nous voulons optimiser, devons-nous trouver un moyen de minimiser la portée du contexte du deuxième paramètre, afin qu'il y ait très peu de traversées ?

Si nous écrivons $('#id').find('.className') comme ceci, alors le programme ne sera exécuté comme ça que lorsqu'il sera init pour la première fois, il exécutera getElementById, puis il. reviendra, puis exécutera find('. className',divDocument), divDocument est la balise div que nous sélectionnons pour la première fois S'il y a beaucoup d'objets DOM sous le document, sera-t-il beaucoup moins long de parcourir uniquement le document. divDocument cette fois, et la vitesse de sélection de l'identifiant pour la première fois est également beaucoup plus rapide que la traversée.

Tout le monde devrait comprendre maintenant. C'est-à-dire que la sélection de premier niveau est de préférence un ID, mais un simple sélecteur dont le but est de définir la plage et d'améliorer la vitesse.