*   >> Lecture Éducation Articles >> tech >> développement web

Comment utiliser le chaînage dans jQuery

Si vous êtes nouveau sur jQuery ainsi que JavaScript en tant que telle, certains concepts pourrait être nouveau pour vous. Une telle chose est l'idée de chaînage.

Vous pouvez penser que d'enchaîner une liste d'actions à exécuter une après l'autre, mais au lieu de les lancer séparément, ils se rapportent à des actions précédentes résultent.

Prenons par exemple ce code:

 Titre Contenu 


Ajoutons un événement à la balise d'en-tête

 $ ('# h2 outerContainer'. ) .

cliquez (function () {

 //effectuer une action 
}); 

Cela signifie que lorsque quelqu'un clique sur l'en-tête de la fonction ci-dessus sera appelé

 $ ('. #outerContainer h2 ') cliquez sur (function (). {
 var parentContainer = $ (this) .parent (); 
}); 

Nous commençons d'en créant un objet jQuery en utilisant cette fonction pour régler notre contexte comme en-tête (h2). Ceci est suivi par la fonction parent jQuery () qui déplace le contexte de l'élément #outerContainer. Une référence à ce qui finit par être affectée à la variable parentContainer.



 $ ('# outerContainer h2'). Cliquez sur (function () {
 $ (this) .parent ( ) .addClass ('cliqué') enfants («p») cacher ();.. 
}); 

Le ci-dessus serait ajouter une classe 'cliqué' à l'#outerContainer et ensuite trouver tous les paragraphes des enfants qui il serait alors cacher. Tout cela dans une chaîne d'actions.


Comme vous pouvez le voir en suivant les couleurs de l'illustration le cadre des actions de la chaîne peut être affectée par certaines actions.

Vous pouvez diviser les actions en deux catégories: ceux qui effectuent des opérations sur un objet (ici: AddClass (), ou masquer ()) et ceux qui se déplacent votre contexte à un autre objet (ici: parent (), ou ses enfants ()) .

Pour expliquer encore plus loin, voici comment la chaîne pourrait être élargi:.

 $ ('# outerContainer h2') cliquez sur (function () {
 $ (this) .parent () addClass ('cliqué');. 
 $ (this) .parent () enfants ('p') hide ();..

}); 

Toutefois, le ci-dessus signifie évidemment une recherche inutile, car nous localisons la #outerContainer deux fois

$ ('# outerContainer h2') cliquez sur (function () {

 var parentContainer = $ (this) de .parent 
 ();.. 
 parentContainer .addClass ('cliqué'); 
 parentContainer.children ('p') de hide ();. 
}); 

Maintenant, cela est beaucoup mieux la performance s

Page   <<       [1] [2] >>
Copyright © 2008 - 2016 Lecture Éducation Articles,https://lecture.nmjjxx.com All rights reserved.