jQuery - Chaînage
jQuery - Chaînage
Grâce à jQuery, les actions/méthodes peuvent être liées entre elles.
Le chaînage nous permet d'exécuter plusieurs méthodes jQuery (sur le même élément) dans une seule instruction.
Lien de la méthode jQuery
Jusqu'à présent, nous avons écrit une instruction jQuery à la fois (l'une après l'autre ) .
Cependant, il existe une technique appelée chaînage qui nous permet d'exécuter plusieurs commandes jQuery sur le même élément, les unes après les autres.
Astuce : De cette façon, le navigateur n’a pas besoin de rechercher plusieurs fois le même élément.
Pour lier une action, il vous suffit d'ajouter l'action à l'action précédente.
L'exemple suivant relie css(), slideUp() et slideDown() ensemble. L'élément "p1" deviendra d'abord rouge, puis glissera vers le haut, puis vers le bas :
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function()
{
$("button").click(function(){
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
});
});
</script>
</head>
<body>
<p id="p1">菜鸟教程!!</p>
<button>点我</button>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Nous pouvons également ajouter plusieurs appels de méthode si nécessaire.
Conseil : lors de la liaison, les lignes de code sont gâchées. Cependant, la syntaxe de jQuery n'est pas très stricte ; vous pouvez l'écrire dans le format de votre choix, y compris les sauts de ligne et l'indentation.
Écrire comme suit fonctionne également bien :
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function()
{
$("button").click(function(){
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);
});
});
</script>
</head>
<body>
<p id="p1">菜鸟教程!!</p>
<button>点我</button>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton Bouton "Exécuter l'exemple" pour afficher l'exemple en ligne
jQuery supprimera les espaces supplémentaires et exécutera la ligne de code ci-dessus comme une longue ligne de code.
