Introduction à jQuery

Introduction à jQuery

• jQuery est une bibliothèque JavaScript, créée par John Resig en 2006, conçue pour simplifier le développement JavaScript.
• Elle a pour but de simplifier la navigation dans les documents HTML, la gestion des événements, l'animation et les interactions AJAX.
• Principal avantage : Simplifie diverses tâches en réduisant la quantité de code nécessaire ("write less, do more").

Utilisation de jQuery

• Manipulation du DOM (Document Object Model).
• Gestion des événements de manière élégante.
• Facilite l'utilisation de l'architecture AJAX.
• Possibilité de réaliser divers effets d'animation.

Installation de jQuery

• L'installation consiste à rendre la bibliothèque jQuery disponible pour l'application.
• Télécharger le fichier jQuery à partir du site officiel et le référencer dans les pages Web.
• Il existe une version régulière et une version "slim" (allégée, sans les fonctions AJAX et animations).
• Chaque version est disponible compressée (sans commentaires ni espaces inutiles) ou non compressée.

Utiliser un CDN (Content Delivery Network)

• Une autre option consiste à utiliser une référence distante via un CDN.
• Avantages principaux des CDN :
• Le téléchargement est rapide grâce à l'infrastructure performante du réseau.
• Le fichier jQuery peut déjà être présent dans le cache du navigateur de l'utilisateur si d'autres sites l'utilisent.

Choix de la version de jQuery

• Lors du déploiement, le fichier jQuery est téléchargé automatiquement par l'utilisateur, sauf s'il est déjà en cache.
• La version 3.7.1 offre différentes options :
• Version régulière (développement) : jquery-3.7.1.js (279 ko).
• Version "slim" : jquery-3.7.1.slim.js (227 ko).
• Version compressée (production) : jquery-3.7.1.min.js (86 ko).
• Version "slim" compressée : jquery-3.7.1.slim.min.js (69 ko).
• Pour optimiser le temps de chargement des pages, il est conseillé :
• D'utiliser la version "slim" si les requêtes AJAX et les animations ne sont pas nécessaires.
• D'opter pour la version compressée une fois la phase de développement terminée.
• D'utiliser un CDN sauf raison contraire.

Attendre le chargement de la page

• Un programme JavaScript attend généralement le chargement complet du DOM.
• JavaScript pur

window.addEventListener("DOMContentLoaded", function() { ... 
});

• Avec jQuery :

$(document).ready(function() { ... });

• Ou plus simplement :

$(function() { ... });

Ciblage d'éléments avec jQuery

• Le principe est d'agir sur les éléments d'une page Web en les ciblant.
• Le ciblage utilise la syntaxe des sélecteurs CSS.
• On obtient un objet représentant l'élément, puis on le manipule avec des méthodes.
• Syntaxe générale : $(sélecteur CSS).méthode();
• La fonction $ retourne un objet jQuery, ressemblant à un tableau avec une propriété length et des éléments accessibles par index.

Exemples de sélecteurs jQuery

• Sélectionner tous les liens hypertextes : $("a").
• Obtenir le nombre de liens hypertextes : $("a").length.
• Accéder au premier lien hypertexte : $("a")[0].
• Obtenir le nombre d'éléments ul avec la classe "bleu" : $("ul.bleu").length.
• Accéder au quatrième élément ul avec la classe "bleu" : $("ul.bleu")[3].
• Obtenir le nombre d'éléments li avec l'attribut class="impair" : $('li[class="impair"]').length.
• Sélectionner $("body")[0] est équivalent à document.body.

Principaux sélecteurs CSS

• * : 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".
• elem[attr] : Les éléments "elem" dont l'attribut "attr" est spécifié.
• 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".

Sélecteurs spécifiques à jQuery

• :hidden : Éléments invisibles.
• :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 x.
• :lt(x) : Éléments dont l'indice est plus petit que x.
• :first : Premier élément.
• :last : Dernier élément.
• :even : Éléments dont l'indice est pair.
• :odd : Éléments dont l'indice est impair.

Sélecteurs pour formulaires

• :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 ont l'attention (focus).
• :enabled : Éléments activés.