jQuery - Chaînage


Avec jQuery, vous pouvez enchaîner des actions/méthodes.

Le chaînage nous permet d'exécuter plusieurs méthodes jQuery (sur le même élément) dans une seule instruction.


Enchaînement de méthodes jQuery

Jusqu'à présent, nous écrivions les instructions jQuery une par une (l'une après l'autre).

Cependant, il existe une technique appelée chaînage, qui nous permet d'exécuter plusieurs commandes jQuery, l'une après l'autre, sur le ou les mêmes éléments.

Astuce : De cette façon, les navigateurs n'ont pas à trouver plusieurs fois le(s) même(s) élément(s).

Pour enchaîner une action, il vous suffit d'ajouter l'action à l'action précédente.

L'exemple suivant enchaîne les méthodes css(), slideUp()et . slideDown()L'élément "p1" passe d'abord au rouge, puis il glisse vers le haut, puis il glisse vers le bas :

Exemple

$("#p1").css("color", "red").slideUp(2000).slideDown(2000);

Nous aurions également pu ajouter plus d'appels de méthode si nécessaire.

Astuce : Lors d'un chaînage, la ligne de code peut devenir assez longue. Cependant, jQuery n'est pas très strict sur la syntaxe ; vous pouvez le formater comme vous le souhaitez, y compris les sauts de ligne et les indentations.

Cela fonctionne aussi très bien:

Exemple

$("#p1").css("color", "red")
  .slideUp(2000)
  .slideDown(2000);

jQuery supprime les espaces blancs supplémentaires et exécute les lignes ci-dessus comme une longue ligne de code.