Introduction
jQuery est une bibliothèque JS développée principalement par John Resig.
Par bibliothèque on entend donc un ensemble cohérent de fonctions permettant de s’affranchir des tâches rébarbatives et répétitives de façon uniforme sur les navigateurs les plus courants.
Elle est sous licence GPL et MIT, et donc complètement réutilisable sur des travaux professionnels. Son poids compressé est de 14 Ko, ce qui est tout à fait raisonnable sur la plupart de nos projets.
Les navigateurs supportés sont :
- Firefox 1.5+
- Internet Explorer 6+
- Safari 2.0.2+
- Opera 9+
La bibliothèque est utilisée par exemple sur des sites comme :
- Dell
- Google Code
- Digg
- NBC
- Amazon
- Mozilla
- WordPress
- Drupal
- SPIP
- The Zend Framework
- etc
Par ailleurs cette bibliothèque est compatible (elle n’entre pas en conflit) avec d’autres.
Pré-requis
Ces notions doivent vous êtes familières :
- JavaScript (évènements, etc)
- DOM (nœuds, arbre, etc)
- CSS (sélecteurs, etc)
- AJAX
Bases
Appel
Typiquement, l’appel à la bibliothèque se fera de la manière suivante :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml;charset=iso-8859-15" />
<title>Exemple</title>
<script type="text/javascript" src="./js/lib/jquery.js"></script>
<script type="text/javascript" src="./js/exemple.js"></script>
</head>
<body>
…
</body>
</html> On charge dans un premier temps la bibliothèque, puis notre fichier exemple.js qui contiendra nos scripts.
Compression
jQuery est disponible sous trois formats :
- Sans compression (93 Ko)
- Compressée à l’aide de packer (28 Ko)
- Compressée à l’aide de JSMin puis de gzip (15 Ko)
Il conviendra d’appeler le format le plus léger dans un environnement de production, mais il reste possible de parcourir la bibliothèque dans sa version non compressée.
La fonction jquery()
jQuery repose sur une seule fonction : jQuery() ou $(). Comme toutes les fonctions JavaScript elle accepte des paramètres, et retourne un objet, que nous appellerons par la suite “objet jQuery”.
Concernant les paramètres acceptés, nous pouvons passer :
Une fonction
Dans ce cas, jQuery va exécuter cette fonction lorsque la page sera chargée par le navigateur. Plus précisément, lorsque le DOM sera chargé.
C’est pourquoi on en-capsule souvent l’ensemble du code écrit en jQuery dans :
$(function(){
// ...
}); On s’assure ainsi que le code sera exécute une fois la page chargée, et on est sûr de pouvoir manipuler le DOM sans erreur. Contrairement à l’évènement window.onload, le chargement complet des images de la page n’est pas nécessaire.
Une chaine de caractères (query)
Les sélecteurs CSS
Une des grandes forces de jQuery est d’intégrer la syntaxe des sélecteurs CSS. Il est alors facile de cibler facilement les nœuds DOM qui nous intéressent.
Par exemple :
var mon_objet_jQuery = $("#mon_image");
var mon_objet_jQuery = $("#menu a"); Ou encore :
var mon_objet_jQuery = $("#id > .classe, #id td:last-child"); Notez au passage que contrairement au support CSS des navigateurs, la librairie comprends tout à fait les pseudos-classes et les pseudos-éléments.
Voir la documentation des sélecteurs CSS
Les sélecteurs jQuery
Il existe des sélecteurs spécifiques à jQuery qui ne trouvent pas d’équivalences en CSS. Ils sont toutefois très pratiques. Par exemple :
var mon_objet_jQuery = $('tr:odd td');
// les `td` dans les `tr` impairs var mon_objet_jQuery = $("p:eq(4)");
// le quatrième paragraphe var mon_objet_jQuery = $("p:lt(8)");
// les sept premiers paragraphes etc.
Voir la documentation des sélecteurs jQuery
Méthodes
Maintenant que nous avons un objet jQuery, il va falloir l’utiliser. Et pour cela toute une palette de méthodes sont disponibles dans la bibliothèque : manipulation du DOM, des CSS, des évènements et autres effets visuels.
Si on désire par exemple masquer progressivement les paragraphes d’une page, on utilise :
$("p").fadeOut(); Soit sans passer de paramètre comme cela, soit en précisant une durée en mili-secondes ou encore à l’aide des chaines slow, fast et normal.
Deux autres exemples :
$("li").html("lorem <strong>ipsum</strong> dolor");
$("#menu a").click(function(){
window.open($(this).attr("href"));
return false;
}); Dans le dernier, vous remarquerez qu’on combine des fonctions JavaScript “classiques” au code jQuery, mais aussi qu’on transforme l’objet courant this en objet jQuery avec $(this).
L’ensemble des méthodes et leurs documentations sont disponibles sur Visual jQuery.
Callback
Certaines fonctions (comme la fonction fadeOut()) acceptent une autre fonction en paramètre. Cette dernière sera exécutée à la fin de l’exécution de la première. C’est ce qu’on appelle un callback.
Cela permet par exemple de créer des animations :
$(".test").fadeOut("slow",function(){
$(this).fadeIn("slow");
}); Chainabilité
On l’a vu les méthodes jQuery retournent un objet jQuery. Cela permet de “chainer” les fonctions.
Ainsi au lieu d’écrire :
$(".toto").append(" un texte");
$(".toto").css("border","1px solid red");
$(".toto").addClass("titi");
$(".toto").removeClass("toto"); On peut simplifier par l’exécution du code par :
$(".toto").append(" un texte").css("border","1px solid red").addClass("titi").removeClass("toto");
Ce que nos lecteurs en disent :
Yojimbo
Geoffray
isabelle
Laurent
DDR2
Olivier Blanc
Mettali Hedi
Neoxy
stefff
manu
Benzo
Shemu
Michel Mancini
Shemu
Joël
Jasse29
Zecko
jquery
EVonZ
Les commentaires sont clos.