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>
        &hellip;
    </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").apppend(" 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").apppend(" un texte").css("border","1px solid red").addClass("titi").removeClass("toto");

Lire la 2ème partie de cet article sur jQuery.