Devoxx 2011 : Présentation de jQuery

Retour sur la sortie de la nouvelle version 1.7 de jQuery, indispensable librairie Javascript, présentée lors de Devoxx 2011.

C'est à l'occasion de la sortie de cette nouvelle version 1.7 de jQuery, qu' Addy Osmani, Ingénieur développeur chez AOL, nous a présenté à Devoxx (salon européen indépendant sur les technologies Java) les possibilités offertes par cette librairie JavaScript réputée.

jQuery est avant tout une bibliothèque JavaScript, simplifiée et performante : une fonctionnalité qui en Javascript s'écrivait sur des dizaines de codes (notamment pour s'assurer de la compatibilité entre navigateurs) se réduit généralement à une ligne de jQuery sans oublier que les opérations fournies par la librairie sont cross browser.

Selon Addy Osmani cette bibilothèque est actuellement déjà employée par 50% du Top 1 Million de sites les plus fréquentés.Elle a pour avantage d'être légère (31K), Déjà testée et largement répandue, elle est très bien documentée et facile à appréhender.

La première chose à faire pour utiliser jQuery est importer la librairie en ajoutant ceci dans votre page html :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

Addy Osmani nous conseille de conserver le lien vers le serveur CDN de Google car le fichier est ainsi chargé plus rapidement que celui que vous pourriez héberger par vous-même - c'est prévu pour.

Il est facile de reconnaitre du code jQuery par la présence d'appels JavaScript nommés tout simplement "jQuery". Cette fonction attend en paramètre ce que nous appelons un sélecteur.
Par exemple :

// Retourne une liste de objets jQuery.
// Chaque élément correspond un tag html "div" de la page
var liensHTML = jQuery("div");

Souvent, vous trouverez à la place de "jQuery" le symbole "$" qui sert de raccourci syntaxique :

// raccourci syntaxique :
var liensHTML = $("div");

Il existe de nombreux types de sélecteurs qui peuvent vous permettre de récupérer des éléments via leurs identifiants, éléments ayant une classe css spécifique, etc.
Avec un sélecteur retournant une liste éléments, vous pouvez appliquer les méthodes habituellement associées aux collections :

// Compte le nombre d’éléments "div" de la page
var liensHTMLCpt = $("div").length

// Itère sur chaque élément "div" de la page en
// déclenchant une fonction de type "callback"
$.each($("div"), function (index, item) {
     //traitement quelconque sur les éléments de la liste
});

Si le sélecteur employé retourne un élément unique, vous pourrez chainer les appels pour obtenir le comportement souhaité :

// Change le style css de l'élément dont l'identifiant
// est "message" de manière à le rendre visible.
$("#message").show();

// Ajoute à l'élément "message" le style css nommé
// "info" avant de le rendre visible.
$("#message")
     .addClass("info")
     .show();

Je vous ai présenté ci-dessus les principes de bases à l'utilisation de jQuery.

A partir de là, il vous suffit de combiner toutes les possibilités de jQuery pour arriver à vos fins :

• Parcours / modification de la structure du document HTML (DOM)
• Ajout / retrait d’évènements JavaScript
• Effets et  animations complexes
• Déclenchement d’appels Ajax
• Parsing XML, JSON
• Stockage d’informations associées aux éléments DOM
• etc...
  

Le site jQuery expose un très grand nombre exemples complets, n'hésitez pas à y jeter un œil, il y a même des tutoriaux en français alors... pas d’excuses !

Pour ceux qui utilisent d'ores et déjà jQuery, il est recommandé d'utiliser maintenant la version 1.7 dont l'API (Interface de programmation) et les performances ont étés améliorés.

Un grand merci à Addy Osmani pour la présentation de cet indispensable Couteau Suisse javascript.