8.1 Connecter jQuery
Enfin, nous sommes arrivés à la bibliothèque jQuery. Au moment où cet article a été écrit, il est déjà obsolète et n'est presque jamais utilisé dans de nouveaux projets . Mais à une époque, c'était très populaire, très bien documenté, et il y a beaucoup d'exemples sur Internet avec son utilisation .
Par conséquent, si vous écrivez un petit projet Web et que vous ne voulez pas passer des mois à apprendre des frameworks modernes, je vous recommande d'utiliser la bibliothèque jQuery.
Pour utiliser les milliers de fonctions jQuery, il vous suffit de l'inclure dans votre page. Vous pouvez le faire comme ceci :
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>Travailler avec jQuery peut être divisé en deux types.
Tout d'abord, vous pouvez obtenir un objet de bibliothèque jQuery, qui est un élément HTML normal enveloppé dans un objet jQuery personnalisé.
Deuxièmement, jQuery a plusieurs objets globaux qui ne sont pas liés aux éléments HTML. Ils doivent également être utilisés.
Commençons par le premier.
8.2 Travailler avec les sélecteurs
jQuery utilise des sélecteurs pour travailler avec des objets (rappelez-vous CSS et ses classes ?). Ainsi, dans jQuery, si vous souhaitez sélectionner un objet ou un groupe d'objets, vous devez définir leur sélecteur.
Exemples:
| Code | Description | Note | |
|---|---|---|---|
| 1 | $("div") | Sélectionne tous les objets avec une balise DIV | de nombreux objets |
| 2 | $("img.#image123") | Sélectionne tous les objets avec la balise IMG et l'ID == image123 | un objet |
| 3 | $("#image123") | Sélectionne tous les objets avec ID == image123 | un objet |
| 4 | $("div. article") | Sélectionne tous les objets avec une balise DIV qui ont un article de classe | de nombreux objets |
Disons que nous voulons ajouter la gestion des événements à tous les liens onclick, voici comment nous pouvons le faire avec jQuery :
$("a").click(function() {
alert("Click");
});Trois étapes sont franchies ici :
- Obtient le ou les objets qui correspondent au sélecteur
"a". - Nous créons une fonction anonyme qui appelle le
alert(). - Nous définissons cette fonction comme gestionnaire d'événements
clickpour tous les objets à partir du point 1.
Une autre bonne chose à propos de jQuery est que son code est facile à lire. Il ne faut pas grand-chose pour comprendre comment tout fonctionne. S'il existe un code fonctionnel, il est assez facile de comprendre ce qu'il fait.
8.3 Travailler avec des éléments de document
Examinons quelques scénarios pour travailler avec un document à l'aide de jQuery.
Obtenir la valeur d'un élément (pour les éléments qui ont des valeurs) :
var result = $ ("selector").value();Définir la valeur de l'élément (pour les éléments qui ont des valeurs) :
$ ("selector").value(newValue);Comment ajouter du HTML à l'intérieur d'un élément ?
$ ("selector").html(newHTML);Et comment récupérer le HTML qui se trouve à l'intérieur de l'élément ?
var html = $ ("selector").html();Que se passe-t-il si je veux obtenir/ajouter non pas du HTML, mais du texte brut ? Pas de surprise ici non plus.
var html = $ ("selector").text();Et si je veux obtenir/modifier la couleur d'un élément ?
$ ("selector").color("red");Si vous avez besoin de travailler avec des styles, c'est aussi facile à faire :
$ ("selector").css("color", "red");Comment ajouter un nouvel élément ?
$ (".container").append($("h3"));