Cours de JavaScript - Initiation à la bibliothèque jQuery

version 1.11, dernière mise à jour le 9 janvier 2017.

   

Table des matières (TdM)

  1. I. Introduction
    1. Principe
    2. Utilisation
      1. Chargement de la bibliothèque
      2. Lancement au chargement de la page
    3. Utilisation de plugins
  1. II. Les sélecteurs
    1. Sélecteurs de base
    2. Filtrage
      1. Filtres sur l'arborescence
      2. Filtres de contenu
      3. Filtres de visibilité
      4. Filtres d'attributs
  1. III. Les événements
    1. Événements du DOM
    2. Nouveaux événements
    3. Gestionnaires d’événements
    4. Exercice : Premiers effets
    5. Exercice : Sélecteurs
  1. IV. Quelques effets
    1. Apparition, disparition
    2. Effets personnalisés, contrôle
    3. Exercice : Effets
  1. V. Manipulation du DOM
    1. Création de nœuds
    2. Modification des nœuds
    3. Insertion de contenu
      1. Insertion à l'intérieur d'un élément donné
      2. Insertion à l'extérieur d'un élément donné
      3. Insertion autour d'un élément donné
    4. Remplacement et suppression
    5. Exercice : Manipulation du DOM

Retour au menu

Contenu du cours

I. Introduction

1. Principe

jQuery est une bibliothèque JavaScript qui a pour but de soulager le développeur des tâches fastidieuses de gestion de compatibilité inter-navigateurs, ainsi que de lui fournir des effets classiques « clef en main ». Une fonction incontournable de cette bibliothèque est la fonction $, qui a de multiples usages comme nous allons le voir. Le but de ce chapitre n'est pas de donner une liste détaillée de toutes les propriétés et méthodes définies par cette bibliothèque. Le site officiel de jQuery le fait bien plus complètement ; il s'agit simplement de fournir les bases permettant de saisir le principe de fonctionnement de la bibliothèque.

>Retour à la TdM

2. Utilisation

a. Chargement de la bibliothèque

Pour commencer, il faut évidemment télécharger la bibliothèque, qui est disponible sur le site officiel. Il suffit ensuite de l'incorporer à l'aide d'un élément script dans l'entête du document HTML :

<script type="text/javascript" src="CheminRelatifVersLeFichierjQuery.js"> </script>

Le script doit être présent sur le serveur afin de limiter les risques de rejet du code lié à la protection contre les scripts inter-domaines.

b. Lancement au chargement de la page

Il est usuel d'utiliser l'événement load sur l'élément body pour ne lancer un script que lorsque l'on est sûr que l'intégralité du DOM a été chargée, ou, mieux, de ne lancer un gestionnaire qu'une fois que le DOM de la page a été chargé : document.addEventListener("DOMContentLoaded", gestionnaire, false);. jQuery offre une méthode plus souple, à l'aide de la méthode ready :

$(document).ready(GestionnaireALancer) ;

On peut ainsi écrire...

$(document).ready(function(){...}) ;

... ou...

$(document).ready(Gestionnaire) ;

function Gestionnaire(evt)
{
...}

Il suffit de placer cette ligne de code entre les balises <script> et </script> dans l'entête du document HTML.

>Retour à la TdM

3. Utilisation de plugins

jQuery est très utile en combinaison avec des extensions, ou plugins. Il en existe de toutes sortes, disponibles sur le site officiel des plugins, où des démonstrations sont possibles. Avant de réaliser un effet, il est souvent judicieux de vérifier s’il n’existe pas déjà un plugin qui permet de le réaliser, souvent avec des options attractives.

Pour utiliser un plugin, il suffit de charger au préalable la bibliothèque, puis le fichier JavaScript de l’extension.

>Retour à la TdM

II. Les sélecteurs

1. Sélecteurs de base

La fonction $ permet de sélectionner directement des éléments à l’aide de la syntaxe CSS :

Il est possible d'indiquer plusieurs sélecteurs, à la manière des CSS : $(".truc, div, #machin") sélectionne tous les éléments de classe truc, tous les éléments div et l'élément d'identifiant machin.

Remarque : la plupart du temps, on obtient un tableau. Sa taille est évidemment disponible grâce à la propriété length. Par exemple, $("p").length permet de connaître le nombre de paragraphes dans un document.

>Retour à la TdM

2. Filtrage

a. Filtres sur l'arborescence
b. Filtres de contenu
c. Filtres de visibilité
d. Filtres d'attributs

>Retour à la TdM

III. Les événements

1. Événements du DOM

Les événements de la spécification du DOM sont baptisés simplement en enlevant le préfixe on de l'attribut HTML correspondant : on obtient alors le nom de la méthode à appliquer à l'élément sélectionné. Par exemple, $("p").click(function(){alert("salut!")})

>Retour à la TdM

2. Nouveaux événements

jQuery définit de nouveaux événements. En voici quelques-uns :

>Retour à la TdM

3. Gestionnaires d’événements

Pour mémoire, un gestionnaire d’événement est une fonction destinée à être lancée en réponse à une action de l’utilisateur (par exemple un clic de souris sur un élément donné). De la même manière qu’avec le DOM, jQuery fournit trois manières de définir un gestionnaire d’événement :

>Retour à la TdM

Exercice 1. Premiers effets

Énoncé
Correction

Exercice 2. Sélecteurs

Énoncé
Correction

IV. Quelques effets

1. Apparition, disparition

>Retour à la TdM

2. Effets personnalisés, contrôle

>Retour à la TdM

Exercice 1. Effets

Énoncé
Correction

V. Manipulation du DOM

1. Création de nœuds

La fonction $ permet de facilement créer des nœuds. par exemple, $("<div><p>Un peu de texte</p></div>") crée un élément div contenant un paragraphe. Attention cependant, un tel élément reste « en suspens » tant qu'il n'a pas été explicitement rattaché au DOM, de même qu'un élement créé avec la méthode createElement() .

>Retour à la TdM

2. Modification des nœuds

jQuery facilite l'accès et la modification des contenus des nœuds.

>Retour à la TdM

3. Insertion de contenu

a. Insertion à l'intérieur d'un élément donné
b. Insertion à l'extérieur d'un élément donné
c. Insertion autour d'un élément donné

Par exemple, $("p").wrap($("<div></div>")); et $("p").wrap(document.createElement(div)); permettent d'entourer tous les paragraphes par un élément div.

>Retour à la TdM

4. Remplacement et suppression

replaceAll(sélecteur) permet de remplacer l'élément indiqué par sélecteur par le contenu spécifié :ar exemple, $("<p>Paragraphe</p>").replaceAll("h3"); remplace tous les titres de niveau 3 par des paragraphes avec le même contenu. replaceWith(contenu) permet de remplacer l'élément sélectionné par contenu : $("em").click(function(){$(this).replaceWith("<strong>"+$(this).text()+"</strong>")}); remplace ainsi au clic un élément em par un élément strong.

Pour vider un élément sélectionné, on fait appel à la méthode empty(). Par exemple, $("#p1").empty() laisse présent l'élément d'identifiant p1, mais supprime tous ses enfants. La méthode remove(expression) supprime de l'élément sélectionné le contenu indiqué par expression. Par exemple, $("p").remove($(":contains('test')")); supprime tous les paragraphes contenant la chaîne de caractères "test".

>Retour à la TdM

Exercice 1. Manipulation du DOM

Énoncé
Correction

Historique de ce document

Conditions d'utilisation et licence

Creative Commons License
Cette création est mise à disposition par Gilles Chagnon sous un contrat Creative Commons.

Retour au menu