Introduction to jQuery: A JavaScript Library Guide PDF

La bibliothèque jQuery Le logo officiel de jQuery jQuery est une bibliothèque JavaScript créée par John Resig en 2006 dans le but de faciliter la vie des développeurs JavaScript. jQuery simplifie la navigation dans les documents HTML, la gestion des événements, l'animation et les interactions AJA...

La bibliothèque jQuery Le logo officiel de jQuery jQuery est une bibliothèque JavaScript créée par John Resig en 2006 dans le but de faciliter la vie des développeurs JavaScript. jQuery simplifie la navigation dans les documents HTML, la gestion des événements, l'animation et les interactions AJAX (que nous aborderons bientôt) pour un développement Web rapide. C'est une boîte à outils JavaScript conçue pour simplifier diverses tâches en rédigeant moins de code (write less, do more). Liens utiles Site officiel jQuery Documentation Téléchargement Que peut-on faire avec jQuery? Manipuler le DOM. Gérer les événements. jQuery offre un moyen élégant de capturer une grande variété d’événements. Utiliser plus facilement l'architecture AJAX (ce sujet sera abordé dans un prochain tutoriel)). Réaliser des animations. jQuery est fourni avec de nombreux effets d'animation. Et bien d'autres choses... Un petit exemple Dans l'exemple suivant, on veut ajouter la classe urgent à tous les éléments li du document. Voyons d'abord la version JavaScript : // version JavaScript let elementsLi = document.querySelectorAll("li"); for (let li of elementsLi) { li.classList.add("urgent"); } Et maintenant la version jQuery : // version jQuery $("li").addClass("urgent"); Pas mal plus simple non? Et pour enlever une classe, c'est removeClass()! Installation de jQuery Il n'y a pas vraiment d'installation à faire. Tout ce qu'il faut, c'est de rendre disponible la bibliothèque jQyery à notre application. 1- Télécharger le fichier à partir du site de jQuery Toute la bibliothèque jQuery est contenue dans un seul fichier. La première façon consiste donc à télécharger ce fichier dans un répertoire de notre application et à y faire référence dans nos pages Web. On y fait référence de la manière suivante :... Plusieurs versions de ce fichier sont disponibles. D'abord une version régulière et une version allégée ou "slim". Cette dernière ne contient pas les fonctions relatives à AJAX et aux animations. On trouve ensuite, autant pour la version régulière que pour la version allégée, une version compressée et une version non compressée. La version dite "compressée" n'est pas en format "tar", "zip" ou autre, mais a simplement été purgée des commentaires et des caractères non essentiels (espaces, fin de ligne, etc.). Cliquez sur les liens pour voir la différence : version régulière | version compressée 2- Utiliser un CDN La deuxième façon de lier jQuery à notre application consiste à insérer non pas une référence locale, mais une référence distante à ce fichier à partir d’un réseau de diffusion de contenu ou RDC (pour Réseau de diffusion de contenu ou CDN pour Content Delivery Network). Exemple :... Vous trouverez sur le site officiel de jQuery le code à inclure pour les différentes versions. L'utilisation d'un RDC a deux principaux avantages : d'abord, ces réseaux de diffusion disposent d'une infrastructure très performante qui rendent très rapide le téléchargement du fichier (plus rapide qu'à partir de votre hébergeur); ensuite, puisque de très nombreux sites Web utilisent jQuery, il y a bien des chances que le fichier soit déjà dans le cache du navigateur du client. Quelle version de jQuery choisir? Lorsque votre application sera en ligne, le fichier contenant jQuery sera téléchargé automatiquement par l'utilisateur à chaque visite, à moins bien sûr qu'il ne soit déjà présent en cache. Le tableau suivant présente la taille des différents fichiers disponibles pour la version 3.7.1 (23 avril 2024) de la bibliothèque : Version régulière Version compressée (développement) (production) Version jquery-3.7.1js jquery-3.7.1.min.js régulière 279 ko 86 ko jquery-3.7.1.slim.js jquery-3.71.slim.min.js Version "slim" 227 ko 69 ko L'un des principaux objectifs d'un développeur Web est de minimiser le temps de chargement des pages de sont site. Si vous ne faites pas de requêtes AJAX et n'avez pas recours aux animations, préférez la version "slim" à la version régulière. Quoique la différence ne soit pas très importante. Si vous avez passé l'étape du développement et êtes prêt à déployer, préférez la version compressée à la version non compressée. Et à moins d'avoir une bonne raison, utilisez un RDC. Voyons maintenant un peu de code... Attendre le chargement de la page Un programme JavaScript commence habituellement par l'attente du chargement complet du DOM. C'est la fameuse ligne : window.addEventListener("DOMContentLoaded", function() {... Si on utilise jQuery, on peut la remplacer par : $(document).ready(function() {... ou encore tout simplement par : $(function() {... Simple n'est-ce pas? Tous nos scripts qui utilisent jQuery auront donc l'allure suivante : $(function() { // attend le chargement de la page // mon code } Le principe Pour agir sur les éléments d'une page Web, on réalisera ce qu'on appelle couramment un ciblage d'élément. On agira ensuite sur cet élément grâce à des méthodes. On peut accéder à un élément en utilisant la syntaxe des sélecteurs CSS que vous connaissez bien. On obtient d'abord un objet représentant cet élément et on peut ensuite le manipuler aisément. La syntaxe générale est la suivante : $(sélecteur CSS).méthode(); Mais quelle est la nature de l’objet retourné par jQuery? Le résultat retourné par la fonction $() est un objet jQuery. Cet objet ressemble à un tableau avec une propriété length et des éléments auxquels on peut accéder à l'aide d'un indice. Quelques exemples : $("a") retourne un objet jQuery (genre de tableau) contenant tous les liens hypertextes du document. $("a").length retourne le nombre de liens hypertextes contenus dans le document. $("a") retourne le premier lien hypertexte du document. $("ul.bleu").length retourne le nombre d'éléments ul de classe "bleu". $("ul.bleu") retourne le quatrième élément ul de classe "bleu". $('li[class="impair"]').length retourne le nombre d'éléments li qui ont un attribut class de valeur "impair". $("body") est l'équivalent de document.body. Attention! Les deux expressions suivantes ne sont pas équivalentes : $("p:eq(2)") $("p") Bien que les deux représentent le deuxième paragraphe du document, la première expression désigne un objet jQuery tandis que la seconde est un simple élément HTML. // la fonction $ retourne un objet jQuery à partir duquel on peut appeler une méthode jQuery $("p").css("color", "blue"); // met tous les paragraphes en bleu $("p:eq(2)").css("color", "red"); // met le 3e paragraphe en rouge // ici l'expression $('p') désigne un élément HTML $('p').css("color", "red"); // erreur (appel d'une méthode jQuery à partir d'un élément HTML) $('p').style.color = "red"; // met le 3e paragraphe en rouge Le tableau suivant est un rappel des principaux sélecteurs CSS : Sélecteur Élément(s) retourné(s) * Tous les éléments elem Tous les éléments "elem" #id L'élément ayant l'id "id".class Les éléments ayant la classe "class" Les éléments "elem" dont l'attribut "attr" est spécifié (peu importe sa elem[attr] valeur) elem[attr="val"] Les éléments "elem" dont l'attribut "attr" a pour valeur "val" elem elem2 Éléments "elem2" contenus dans un élément "elem" elem > elem2 Éléments "elem2" descendants directs d'un élément "elem" elem + elem2 Éléments "elem2" précédés immédiatement d'un élément "elem" elem ~ elem2 Éléments "elem2" précédés d'un élément "elem" En JavaScript pur, on utilise querySelector() pour récupérer l'unique élément décrit par le sélecteur (ou le premier s'il y en a plusieurs) et querySelectorAll() pour les récupérer tous. Avec jQuery, on récupère toujours l'ensemble des éléments décrits par le sélecteur. // en JavaScript pur document.querySelector("div"); // récupère le premier élément "div" document.querySelectorAll("div"); // récupère tous les éléments "div" // avec jQuery $("div"); // récupère tous les éléments "div" Ici on affiche le texte du premier paragraphe du document : // en JavaScript pur alert( document.querySelector("p").textContent ); alert( document.querySelectorAll("p").textContent ); // avec jQuery alert($("p")); Exemple de sélection d'un élément par son "id" : // en JavaScript pur document.querySelector("#paragraphe"); // avec jQuery $("#paragraphe"); Exemple de sélection du deuxième élément d'une classe : // en JavaScript pur document.querySelectorAll(".paragraphe"); // avec jQuery $(".paragraphe"); Exemple de sélection de toutes les rangées paires d’un tableau au id "table" : // en JavaScript pur document.querySelectorAll("#table tr:nth-child(even)"); // avec jQuery $("#table tr:even"); Sélecteurs spécifiques à jQuery Le tableau suivant présente des sélecteurs spécifiques à jQuery : Sélecteur Élément(s) retourné(s) :hidden Éléments invisibles, cachés :visible Éléments visibles :parent Éléments ayant des enfants :header Éléments h1 à h6 (titres) :not(s) Éléments qui ne sont pas sélectionnés par le sélecteur "s" :has(s) Éléments qui contiennent des éléments sélectionnés par le sélecteur "s" :contains(t) Éléments qui contiennent le texte "t" :empty Éléments dont le contenu est vide :eq(x) et :nth(x) x-ième élément en partant de zéro :gt(x) Éléments dont l'indice est plus grand que (greater than) x :lt(x) Éléments dont l'indice est plus petit que (less than) x :first Premier élément (même chose que eq(0)) :last Dernier élément :even Éléments dont l'indice est pair :odd Éléments dont l'indice est impair Maintenant ceux réservés aux formulaires : Sélecteur Élément(s) retourné(s) :input Tous les éléments de type input, textarea, select et button :button Éléments de type button :checkbox Éléments de type checkbox :checked Éléments qui sont cochés :radio Éléments de type radio :reset Éléments de type reset :image Tous les boutons de type image :submit Éléments de type submit :text Éléments de type text :password Éléments de type password :selected Éléments sélectionnés :focus Éléments qui a l'attention (focus) :enabled Éléments activés