jQuery est une petite bibliothèque JavaScript facilitant l'écriture de scripts.

Ses principaux avantages sont:

  • la compatibilité avec tous les navigateurs: plus besoin de truffer votre code de tests pour l'adapter au navigateur, jQuery s'occupe de tout;
  • jQuery est compacte (pas plus de 15ko, ça ne surcharge pas vos pages) et rapide (son créateur, John Resig est une grosse tête, demi-dieu du JavaScript. C'est un des principaux développeurs du moteur JavaScript de Firefox);
  • sa syntaxe est élégante, puissante, peu verbeuse, et s'apprend très rapidement;
  • jQuery est extensible: des centaines de plugins existent, en particuliers de très nombreux effets graphiques;

Le principe de base est le suivant: vous créez un objet jQuery pointant vers un ou plusieurs éléments de votre document, et vous appelez ses méthodes. La plupart de celles-ci renvoient un objet jQuery, ce qui permet de chaîner les actions.

Exemple:

Le code suivant:

$('img').addClass('titi').attr('alt', 'toto').each(function(){alert($(this).attr('src'))})
  • crée un objet jQuery permettant de travailler avec pour les balises images du document;
  • ajoute à chacune de ces balises la classe "titi";
  • fixe la valeur de leur attribut "alt" à "toto";
  • puis pour chacune affiche une boîte d'alerte contenant l'url de l'image;

Syntaxe

Pour créer un objet, appelez le constructeur jQuery, que vous pouvez abréger avec un simple $ en lui passant un sélecteur CSS correspondant aux objets à manipuler:

 var toto = $(monselecteur);

Exemples:

  • $("#toto") => l'élement dont l'id est toto
  • $("a") => toutes les balises a
  • $(".toto") => tous les éléments qui possèdent une classe toto

Tous les sélecteurs définis en CSS3 sont disponibles, cf cette liste.

$(monselecteur) va créer un objet contenant une collection d'éléments de votre documents. Vous allez ensuite appliquer des méthodes à cette collection. Voici une liste de quelque fonctions de base disponibles. N'hésitez pas à consulter la documentation, très bien faite, pour avoir la liste de toutes les méthodes disponibles.

  • $(monselecteur).each(toto) : applique la fonction toto à tous les éléments. Par exemple: $("p").each(function(){alert($(this).height())}) : affiche la hauteur de chaque paragraphe du document;
  • $(monselecteur).eq(n) : réduit la collection à son nième élément (n commençant à 0);
  • $(monselecteur).get(n) : retourne le nième élément de la collection;
  • $(monselecteur).attr() : lit ou modifie un attribut de tous les éléments de la collection. exemple: $('IMG').attr("alt", "toto") : fixe à "toto" l'attribute "alt" de toutes les images;
  • $(monselecteur).css() : lit ou modifie une propriété css de tous les éléments de la collection
  • $(monselecteur).addClass(class), $(monselecteur).removeClass(class), $(monselecteur).toggleClass(class), $(monselecteur).hasClass : manipule la classe CSS des éléments;
  • $(monselecteur).html() et $(monselecteur).html(val) : récupère ou modifie le contenu HTML des éléments;
  • $(monselecteur).text() et $(monselecteur).text(val) : récupère ou modifie le contenu texte des éléments;
  • $(monselecteur).val() et $(monselecteur).val(val) : récupère ou modifie la valeur des éléments de formulaire correspondant
  • $(monselecteur).filter(toto) : réduit la sélection en lui appliquant un filtre qui peut être soit un sélecteur CSS soit une fonction
  • $(monselecteur).find(toto) : cherche à partir de chacun des éléments de la collection ceux qui correspondent à une expression. exemple: $('p.toto').find('span.titi') retourne une liste de span possédant la classe titi et contenus dans des paragraphes de classe toto;
  • $(monselecteur).children() et $(monselecteur).parents() : renvoie les éléments enfants ou parents des éléments de la collection;
  • $(monselecteur).before(toto), $(monselecteur).after(toto), $(monselecteur).append(toto) : ajoute le contenu toto avant, après ou à l'intérieur de chacun des éléments de la collection;
  • $(monselecteur).click() : simule un clic sur chacun des éléments;
  • $(monselecteur).clic(toto) : appelle la fonction toto quand l'utilisateur clique sur l'un des éléments de la collection;

Par ailleurs, jQuery:

  • offre nativement des fonctions permettant d'appliquer quelques effets simples sur les éléments, comme modifier leur visibilité.
  • offre des fonctions permettant d'effectuer facilement des requêtes Ajax et de traiter le résultat. Par exemple $.get("test.php", function(data){$('#toto').text(data);}) remplace le contenu de la balise d'id "toto" par le résultat de l'appel à l'url test.php
  • possède de très nombreux plugins. Parmi ceux-ci, un certain nombre sont supportés officiellement sous le nom de jQuery UI. Ils offrent des interactions avancées (glisser-déposer par exemple), des "widgets" (onglets, accordéons, sélectionneur de date, etc), et de nombreux effets visuels.

Je n'imagine plus aujourd'hui coder en JavaScript pour le web sans utiliser une bibliothèque, et jQuery, par sa faible taille et son élégance, est ma préférée. J'espère que cette rapide introduction aura donné à celles et ceux qui ne connaissaient pas encore jQuery l'envie de s'y mettre pour pouvoir enfin goûter aux joies du DHTML.