JQuery, une bibliothèque de JavaScript, permet à ses utilisateurs d'écrire moins et de faire plus. Vous pouvez effectuer plusieurs actions en écrivant une seule ligne de code. Un exemple de ceci est la méthode de chaînage qui vous permet de combiner une série de méthodes jQuery et de les appliquer à un élément à la fois. C'est une technique très amusante qui diminue votre travail et fait gagner beaucoup de temps. Ce guide est conçu pour éclairer ses lecteurs sur la façon de chaîner diverses méthodes dans jQuery.

Méthodes de chaînage en jQuery

Comme déjà mentionné, nous pouvons enchaîner diverses méthodes jQuery pour effectuer plusieurs actions sur un élément HTML à la fois. Cela peut être fait en sélectionnant un élément et en écrivant toutes les méthodes requises en une seule ligne séparées par un point.

Le plus grand avantage de l'utilisation de la méthode de chaînage est qu'il empêche le navigateur de retrouver le même élément plus d'une fois. En d'autres termes, il n'est absolument pas nécessaire d'utiliser le même sélecteur encore et encore, ainsi, diminuant les chances de ralentir votre code.

Explorons comment chaîner les méthodes à jQuery avec l'aide d'exemples.

Exemple 1

Dans cet exemple, nous chaînons deux méthodes jQuery qui sont CSS () et Animate ().

Html

Méthodes de chaînage jQuery

Cliquez ici

Dans le code HTML ci-dessus, deux éléments sont créés qui sont

, et . Maintenant, nous allons chaîner CSS () et animer () des méthodes sur le

élément pour voir comment fonctionne les méthodes de chaînage en jQuery.

jquery

$ (document).ready (function ()
$ (".bouton").cliquez sur (fonction ()
$ ("p").CSS ("couleur", "vert").animer (largeur: "100%")
.Animate (FonTSize: "46px").animer (opacité: "0.4 ");
);
);

Dans le code ci-dessus, nous avons appliqué la couleur

élément utilisant la méthode CSS () et définir la largeur, la fontsize et l'opacité sur le même élément en utilisant la méthode Animate ().

Sortir

Lorsque le bouton est cliqué, voici ce qui se passe.

Les méthodes CSS () et Animate () sont enchaînées avec succès.

Comme vous pouvez le voir dans l'exemple ci-dessus, nous avons enchaîné les méthodes jQuery en une seule ligne de code, cependant, le code fonctionnera très bien même si vous souhaitez diviser le code en plusieurs lignes pour améliorer la lisibilité.

jquery

$ ("p").CSS ("couleur", "vert")
.animer (largeur: "100%")
.Animate (FonTSize: "46px")
.animer (opacité: "0.4 ");

Il n'y aura absolument aucun effet sur la sortie.

Exemple 2

L'exemple suivant illustre comment chaîner les méthodes Slize (), Slidedown () et Fadeout ().

Html

Méthodes de chaînage jQuery

Cliquez ici

Dans le code HTML ci-dessus, deux éléments sont créés qui sont

, et . Méthodes de la chaîne Sliseup (), Slidedown () et Fadeout () pour voir l'effet résultant.

jquery

$ (document).ready (function ()
$ (".bouton").cliquez sur (fonction ()
$ ("H1").glissement (1000).Massé (1000).Fadeout (1000);
);
);

Dans le code ci-dessus, chacune des méthodes a reçu une vitesse de 1000 millisecondes.

Sortir

Les méthodes SlizeUp (), Slidedown () et Fadeout () sont enchaînées et fonctionnent correctement.

Méthodes de chaînage sans passer d'arguments

Si vous ne transmettez aucun paramètre à une méthode jQuery, il ne renverra pas un objet jQuery, il renverra simplement simplement le contenu de l'élément spécifié à la place.

Exemple

Dans cet exemple, nous chaînons les méthodes HTML (), addClass () et Hide ().

Html

Un certain titre

Un paragraphe.

Cliquez ici

Trois éléments HTML ont été créés qui sont

,

, et .

jquery

$ (document).ready (function ()
$ ("bouton").cliquez sur (fonction ()
// cela fonctionnera
$ ("H1").html ("un certain titre").addClass ("démo").Fadeout (1000);
// cela ne fonctionnera pas
$ ("p").html ().addClass ("démo");
);
);

Dans le code ci-dessus, nous avons transmis le paramètre à la méthode html () lors de l'application sur

seul. Cependant, aucun paramètre n'a été transmis à la méthode html () dans le cas de

. Par conséquent, les effets du chaînage ne fonctionneront que pour

, Et pas pour

.

Sortir

Aucun effet sur le paragraphe.

Conclusion

Chaîne diverses méthodes jQuery peut être effectuée en sélectionnant un élément et en écrivant toutes les méthodes requises en une seule ligne séparées par un point pour effectuer plusieurs actions sur un élément HTML en même temps. L'avantage de le faire est qu'il empêche le navigateur de retrouver le même élément encore et encore, en outre, diminuer les chances de ralentir votre code. Cet article vous guide sur la façon de chaîner des méthodes à jQuery à l'aide d'exemples appropriés.