Blog ENI : Toute la veille numérique !
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
💥 Les 22 & 23 novembre : Accès 100% GRATUIT
à la Bibliothèque Numérique ENI. Je m'inscris !
  1. Livres et vidéos
  2. JavaScript et jQuery
  3. Présentation de jQuery
Extrait - JavaScript et jQuery La programmation web par la pratique
Extraits du livre
JavaScript et jQuery La programmation web par la pratique Revenir à la page d'achat du livre

Présentation de jQuery

Qu’est-ce que jQuery ?

jQuery reste de nos jours la bibliothèque JavaScript la plus répandue au monde. Elle est très utilisée parce que gratuite, légère et assez simple à appréhender.

Nous allons décrire son fonctionnement et ses principaux atouts.

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....

Les bases de jQuery

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...

Interagir avec le DOM en jQuery

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.

Syntaxe

Description

Remarque

*

Tous les éléments

Sélecteur CSS

x

Les éléments x

Sélecteur CSS

#x

L’élément ayant l’id x

Sélecteur CSS

.x

Les éléments ayant la classe CSS x

Sélecteur CSS

x > y

Les éléments y enfants de x

Sélecteur CSS

x y

Les éléments y descendants de x

Sélecteur CSS

x + y

Le premier élément y précédé d’un élément x

Sélecteur CSS

x ~ y

Les éléments y précédés d’éléments x

Sélecteur CSS

[x]

Les éléments ayant un attribut x

Sélecteur CSS

[x="y"]

Les éléments ayant un attribut x de valeur y

Sélecteur CSS

[x*="y"]

Les éléments ayant un attribut x dont la valeur contient y

Sélecteur CSS

[x^="y"]

Les éléments ayant un attribut x dont la valeur débute par y

Sélecteur CSS

[x$="y"]

Les éléments ayant un attribut x dont la valeur s’achève par y

Sélecteur CSS

[x~="y"]

Les éléments dont l’attribut x est une liste de valeurs séparées par des espaces et incluant y

Sélecteur CSS

[x!="y"]

Les éléments dont l’attribut x n’est pas de valeur y

Sélecteur jQuery

:eq(x)

L’élément d’indice x dans la sélection

Sélecteur...