Si vous êtes un petit au courant des dernières technologies du web, vous avez sans doute entendu parlé d’Ajax. Tout le monde en a fait tout un foin, mais Ajax existe depuis bien longtemps et a été pour la première fois introduit par un certain Internet Explorer (ça alors! ). Et depuis, chaque navigateur a plus ou moins imposé sa propre API. Donc pour nous développeurs, c’est la galère!

Mais heureusement jQuery est né!

Si vous êtes ici c’est que vous ne connaissez pas jQuery et que vous voulez en savoir plus… Alors fini le blabla
Non, jQuery n’est pas un nouvel applet Java, mais bel et bien un framework Javascript qui permet, entre autres de simplifier l’utilisation de l’ajax, mais aussi de manipuler le DOM de votre document, et tout ceci, très, très simplement!
Comme un exemple vaut souvent mieux qu’un long discours, et que de toutes façons je suis mauvais pour les discours, je vais vous démontrer sa simplicité et sa puissance en quelques exemples…

Commençons par l’exemple le plus simple. Admettons que notre document contienne un élément d’id « truc », et que nous souhaitions injecter une chaîne de caractères « bonjour ! » à l’intérieur:

$("#truc").html("bonjour !");

Au niveau du DOM, avant:

<p id="truc"></p>

…Après:

<p id="truc">bonjour !</p>

Alors, deux choses. L’accesseur « $ » permet d’accéder à un objet jQuery. Ici, d’identifiant « truc ». $( »#truc ») nous renvoie donc un objet (au sens javascript, mais aussi jQuery) qui possède de nombreuses méthodes. La méthode html() permet de modifier le contenu innerHTML de l’objet avec le contenu passé en paramètre. Simple, non ? Maintenant admettons que nous souhaitions modifier la classe utilisée par cet élément. Rien de plus simple en jQuery:

$("#truc").addClass("ma_classe");

Au niveau du DOM, avant:

<p id="truc">bonjour !</p>

…Après:

<p id="truc" class="ma_classe">bonjour !</p>

Comme vous pouvez le voir notre paragraphe possède maintenant la classe « ma_classe ». Simple, non ? Maintenant voyons un peu comment fonctionne l’Ajax… Admettons que nous ayons un script « heure.php » qui nous renvoie l’heure, sous forme de chaîne de caractères… Et que nous souhaitions modifier le contenu de notre paragraphe d’id « truc » avec le résultat de l’appel Ajax de ce script… Rien de plus simple avec jQuery:

function set_time(msg)
{
    $("#truc").html(msg);
}
 
$.post("http://mon_site/heure.php", set_time);

Au niveau du DOM, avant:

<p id="truc"></p>

…Après:

<p id="truc">Mardi 12 Juin - 18:36:45</p>

Alors, qu’est-ce que l’on voit ici ? Nous définissons tout d’abord une fonction javascript set_time() qui prend en paramètre un message msg. C’est en fait la fonction callback qui sera appelée lorsque la requête AJax aura été effectuée. Le paramètre contiendra le message renvoyé par le serveur. Cette fonction, modifie le contenu innerHTML du paragraphe d’id « truc », comme nous l’avons vu précédemment: jusque là rien de nouveau. La ligne suivante fait appel à une méthode de jQuery (d’où le $.), « post » qui effectue une requête asynchrone vers le serveur http://mon_site sur le script heure.php. Lorsque le serveur renvoie son résultat, la fonction set_time() est automatiquement appelée avec en paramètre le résultat de la requête Ajax.
Ici on a choisit de passer le nom d’une fonction javascript comme second paramètre de la méthode post(), mais il tout à fait possible de définir la fonction de manière inline:

$.post("http://mon_site/heure.php", function (msg)
{
    $("#truc").html(msg);
});

Note: le code devient vite illisible et difficile à maintenir lorsque l’on abuse d’appels inline!

Les évènements
Vous avez sans doute déjà bindé (lié) un évènement (par exemple onClick) à une fonction en javascript, par exemple avec la fonction onClick().
Cette méthode permettant de lier un évènement à un objet a plusieurs inconvénients. Le premier est que le code se retrouve mélangé avec le HTML. Le deuxième est que le code est statique: il est définit une bonne fois pour toutes lors de la création/génération de la page.
Et bien avec jQuery, ces deux inconvénients disparaissent puisqu’il est maintenant possible de binder n’importe quel évènement Javascript à n’importe quel élément de notre DOM. Ainsi, en reprenant l’exemple précédent, et en rajoutant un bouton nous obtenons le code suivant:

function set_time(msg)
{
    $("#truc").html(msg);
}
 
function envoi_requete()
{
    $.post("http://mon_site/heure.php", set_time); 
}
 
$("#mon_bouton").click( envoi_requete );

Aussi simplement que l’on modifie le contenu innerHTML d’un objet avec la méthode html(), il est possible de binder un évènement à n’importe quel objet ! La méthode click() permet de binder, comme vous l’aurez deviné, l’évènement « clique » de la souris à n’importe quel objet. Le code précédent va donc appeler la fonction envoi_requete() dès que l’utilisateur cliquera sur le bouton d’id « mon_bouton ». Cette fonction déclenchera la requête Ajax. Une fois cette requête terminée, le résultat sera injecté dans le innerHTML de l’objet d’id « truc ». A noter qu’encore une fois, il est ici tout à fait possible de définir de manière inline la fonction appelée lorsque l’évènement clique est détecté.

Pour finir…
Cette petite introduction à jQuery touche à sa fin. Non pas que je n’ai plus rien à dire: je pourrai parler des possibilités offertes par cette librairie pendant des heures, mais il commence à se faire tard, et le but de cet article était seulement de donner un petit aperçu de cette librairie et des différents domaines qu’elle touche. Avant de finir je vais cependant introduire une dernière fonction très utile et importante, la méthode

$(document).ready()

Elle est appelée une fois le DOM de la page complètement chargé. Lorsque vous utilisez jQuery, il est obligatoire de binder vos différents évènements dans cette fonction, de manière à être sûr que tout fonctionne correctement:

$(document).ready(
function ()
{
   alert('Le DOM est prêt :)'); 
});

Quelques liens

• jQuery.com: Site Officiel
• VisualjQuery: Documentation très bien faite (malheureusement plus mise à jour depuis longtemps)

Ah, et j’oubliais: merci à lolo de m’avoir fait découvrir cette petite perle

Et j’oubliais aussi: rien à voir avec jQuery, mais voilà le petit extrait musical du moment…Until the Morning – Thievery Corporation