Chaînage jQuery

Avec 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.

jLien de la méthode de requête

Jusqu'à présent, nous avons écrit une instruction jQuery à la fois (une après la 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 chercher 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>

Exécutez et essayez-le

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 :

<!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>

Essayez de l'exécuter

Astuce : jQuery supprimera les espaces supplémentaires et les traitera comme une seule ligne. code pour exécuter la ligne de code ci-dessus.

Formation continue

nouveau fichier

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

soumettre Réinitialiser le code

Opération automatique

Chaînage jQuery

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]