jQuery - Méthod...LOGIN

jQuery - Méthode de chaînage

Liens vers la méthode jQuery

Jusqu'à présent, nous avons écrit les instructions jQuery une par une (l'une juste 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 :

<!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">php中文网!!</p>
<button>点我</button>
</body>
</html>

Astuce : Lors de la liaison, les lignes de code auront un mauvais aspect. 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 ceci fonctionnera également très bien :

<!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">php中文网!!</p>
<button>点我</button>
</body>
</html>

jQuery supprimera l'espace supplémentaire et exécutera la ligne de code ci-dessus comme une longue ligne de code.

section suivante
<!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","blue").slideUp(3000).slideDown(3000); $("#panel").slideToggle("slow"); }); }); </script> <style type="text/css"> #panel { padding:50px; display:none; } </style> </head> <body> <p id="p1">php中文网!!</p> <div id="panel">Hello world!</div> <button>点我</button> </body> </html>
soumettreRéinitialiser le code
chapitredidacticiel