Châîne (Chaining) jQuery

jQuery fournit une autre fonction puissante appelée chaînage de méthodes.

La liaison nous permet d'exécuter plusieurs méthodes jQuery sur le même élément dans une seule instruction.

Chaînage des méthodes jQuery

Jusqu'à présent, nous écrivons une seule instruction jQuery à la fois (une après l'autre).

Mais il existe une technique appelée liaison, qui permet d'exécuter plusieurs commandes jQuery sur le même élément dans une seule instruction.

De cette manière, le navigateur n'a pas besoin de rechercher plusieurs fois le même élément.

C'est possible car la plupart des méthodes jQuery retournent un objet jQuery, qui peut être utilisé pour appeler une autre méthode.

Les exemples suivants sont liés ensemblecss()，hide()etshow()Méthode :

$("button").click(function() {
　　$("p").css("background-color", "coral").hide(2000).show(2000);
});

Nous pouvons également diviser une ligne de code en plusieurs lignes pour améliorer la lisibilité.

Par exemple, la séquence de méthodes de l'exemple ci-dessus peut également être écrite ainsi :

$("button").click(function() {
　　$("p")
　　　　.css("background-color", "coral")
　　　　.hide(2000)
　　　　.show(2000);
});

Nous pouvons relier un nombre illimité de méthodes en une seule instruction :

$("button").click(function() {
　　$("div")
　　　　.animate({width:"500px"})
　　　　.animate({height:"200px"})
　　　　.animate({fontSize: "10em"})
　　　　.animate({opacity: 0.3});
});

Attention :Certains méthodes jQuery ne retournent pas un objet jQuery, mais d'autres retournent uniquement ce qu'ils reçoivent en paramètre. Considérez l'exemple suivant :

//　Utilisation correcte
$("p").css("background-color", "coral").hide(2000).show(2000);
//　Utilisation incorrecte
$("p").css("background-color", "coral").hide().show();