JQuery, une librairie javascript performante

200815/03

Parmi les meilleures librairies Javascript open source, on trouve ExtJS, Prototype et JQuery.

Nous allons faire une courte présentation de cette dernière qui réconcilie les développeurs les plus réfractaires avec le javascript pour enrichir leurs pages web.

JQuery, qui fêtait ses 2 ans en janvier 2008, présente plusieurs avantages sur ses concurrents :

• une version compressée de 14 Ko seulement (contre 100 Ko pour Prototype et 400 Ko pour ExtJS),
• un apprentissage très rapide, sous réserve de posséder les bases du DOM( Document Object Model),
• une documentation précise, exhaustive, et complète,

L'article n'a pas pour vocation a se substituer aux nombreux tuturiaux existants déjà, vers lesquels le développeur devra se tourner de préférence. Il veut juste montrer que le javascript peut servir à enrichir les pages web, dès lors qu'il n'est pas obstructif et qu'il permet d'améliorer l'ergonomie des sites web.

$ et la magie jQuery s'opère

Pas de faute de frappe dans le titre, le $ constitue toute la "magie" de jQuery.

Un objet jQuery est une boîte contenant un ensemble de noeuds du DOM.

Pour trouver tous les paragraphes du DOM, il suffit d'écrire :

Pour trouver tous les paragraphes qui ont la classe 'plop' du DOM, on écrira :

Simple, non ? C'est le credo de jQuery : write less, do more.

Allons un peu plus loin, avec une structure HTML telle que :

Il va falloir au chargement de la page masquer les contenus content2, content3 et content4 via javascript et non via la CSS afin de rester non-obstructif ; ceci s'effectue très simplement grrâce à Jquery et se passe de tous commentaires :

L'idée est de pouvoir récupérer l'id du lien cliqué, de lui appliquer une classe CSS définie, et d'afficher le contenu relatif au lien tout en masquant le contenu relatifs aux autres liens.

 Ce qu'on voit très bien avec Jquery, c'est qu'on a aucune injection de javascript dans la page HTML.

A partir du moment où le code HTML est bien structuré, sémantique, Jquery peut parcourir le DOM très simplement, de manière non-obstructive, avec une syntaxe très rapide d'apprentissage.