jQuery, une bibliothèque JavaScript simple et efficace

fade in/out

  Développeurs JavaScript, ceci est pour vous, réticents au développement JavaScript, ceci est pour vous aussi !

jQuery est une bibliothèque JavaScript permettant de se simplifier la vie à moindre coût pour tout ce qui est manipulation d'une page HTML.

Vous n'aimez pas écrire des tartines de code pour faire tout le temps la même chose, gérer les implémentations du dit code sur chacun des navigateurs du marché, copier/coller ces tartines d'un site Web à l'autre, les bibliothèques de code sont vos amies. Mais ce n'est pas le tout d'avoir une bibliothèque qui nous mâche le travail, encore faut-il qu'elle soit bien faite, bien documentée, légère, pratique, efficace en somme, c'est là qu'intervient jQuery.

N.B. Une bibliothèque est tout un ensemble cohérent de fonctions permettant de s'affranchir des tâches rébarbatives et répétitives. Il s'agit ici d'un simple fichier JavaScript à inclure (grâce à la balise <script>) dans votre code HTML avant d'utiliser l'un des éléments de cette bibliothèque (cf l'exemple plus bas).

Il existe d'autres bibliothèques bien sûr, mais au moment de choisir, j'ai regardé sur Internet ce qui existait (on pense bien sûr aussitôt à http://www.prototypejs.org/), et il découle que la tendance est à jQuery ces derniers temps.

Je n'ai pas personnelement testé les différentes bibliothèques existantes, je me suis fié aux différentes sources préconisant jQuery et force est de constater que j'ai eu raison !

Ce que j'ai particulierement apprécié :

la possibilité d'utiliser les sélecteurs CSS 2.1 (et même CSS 3) pour accéder aux éléments du document HTML à traiter (il est possible d'utiliser Xpath aussi) ;
la simplicité enfantine d'utilisation et d'apprentissage ;
la concision du code résultant (une dizaine de ligne pour un effet type fade in/out) ;
la légèreté de la bibliothèque en elle même (une vingtaine de kilo-octet compressée (à utiliser en production), une cinquantaine de kilo-octets non compressée) ;
l'extrême simplicité d'utilisation d'effets (fade in/out, drag'n'drop, ...) ;
la documentation simple et bien faite (API présente sur gotApi pour ceux qui connaissent (attention, version 1.0.3, il y a eu pas mal de changement avec l'arrivée de la version 1.1.x, mais l'API sur gotApi devrait être mise à jour d'ici peu.)) ;
les nombreux tutoriels existant ;
la possibilité d'intégrer du code JavaScript "classique" en toute transparence.

J'en oublie certainement et je commence seulement à l'utiliser !

Un petit exemple de code pour réaliser un "changement de contenu" avec effet fade in/out

Code JavaScript

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
	// des variables pour stocker l'élément
	// en cours d'affichage
	// et celui que l'on voudra afficher au clic
	var current;
	var next;
	// lorsque le document est chargé totalement
	$(document).ready(function() {
	// on masque toutes les divisions de classe partie (sélecteur CSS)
	$("div.partie").hide();
	// on choisit la division à afficher par défaut
	current = $("div#premier");
	// et on la montre
	current.show();

	// pour chacun des liens du menu de navigation
	// lorsqu'on clic dessus
	$("div#navigation ul li a").click(function() {
	 	// on stocke la "cible" à afficher
		next = $("div"+this.getAttribute("href"));
	 	// on masque la zone courante
	 	// et une fois ça fait (fonction "callback")
		current.fadeOut(1500, function() {
	 	 	// on affiche la zone "cible"
			current = next;
			current.fadeIn(1500);
			});
	 	// on finit par annuler l'action sur le lien
		return false;
	});
});
</script>

Code HTML

<div id="navigation">
<ul>
 	<li><a href="#premier">premier contenu</a></li>
 	<li><a href="#deuxieme">deuxieme contenu</a></li>
</ul>
</div>

<div id="premier" class="partie">
bla bla
</div>
<div id="deuxieme" class="partie">
bli bli
</div>

N.B. Il y a peut être une meilleure façon de faire, je débute dans l'utilisation de la bête, j'ai pu manquer un point d'amélioration ;)

De cette façon, lorsqu'on cliquera sur un des liens du menu de navigation, au lieu d'arriver à l'ancre correspondante, on affichera la "zone" pointée (préalablement masquée).
Je pense que le code est suffisament limpide pour qu'il se passe de tout commentaire ! C'est là qu'est toute la puissance de cette bibliothèque ;) (bon, je commente quand même pour les néophytes, mais aves les commentaires, vous vous rendrez bien compte que le fonctionnement de la bibliothèque est extrêmement cohérent.)

A vous de jouer !

Vous trouverez des explications plus fournies et plus techniques sur ces diverses ressoures :

Doc
API
Tutoriels
jQuery.info

Commentaires