Babylon Design

par Samuel Le Morvan

Chez vous aussi, utilisez un Web de qualité

Tutoriels jQuery

Devenez un professionnel de la programmatique Javascript grâce à la librairie la plus efficace du marché !

Tutoriels jQuery

Apprendre et comprendre jQuery – 1/3

Introduction rapide et en douceur à l’utilisation d’une des bibliothèques JS à la mode. Ou comment ajouter une couche d’interactions simplement et proprement à vos pages.

NB : ce billet sera divisé en trois parties.

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").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"); 

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


Ce que nos lecteurs en disent :

  1. Yojimbo

    For-mi-dable

    Je cherchais un bon moyen de commencer, et j’ai été pris de panique face a l’illisibilité de leur Wiki un peu bordellique (surement pratique pour les habitués).

    Merci pour cet (ces) article.

  2. Geoffray

    Très belle introduction, c’est grâce à celle-ci que j’ai décidé d’aborder JQuery ! Félicitations, et vivement la suite.

  3. isabelle

    La suite, la suite :)

    Excellente rédaction,

  4. Laurent

    Enfin une personne qui explique ce qu’est jQuery en Français et de manière claire. Encore bravo et surtout merci pour ces articles

  5. DDR2

    Que dire ?
    C’est parfait, magnfique présentation (et traduction ?) du tutoriel "getting started" présent sur le wiki…

    Très clair, très lisible, c’est parti pour une p’tite soirée JQuery je crois :D

  6. Olivier Blanc

    Super, je cherchais justement une explication de jQuery en français. Son utilisation va nettement améliorer le temps passé à effectuer des routines pour créer des sites internet.

    Merci pour ce tutoriel!

  7. Mettali Hedi

    Bonjour,

    Le Tutoriel est super merci .

    J’ai juste une petite question svp :
    Comment détecter un élément qui a été créer dynamiquement (à travers une requête ajax).

    Merci d’avance

  8. Neoxy

    Merci pour cet article très constructif… en tout cas, ca reste une bonne base pour commencer avec Ajax…

  9. stefff

    Hello,

    Je cherchais un début facile à comprendre pour me lancer avec jQuery.

    Encore une fois bravo babylon-design

  10. manu

    Enfin des exemples simples et en français pour le néophyte que je suis ! Merci, merci merci

  11. Benzo

    Bravo pour ce sujet !

    Juste une remarque, à un certain moment tu dis (je cite) :
    "Par ailleurs cette bibliothèque est compatible (elle n’entre pas en conflit) avec d’autres."

    Peux-tu me confirmer qu’elle est compatible avec Mootools ? Car j’ai l’impression d’avoir un prob de compatibilité entre les 2…
    Par curiosité, et si tu connais ce conflit, as-tu une méthode pour les faire cohabiter ?

    Merci !

  12. Michel Mancini

    Votre article est très intéressant et je vous félicite.
    Mais j’aimerais connaître la syntaxe à utiliser avec jQuery pour appeler une fonction javascript quand l’internaute clique sur une image, tout en gérant les incidents.
    Je voudrais pouvoir faire fonctionner mon site de peintures en plein écran, mais comme alors il n’y a plus de barres de navigation, j’ai par exemple prévu une icône retour arrière avec un message "cliquer pour aller à la page précédente".
    Si l’utilisateur clique dessus, cela doit déclencher une fonction javascript goBack() (qui gère les différents types de navigateurs.)
    En effet, l’utilisation de href="#" return false ou void() pose problèmes si on n’utilise que le Javascript normal. Où placer le script jQuery par rapport à l’image concernée et comment identifier celle-ci ?
    Peut-on appeler dans le script jQuery une fonction javascript se trouvant dans une bibliothèque javascript ? (lib.js). ou doit-on l’intégrer dans la fonction bind de JQuery ? Ce qui serait lourd car mon site a plus de 700 pages.
    Merci d’avance.

    • Shemu

      Oui tu peux le faire !

  13. Joël

    C’est bizarre je recherche une doc car j’aimerai bien en savoir un peu plus sur jQuery et je tombe sur ton site. Tu es vraiment partout :) même dans le top de ma recherche google

  14. Jasse29

    Bonjour,

    effectivement jQery est très intéressant, et avec des tutoriels comme les tiens même un débutant comme moi arrive à faire des choses sympathiques. Alors merci

  15. Zecko

    Super tuto pour s’initier. ;)

  16. jquery

    JQuery est certainement devenu le framework de référence en matière de javascript.

    Merci pour cette article qui je l’espère va encore faire grossir la communauté.

  17. EVonZ

    Excellent article!!! J’espère une suite ;-)
    un petit commentaire néanmoins:

    var mon_objet_jQuery = $("p:eq(4)"); // le quatrième paragraphe

    en fait il s’agit du 5èeme paragraphe (l’incrémentation commence à 0) CQFD LOL

Les commentaires sont clos.