Présentation de jQuery

1. Un peu d’histoire

John Resig lance la première version de jQuery en 2006. Elle a pour but de fournir une couche d’abstraction aux développeurs permettant de simplifier le code en offrant des objets abstraits là où il y avait besoin de syntaxes différentes, dépendantes des navigateurs utilisés par les utilisateurs, pour une même fonctionnalité.

2. Les apports de jQuery à JavaScript

La bibliothèque offre des fonctionnalités simplifiées pour accéder au DOM, effectuer des demandes de données distantes, ajouter des effets visuels et des animations dans les pages web, manipuler les styles CSS appliqués aux éléments du DOM.

Cette bibliothèque offre une grande facilité d’extension. Nous verrons qu’il est possible, et somme toute assez simple, d’y ajouter de nouvelles fonctionnalités.

3. Intégrer jQuery dans une page web

Pour qu’une page web puisse utiliser la bibliothèque jQuery, il faut l’y inclure, généralement dans son header, par une ligne de code ressemblant schématiquement à :

<script src"chemin complet vers fichier jQuery-VersionXXX.js"></script> 

Vous pouvez télécharger et stocker dans l’arborescence du site le fichier jQuery.js ou bien simplement indiquer à la propriété src de la balise script de la page un chemin distant vers le fichier jQuery.js.

Il est évident qu’utiliser une adresse distante pour obtenir le fichier de la bibliothèque rend le site dépendant de la disponibilité de cette adresse. En clair, si le site distant n’est pas joignable, les pages web du site local s’y référant ne fonctionnent pas.

La bibliothèque de base est disponible en version "normale" (+ ou - 250 ko) et en version "minimale" (+ ou - 90 ko). La version minimale est obtenue en supprimant les commentaires et les caractères d’espacement, pour un gain de place....

1. Fonctionnement de jQuery

Pour appeler une méthode de la bibliothèque jQuery, deux syntaxes sont à la disposition des développeurs.

Tout d’abord, par le mot-clé jQuery ou le symbole $, le symbole dollar n’étant qu’un alias de jQuery. Ces deux formes pointent exactement sur la même fonction et sont donc rigoureusement équivalentes. Cette fonction accepte en paramètre un objet ou une chaîne de caractères. Lorsque c’est une chaîne de caractères qui est passée, elle doit être constituée d’un sélecteur jQuery valide pour renvoyer les éventuels éléments de la page web correspondants, dans le cas contraire elle renvoie undefined.

Le symbole $ (dollar) sert aussi d’objet qui permet l’accès aux méthodes utilitaires proposées par la bibliothèque jQuery.

Les fonctions jQuery renvoient l’objet appelant transformé. Ceci permet de pratiquer ce qu’on appelle le chaînage : une fonction prend en paramètre d’entrée le résultat sortant de la fonction précédente dans la chaîne. Cela permet d’écrire un code plus simple et facile à lire.

2. Les fonctions "callback"

La plupart du temps, une méthode jQuery accepte en paramètre une fonction callback...

1. Les sélecteurs et pseudo-sélecteurs de jQuery

Pour retrouver avec précision des éléments du DOM, jQuery propose d’utiliser des sélecteurs. Ceux-ci, comme ceux de la partie JavaScript, sont basés essentiellement sur les sélecteurs CSS. La bibliothèque enrichit ces derniers de sélecteurs spécifiques qui permettent une sélection plus fine encore.

Ces pseudo-sélecteurs jQuery ne bénéficiant pas des optimisations apportées par le moteur JavaScript à la méthode .querySelectorAll(), il est conseillé (mais pas obligatoire) de les utiliser en filtre après une première sélection effectuée avec un sélecteur CSS.

Le tableau suivant présente les sélecteurs les plus courants reconnus par jQuery.