Écrivez votre premier programme jQuery
Écrire un programme
Créez une page html, introduisez la bibliothèque de classes jQuery et écrivez le code suivant :
<!doctype html> <html lang="zh"> <head> <meta charset="utf-8"/> <title>Hello World jQuery!</title> <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script> </head> <body> <div id="divMsg">Hello jQuery!</div> <input id="btnShow" type="button" value="show" /> <input id="btnHide" type="button" value="hidden" /><br/> <input id="btnChange" type="button" value="change content is Hello World, too!"/> <script> $("#btnShow").bind("click", function(event) { $("#divMsg").show(); }); $("#btnHide").bind("click", function(event) { $("#divMsg").hide(); }); $("#btnChange").bind("click", function(event) { $("#divMsg").html("Hello World, too!"); }); </script> </body> </html>
L'effet est le suivant :
Il y a trois boutons sur la page, qui contrôlent respectivement l'affichage, le masquage et la modification du contenu de Hello World.
Cet exemple utilise :
(1) Sélecteur d'ID jQuery : $("#btnShow") (2) Fonction de liaison d'événement : bind() (3) Afficher et masquer les fonctions : show( ) et hide() (4) Fonction pour modifier le html à l'intérieur de l'élément : html()