É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()
![Combat réel Front-end Vue3 [projet vue manuscrit]](https://img.php.cn/upload/course/000/000/068/639b12e98e0b5441.png)
![Tutoriel APIPOST [Vulgarisation des concepts techniques liés à la communication réseau]](https://img.php.cn/upload/course/000/000/068/63996f34c6c94370.png)
