jQuery Introduction and Usage

Cette présentation introduit la bibliothèque JavaScript jQuery, utilisée pour faciliter la manipulation du DOM, la gestion des événements et les requêtes AJAX dans le développement web. Elle s'inscrit dans un cours sur les technologies web et vise à familiariser les étudiants avec les fonctionnalités essentielles de jQuery, son installation, ses sélecteurs, ainsi que ses méthodes d'interaction avec les éléments HTML.

Présentation générale de jQuery

jQuery est une bibliothèque JavaScript libre qui simplifie la traversée et la manipulation de l'arbre DOM des pages web. Elle permet, par exemple, de changer ou d'ajouter une classe CSS, de créer des animations, de modifier des attributs, et de gérer les événements JavaScript. De plus, jQuery facilite la réalisation de requêtes AJAX.

Créée par John Resig en 2006, la version présentée ici est la 1.11.3. jQuery est appréciée pour sa facilité d'apprentissage, utilisant la syntaxe des sélecteurs CSS, sa petite taille, sa documentation complète et son support multi-navigateurs, ce qui en fait une bibliothèque très utilisée dans le développement web.

Installation et démarrage avec jQuery

jQuery est simplement un fichier JavaScript que l'on peut télécharger sur le site officiel (http://jquery.com) ou inclure directement en ligne via un CDN. L'intégration dans une page web se fait en ajoutant une balise <script> pointant vers le fichier jQuery :

<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

Pour garantir que jQuery fonctionne correctement, il faut attendre que le DOM soit entièrement chargé avant d'exécuter le code. Cela se fait avec la fonction ready() :

$(document).ready(function(){
	// Votre code jQuery ici
});

Principes de base : sélection et manipulation d'éléments

Le principe fondamental de jQuery est de sélectionner des éléments HTML et d'effectuer des actions sur eux. L'objet jQuery est représenté par le symbole $. Par exemple :

$("div").addClass("special");

Cette instruction sélectionne tous les éléments <div> du document et leur ajoute la classe CSS special. La sélection utilise la syntaxe des sélecteurs CSS, ce qui rend la manipulation intuitive :

• Sélecteurs d'éléments : $("p"), $("a"), $("div")
• Sélecteurs d'identifiants : $("#test")
• Sélecteurs de classes : $(".test")
• Sélecteurs spécifiques : :first, :last, :has(), :visible, :hidden, etc.

Par exemple, pour appliquer une bordure rouge de 3 pixels à tous les <div> :

$("div").css("border", "3px solid red");

Parcourir le DOM avec jQuery

Lorsque les sélecteurs CSS ne suffisent pas, jQuery offre des méthodes pour parcourir l'arborescence du DOM, telles que :

• parent() : sélectionne l'élément parent
• next() : sélectionne l'élément frère suivant
• prev() : sélectionne l'élément frère précédent
• children() : sélectionne les enfants directs

Par exemple, pour appliquer une bordure rouge à l'élément parent d'un <h2> :

$("h2").parent().css("border", "3px solid red");

Chaining (enchaînement) des méthodes

jQuery permet d'enchaîner plusieurs actions sur un même ensemble d'éléments, ce qui rend le code plus compact et lisible. Par exemple :

$("div").hide().css("color", "blue").remove();

Dans cet exemple, tous les <div> sont d'abord cachés, leur couleur de texte est modifiée en bleu, puis ils sont supprimés du DOM.

Un autre exemple montre comment, à partir d'un élément avec la classe para, on applique une bordure rouge à son parent et une bordure verte à ses frères :

$(".para")
	.parent().css("border", "3px solid red")
	.siblings().css("border", "3px solid green");

Actions possibles sur les éléments sélectionnés

Après avoir sélectionné des éléments, plusieurs types d'actions peuvent être appliquées :

• Manipulation des attributs : addClass, attr, etc.
• Modification des styles CSS : css
• Manipulation du DOM : append, prepend, remove, clone, etc.

Par exemple, pour insérer une image après tous les liens ouvrant dans une nouvelle fenêtre :

$("a[target=_blank]").after("<img src='open.png'/>");

Pour ajouter un texte après ces liens :

$("a[target=_blank]").append(" (S’ouvre dans autre fenêtre)");

Pour modifier leur style CSS :

$("a[target=_blank]").css({
	color : "red",
	fontWeight : "bold"
});

Création et insertion d'éléments HTML

jQuery permet aussi de créer de nouveaux éléments HTML et de les insérer dans le DOM. Par exemple :

$("<li><a></a></li>")
	.find("a")
		.attr("href", "http://www.google.fr")
		.html("Google")
	.end()
	.appendTo("ul");

Ce code crée un élément <li> contenant un lien <a> vers Google, puis l'ajoute à une liste non ordonnée (<ul>).

Gestion des événements

jQuery simplifie la gestion des événements utilisateur. Par exemple :

• Événement click :

$("a.menu").click(function(e) {
	$(this).next().toggle();
	return false;
});

Ce code fait en sorte que lorsqu'on clique sur un lien avec la classe menu, l'élément suivant dans le DOM est affiché ou caché (toggle). Le return false empêche le comportement par défaut du lien.

• Événement submit sur un formulaire :

$("form").submit(function(e) {
	if ($('#name').val() === "") {
		$('span.help').show();
		return false;
	}
});

Ici, lors de la soumission d'un formulaire, si le champ avec l'id name est vide, un message d'aide est affiché et la soumission est annulée.

• Événement hover :

$("li").hover(function(e) {
	$(this).animate({marginLeft:38, marginRight:0});
}, function() {
	$(this).animate({marginLeft:18, marginRight:18});
});

Ce code anime les marges d'un élément <li> lorsqu'on passe la souris dessus et revient à l'état initial lorsque la souris s'en va.

Effets visuels avec jQuery

jQuery propose plusieurs méthodes pour créer des effets visuels :

• slideToggle : fait apparaître ou disparaître un élément avec un effet de glissement.

$("a.menu").click(function(e) {
	$(this).next().slideToggle("slow");
	return false;
});

Ce code affiche ou cache lentement l'élément suivant lorsqu'on clique sur un lien avec la classe menu.

• animate : anime plusieurs propriétés CSS simultanément.

$("div.block").animate({
	fontSize: "2em",
	width: "+=20%",
	backgroundColor: "green"
});

Ce code agrandit la taille de la police, augmente la largeur de 20% et change la couleur de fond en vert pour tous les éléments div.block.

• hide et show : cachent ou affichent un élément avec une animation.

$("div.block").hide("slow", function(){
	$(this).show("slow");
});

Dans cet exemple, chaque élément div.block est caché lentement, puis réaffiché lentement une fois l'animation terminée.

Points clés

• jQuery est une bibliothèque JavaScript libre facilitant la manipulation du DOM, la gestion des événements et les requêtes AJAX.
• Elle utilise la syntaxe des sélecteurs CSS pour sélectionner facilement les éléments HTML.
• La fonction ready() garantit que le DOM est chargé avant d'exécuter du code jQuery.
• Les méthodes jQuery peuvent être enchaînées pour appliquer plusieurs actions successivement.
• jQuery propose des fonctions pour parcourir l'arborescence DOM au-delà des sélecteurs CSS classiques.
• Il est possible de manipuler les attributs, les styles CSS et le contenu HTML des éléments sélectionnés.
• La création dynamique d'éléments HTML et leur insertion dans le DOM sont facilitées.
• La gestion des événements utilisateur est simplifiée avec des méthodes comme click, submit et hover.
• jQuery offre des effets visuels intégrés tels que slideToggle, animate, hide et show.