jQuery : un ami qui vous veut du bien…

AJAX… Oui mais encore? Un produit ménager? Non, une technologie de développement!
Il faudrait arrêter de la faire cette blague! Les lecteurs vont s’en lasser à force…

Bref, s’il est un mot à la mode dans les open spaces des représentants phares du Web 2.0, c’est bien « AJAX« … Comme ça, pour les non aguerris, ça ne veut rien dire. Mais avec un exemple, tout devient plus clair…
Un exemple simple (et utile) peut-être trouvé ici. Un exemple parmi d’autres bien entendu…

AJAX côté utilisateur, c’est user friendly et c’est sexy. Mais c’est toujours ultra dépendant de l’activation de JavaScript sur la machine cliente (99% des cas).
AJAX côté développeur, ça peut devenir un casse-tête. D’abord parce que ce n’est pas si simple que cela à mettre en place. Ensuite parce que les navigateurs n’interprètent pas les événements JavaScript de la même façon.

Heureusement, la communauté de développeurs attachés à l’Open Source se distingue toujours par la mise en ligne de librairies qui valent le détour.
jQuery en fait partie (oui, l’introduction du billet était longue!).

jQuery, c’est un peu l’AJAX en un seul fichier. A l’aide de sélecteurs, on manipule aisément le contenu d’une page web. Gestion des événements, des requêtes, des attributs CSS… Tout (ou presque) y est!
Un exemple simple peut permettre de comprendre comment jQuery transforme quinze lignes de code en une seule.
Admettons que l’on ait un div visible :

<div id="layer">
     Ici le contenu.
</div>

Avec les paramètres CSS suivants :

#layer {
     color : #000;
     cursor: pointer;
}

Avec jQuery, on peut faire disparaître ce div (en une ligne) :

$('#layer').click(function() {
     $('#layer').hide();
});

Ici, c’est un événement clic sur le div qui le fait disparaître. Mais on peut très bien gérer d’autres événements ou encore modifier des divs (ou toute autre balise) voisins, parents, etc.
On peut également modifier les attributs CSS du div :

$('#layer').click(function() {
     $('#layer').css('color', '#fff');
});

Ici, on change la couleur du texte du div suite à un événement clic.

Bien entendu, il ne s’agit là que d’exemples minimalistes de ce que permet jQuery. La documentation officielle détaille un peu plus les possibilités offertes par cette librairie. Pour les anglophobes, il existe également une très bonne documentation en français.
Notez que jQuery, comme le veut la tradition du monde Open Source est ouvert aux plugins en tous genres…

Inutile de perdre du temps à écrire et réécrire vos fonctions, adoptez jQuery, cette librairie fait tout pour vous!