Version en ligne

Tutoriel : Simplifiez vos développements JavaScript avec jQuery

Table des matières

Simplifiez vos développements JavaScript avec jQuery
Avant de commencer
Historique du Web : de HTML à jQuery
Qu'est-ce que jQuery ?
Ce qui rend jQuery si puissant et universel
Installer jQuery
Premiers pas
Le vocabulaire à connaître
Le squelette HTML typique
Attendre la disponibilité du DOM
Premier script : « Hello world »
Sélection d'éléments
Fonctionnement de base de jQuery
Sélection d'éléments
Notions indispensables
Plus loin dans la sélection d'éléments
Sélecteurs d'attributs
Sélecteurs hiérarchiques
Pseudo-sélecteurs d'éléments sélectionnés
Sélecteurs d'éléments particuliers
Pseudo-sélecteurs spécifiques aux formulaires
Sélecteurs utilisés dans les tableaux
Parcourir les éléments sélectionnés
Conversion jQuery/DOM
Modifier le contenu d'un élément
Getters et setters
Accéder aux attributs HTML et aux propriétés CSS
Travailler avec l'attribut class
Travailler avec les formulaires
Travailler avec les valeurs stockées dans des éléments
Position et taille des éléments
Associer des données aux balises
Insérer et remplacer des éléments dans le DOM
Insérer du contenu
Remplacer des éléments
Insérer des éléments
Déplacer du contenu
Dupliquer des éléments
Entourer des éléments
Supprimer des éléments
TP : Questionnaire interactif en jQuery
Instructions pour réaliser le TP
Correction
Les bases de la gestion événementielle
La souris
Le clavier
Les éléments
Les pages
Plus loin dans la gestion événementielle
Événements personnalisés
Gestion événementielle unique
Déclenchement d'événements
Créer des événements personnalisés
Délégation d'événements
Animations et effets
Apparition et disparition
Fondu enchaîné
Aller plus loin
Files d'attente et timer
Les files d'attente jQuery
État de la file d'attente
Manipuler la file d'attente
Répéter une animation sans fin
Arrêter et reprendre une animation
Mettre en place un timer
Textes et images
Les chaînes de caractères
Les images
Formulaires et tableaux
Les formulaires
Les tableaux
TP : Mise en forme d'une page Web
Instructions pour réaliser le TP
Correction
Un jeu en jQuery
Le document de base
Gérer les déplacements
Détecter les collisions
Ajouter des sons
Le code complet
TP : Un jeu de collecte spatiale
Instructions pour réaliser le TP
Correction
Premiers pas avec AJAX
Qu'est-ce qu'AJAX ?
Charger un fichier
Charger une partie d'un fichier
Passer des paramètres à un programme PHP
Requêtes GET et POST
Faire patienter l'utilisateur avec une animation
Plus loin avec AJAX
Charger un script et des données JSON
La fonction $.ajax()
Événements associés à une requête AJAX
TP : Un chat en jQuery
Instructions pour réaliser le TP
Correction
Trouver et utiliser un plugin
Trouver et utiliser un plugin jQuery
Quelques exemples de plugins
jQuery UI
De quoi est capable jQuery UI ?
Déplacer et redimensionner des éléments
Un accordéon
Sélection de date
Des boîtes de dialogue
Afficher des onglets
Animation : une impression de déjà-vu
Animation de couleurs
Modèles de progression
Créer un plugin
Le squelette d'un plugin
Un premier plugin
Un plugin plus ambitieux
Déboguer le code jQuery
Déboguer avec la fonction alert()
Try et catch
Capturer toutes les erreurs
Déboguer avec Firebug

Simplifiez vos développements JavaScript avec jQuery

Si vous avez déjà programmé en JavaScript, vous savez que ce langage est puissant, mais aussi « verbeux » et souvent assez complexe à mettre en œuvre. Si vous voulez accéder à toute la puissance de JavaScript en utilisant des instructions simples, logiques, faciles à comprendre et à maintenir, jQuery est vraiment fait pour vous !

Avec ce cours, je vous propose de découvrir les multiples facettes du framework jQuery. De la sélection d'éléments à la manipulation du DOM, en passant par l'animation, les requêtes AJAX, l'utilisation et la création de plugins, la création de jeux et bien d'autres choses encore !

N'ayez crainte, votre apprentissage se fera en douceur et de très nombreux exemples de code documentés viendront consolider vos connaissances. Au fil des pages, votre approche deviendra de plus en plus naturelle et les nouveaux chapitres ne feront qu'apporter une pierre de plus à l'édifice, sans en ébranler les fondations. Si vous le souhaitez, vous pouvez améliorer vos connaissances en JavaScript en consultant ce cours.

Si vous lisez ces lignes, c'est parce que vous avez décidé d'aller plus loin dans vos développements Web. En portant votre choix sur jQuery, je peux vous certifier que vous avez fait le bon choix. Si aujourd'hui de plus en plus d'entreprises l'utilisent pour leur site Web, ce n'est pas par hasard. Tournez vite les pages et devenez, vous aussi, un inconditionnel de jQuery. Et surtout, amusez-vous bien !

Le logo de jQuery
Le logo de jQuery

Avant de commencer

Historique du Web : de HTML à jQuery

Si vous vous intéressez un tant soit peu à la création de sites Web, vous avez forcément entendu parler de jQuery et vous connaissez certainement plusieurs personnes qui vantent ses mérites. Mais voilà, vous pensez que seuls les experts peuvent en tirer quelque chose, et vous avez peur de ne pas avoir le niveau nécessaire ! Je vous rassure tout de suite : jQuery est loin d'être inabordable, surtout si vous avez quelques notions (même sommaires) de HTML, CSS et JavaScript.

Mais au fait, qu'est-ce que jQuery ? Comment est-il apparu ? Comment vous le procurer ? De quel environnement matériel et logiciel avez-vous besoin pour développer en jQuery ? Autant de questions qui trouveront une réponse dans ce premier chapitre.

Historique du Web : de HTML à jQuery

Avant de commencer Qu'est-ce que jQuery ?

Historique du Web : de HTML à jQuery

Certains d'entre vous ont certainement connu le monde de la micro-informatique avant l'avènement d'Internet. À cette époque, les ordinateurs évoluaient en solo et les ouvrages papier étaient légion. Aujourd'hui, nous vivons dans un monde interconnecté, où l'information ne se trouve plus dans l'ordinateur, la tablette ou le téléphone, mais sur un vaste réseau planétaire dont la capacité de stockage a de quoi donner le vertige ! Tout ce petit monde communique en utilisant des langages informatiques spécifiques, tels que HTML, CSS, JavaScript, PHP, MySQL, etc.

Pour bien comprendre le fonctionnement de jQuery, il est important d'avoir à l'esprit la technique client-serveur, utilisée pour échanger des informations sur le Web. Le terme « client » désigne tout ordinateur, tablette, téléphone ou autre périphérique qui consomme des données. Inversement, le terme « serveur » désigne tout ordinateur qui délivre des données. Ainsi, lorsque vous tapez une adresse dans votre navigateur, vous utilisez un client Web. Ce client envoie une demande d'informations au serveur correspondant. Les informations sont recherchées sur le serveur, acheminées jusqu'au client et finalement affichées dans le navigateur, comme le montre la figure suivante.

Fonctionnement entre un serveur et des clients
Fonctionnement entre un serveur et des clients

Mais pourquoi est-ce que je vous parle de cela, me direz-vous ? Eh bien, parce qu'il est important de comprendre que le code jQuery s'exécute côté client. Dans la plupart des cas, il n'y aura aucun échange avec un serveur et donc quasiment aucun délai entre le début et la fin de l'exécution du code jQuery. Ce que je viens de dire est à prendre avec des pincettes. En effet, un code jQuery mal écrit et/ou non optimisé peut nécessiter de nombreuses secondes (voire minutes !) pour s'exécuter. Ce qu'il faut retenir de cela, c'est qu'avec jQuery vous n'êtes pas soumis à la disponibilité d'un quelconque serveur et qu'en général les temps d'exécution sont vraiment très courts.

Vous savez maintenant à quoi correspond le modèle client-serveur. Je peux donc poursuivre en parlant de HTML, JavaScript, AJAX et jQuery :

J'espère que je ne vous ai pas trop ennuyés avec cette énumération. Mais je pense que c'était une étape nécessaire pour comprendre comment jQuery se positionne dans le petit monde de la programmation Web. L'image suivante schématise ce qui vient d'être dit afin de bien matérialiser les choses.

Fonctionnement de jQuery
Fonctionnement de jQuery

Ce schéma suppose qu'une page Web est affichée sur l'ordinateur, la tablette ou le téléphone client (1). Le code jQuery peut mettre à jour la page sans accéder au serveur. Mais il peut également mettre à jour la page en demandant l'aide du serveur. Il se comporte alors comme du code AJAX (2 et 3).

Fatigué(e) de lire sur un écran ? Découvrez ce cours en livre.

Avant de commencer Qu'est-ce que jQuery ?

Qu'est-ce que jQuery ?

Historique du Web : de HTML à jQuery Ce qui rend jQuery si puissant et universel

Qu'est-ce que jQuery ?

Si vous avez lu ce qui précède, vous savez que jQuery est une bibliothèque qui permet d'agir sur le code HTML, CSS, JavaScript et AJAX. Tout ceci est parfaitement exact, mais un peu vague. Précisons les choses : jQuery permet de manipuler les éléments mis en place en HTML (textes, images, liens, vidéos, etc.) et mis en forme en CSS (position, taille, couleur, transparence, etc.) en utilisant des instructions simples qui donnent accès aux immenses possibilités de JavaScript et d'AJAX. Mais alors, pourquoi ne pas utiliser directement JavaScript et AJAX, me direz-vous ? Ceux qui se posent cette question n'ont certainement jamais tenté l'aventure. JavaScript et AJAX sont certes puissants, mais également très … susceptibles dans leur syntaxe et vraiment très verbeux. Entendez par là :

  1. Que toute erreur insignifiante dans la syntaxe provoque généralement la non-exécution de l'instruction correspondante.

  2. Qu'il est souvent nécessaire d'écrire de nombreuses lignes pour faire un simple petit traitement !

Heureusement, la devise de jQuery est « Write less, do more », ce qui signifie « Écrivez moins pour faire plus ». Cela devrait convenir à bon nombre de programmeurs. En effet, en écrivant moins de code, les erreurs seront moins fréquentes. Qui s'en plaindrait ?

Le logo de jQuery avec son slogan
Le logo de jQuery avec son slogan

S'il est vrai que la syntaxe utilisée en jQuery a de quoi laisser perplexe de prime abord, vous verrez qu'elle est logique, facile à mettre en œuvre, et qu'elle devient vite une seconde nature pour le programmeur. Et pour vous mettre un peu plus l'eau à la bouche, sachez qu'une seule instruction jQuery peut remplacer plusieurs dizaines d'instructions JavaScript !

Vous devriez normalement avoir un éditeur de code ou un logiciel FTP avec lequel vous avez l'habitude de travailler. jQuery ne change rien à tout ça, vous pouvez continuer à les utiliser. Essayez de tester vos codes avec le plus de navigateurs possibles, en tout cas les gros du marché (Firefox, Chrome, Internet Explorer, Safari, Opera). Enfin, n'hésitez pas à visiter les deux liens ci-dessous :

Fatigué(e) de lire sur un écran ? Découvrez ce cours en livre.

Historique du Web : de HTML à jQuery Ce qui rend jQuery si puissant et universel

Ce qui rend jQuery si puissant et universel

Qu'est-ce que jQuery ? Installer jQuery

Ce qui rend jQuery si puissant et universel

Le langage JavaScript est né en 1995. Depuis lors, son implémentation dans les différents navigateurs du marché s'est faite d'une façon plutôt anarchique : au fil des différentes versions (tant du langage que des navigateurs), certaines fonctionnalités ont été retenues, d'autres non. C'est ainsi qu'une même instruction JavaScript peut être reconnue dans un navigateur et pas dans un autre, voire même dans une certaine version d'un navigateur et pas dans une autre. Quel casse-tête pour le programmeur !

Heureusement, jQuery vient à la rescousse : en définissant son propre jeu d'instructions, il agit comme une surcouche aux différentes versions de JavaScript, qu'elles soient existantes ou à venir. D'autre part, il tient compte des navigateurs présents sur le marché, de leurs multiples versions et de leur compatibilité avec les instructions des langages JavaScript et AJAX.

Pour qu'un traitement écrit en JavaScript s'exécute correctement sur les différentes versions de chaque navigateur, le programmeur doit mettre en place une batterie de tests et exécuter un code spécifique à chaque navigateur et à chaque version, comme schématisé dans la figure suivante.

Un code JavaScript classique doit s'adapter à chaque navigateur
Un code JavaScript classique doit s'adapter à chaque navigateur

En jQuery, ces tests sont inutiles : il suffit d'exécuter les instructions nécessaires, sans se préoccuper du navigateur utilisé, ni de la version du langage JavaScript compatible avec ce navigateur. Le cas échéant, tous ces tests sont réalisés de façon transparente par jQuery. En ce qui vous concerne, vous n'avez qu'à vous préoccuper du code.

Mais que se passe-t-il lorsqu'une nouvelle version de JavaScript voit le jour ? Eh bien, les instructions jQuery sont complétées en conséquence. Vous pouvez continuer à utiliser les instructions avec lesquelles vous avez l'habitude de travailler et/ou consulter la documentation sur les nouvelles instructions disponibles. Quelle que soit votre démarche, toutes les instructions jQuery utilisées fonctionneront dans tous les navigateurs disponibles. Cette approche est un vrai bonheur pour le programmeur, qu'il soit néophyte ou confirmé.
J'ajouterai quelques autres détails qui vont à coup sûr vous convaincre que vous avez fait le bon choix en décidant de vous mettre à l'apprentissage de jQuery :

Bienvenue dans le monde merveilleux de jQuery !

Fatigué(e) de lire sur un écran ? Découvrez ce cours en livre.

Qu'est-ce que jQuery ? Installer jQuery

Installer jQuery

Ce qui rend jQuery si puissant et universel Premiers pas

Installer jQuery

jQuery est une bibliothèque JavaScript. En d'autres termes, un fichier d'extension .js. Pour l'utiliser dans une page HTML, il vous suffit d'y faire référence en utilisant une balise <script>, comme ceci :

<script src="jquery.js"></script>

Dans cet exemple, l'attribut src vaut jquery.js. Comme vous pouvez le voir, l'emplacement du fichier n'est pas précisé dans l'attribut. Cela signifie qu'il devra se trouver dans le même dossier que le document HTML.

Mais le fichier jquery.js n'est pas sur mon ordinateur. Est-ce que ce code va quand même fonctionner ?

Eh bien non ! Si vous utilisez l'instruction précédente, la bibliothèque jQuery ne sera pas utilisable. Deux solutions s'offrent à vous :

  1. Si votre ordinateur n'est pas toujours relié à Internet et/ou si votre connexion Internet n'est pas rapide, vous pouvez télécharger la bibliothèque jQuery dans un dossier quelconque et y faire référence localement.

  2. Si votre ordinateur est toujours connecté à Internet, vous pouvez faire référence à la bibliothèque jQuery en indiquant une adresse Web.

Examinons ces deux solutions.

Téléchargement de jQuery sur votre ordinateur

Rendez-vous sur le site de jQuery et téléchargez la dernière version en date en cliquant sur le lien jquery.js, dans le cadre Recent Stable Versions, comme à la figure suivante..

Téléchargement de jQuery sur le site officiel
Téléchargement de jQuery sur le site officiel

Si vous utilisez Internet Explorer, la boîte de dialogue Afficher les téléchargements indique que l'éditeur du fichier jquery.js n'a pas pu être vérifié, comme à l'image suivante.

Internet Explorer envoie une alerte lors du téléchargement
Internet Explorer envoie une alerte lors du téléchargement

N'ayez crainte, le fichier jquery.js est sans danger s'il est téléchargé depuis le site officiel.

Sur le site officiel, deux versions de la bibliothèque jQuery sont proposées : jquery.js et jquery.min.js. Pourquoi a-t-on choisi la première version ? La deuxième est-elle moins complète ?

Ces deux fichiers sont strictement identiques d'un point de vue fonctionnel. Par contre, le deuxième a une taille inférieure au premier. Pour cela, les espaces, tabulations, et commentaires y ont été supprimés, et les noms des variables et des fonctions ont été raccourcis, comme le montre la figure suivante.

À gauche le code avec espaces, tabulations et commentaires, à droite sans
À gauche le code avec espaces, tabulations et commentaires, à droite sans

En règle générale, vous utiliserez le fichier jquery.js en développement et le fichier jquery.min.js en production, c'est-à-dire lorsque votre code aura été testé, débogué et placé sur le Web.

Rendez-vous dans le dossier de téléchargement et déplacez le fichier jquery.js dans le dossier où vous développerez vos codes jQuery. À l'image suivante par exemple, le fichier est déplacé dans le dossier data\Site du Zéro\jQuery\dev.

Le fichier est déplacé dans le dossier de développement
Le fichier est déplacé dans le dossier de développement
Faire référence à jQuery en ligne

Le plus simple consiste à faire référence au fichier jquery.js sur un CDN (pour Content Delivery Network). Constitués d'ordinateurs reliés en réseau via Internet, ces éléments d'infrastructure coopèrent pour mettre à disposition aussi vite que possible la bibliothèque jQuery. Vous pouvez utiliser les CDN jQuery, Google ou Microsoft. Voici les adresses correspondantes :

CDN

Version non minimisée

Version minimisée

jQuery

http://code.jquery.com/jquery.js

http://code.jquery.com/jquery.min.js

Google

http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js

http://ajax.googleapis.com/ajax/libs/j [...] jquery.min.js

Microsoft

http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.js

http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js

L'utilisation d'un CDN est intéressante en production, c'est-à-dire lorsque votre code jQuery a été testé et est hébergé sur un serveur Web. En effet, en faisant référence à un fichier externe à votre site, vous n'entamez pas sa bande passante. D'autre part, étant donné que les CDN ont une grande bande passante, ils sont très réactifs. Enfin, le fichier jquery.min.js issu d'un CDN est bien souvent déjà présent dans la mémoire cache du navigateur. Ces trois raisons font que votre page se chargera plus rapidement.

Par contre, en phase de développement, c'est-à-dire lorsque vous mettez au point votre code jQuery sur votre ordinateur local, je vous conseille de télécharger le fichier jquery.js et d'y faire référence localement. En effet, même si les CDN ont une excellente bande passante, l'utilisation d'un fichier local sera bien plus rapide.

Fatigué(e) de lire sur un écran ? Découvrez ce cours en livre.

Ce qui rend jQuery si puissant et universel Premiers pas

Premiers pas

Installer jQuery Le vocabulaire à connaître

Vous êtes maintenant équipés pour développer en jQuery et vous brûlez d'écrire vos premières lignes de code. Ce chapitre est là pour cela. Mais avant, je voudrais introduire le jargon technique qui sera utilisé tout au long de ce tutoriel. Dans ce chapitre, vous verrez que les pages Web qui utilisent des instructions jQuery sont construites selon un modèle bien précis. Le « squelette » présenté ici servira tout au long de ce cours.

Et enfin, vous ferez vos premiers pas en programmation jQuery en écrivant quelques lignes de code. Vous pourrez alors constater à quel point jQuery est concis et puissant. Bienvenue dans le monde de la programmation jQuery !

Le vocabulaire à connaître

Premiers pas Le squelette HTML typique

Le vocabulaire à connaître

Tout au long de ce tutoriel, nous utiliserons un jargon technique propre aux langages HTML, CSS, JavaScript et jQuery. Cette section va passer en revue les différents termes à connaître. Il n'est pas nécessaire de lire tout ce qui figure dans cette section (surtout que vous êtes censés connaître la plupart de ces termes). Sachez simplement qu'elle existe et reportez-vous-y lorsque vous rencontrez un terme dont la signification vous échappe. Si vous avez besoin d'une piqûre de rappel plus importante, je vous renvoie sur ces deux cours :

Balise

Aussi appelée élément ou tag, c'est l'entité de base du langage HTML. Les balises sont toujours encadrées par les caractères < et >. Par exemple <html> ou encore <body>. Les balises ouvertes doivent être fermées avec une balise fermante. Par exemple </html> ou encore </body>. Certaines balises peuvent être à la fois ouvrantes et fermantes. Dans ce cas, le caractère / apparaît avant le signe > de fin de balise. Par exemple, <img src="image.jpg" />.

Attribut

Outre leur nom, certaines balises HTML peuvent recevoir une ou plusieurs informations complémentaires. Ces informations sont des attributs. Toujours spécifiés dans la balise ouvrante, ils sont suivis d'un signe = et d'une valeur entre guillemets. Lorsqu'une balise contient plusieurs attributs, ils sont séparés par des espaces. La balise <img> du code <img src="jquery.jpg" alt="logo jQuery" id="imglogo" /> contient trois attributs : src, alt et id.

Block

Les balises HTML de type block sont affichées sur des lignes successives. Par exemple, si l'on définit deux balises <div> dans un document HTML, elles seront affichées l'une en dessous de l'autre. Les balises de type block peuvent être dimensionnées, et donc occuper un espace bien défini (hauteur et largeur) dans un document.

Inline

Les balises HTML de type inline sont affichées les unes à la suite des autres. Par exemple, si l'on définit deux balises <span> dans un document HTML, elles seront affichées sur une même ligne. Les balises de type inline ne peuvent pas être dimensionnées. Elles occupent un espace qui dépend de leur contenu.

Inline-block

C'est un mélange des types inline et block. Si on définit deux balises de type inline-block dans un document HTML, elles seront affichées l'une à la suite de l'autre (c'est le comportement des balises inline). Leur taille (largeur et hauteur) pourra également être définie (c'est le comportement des balises block).

Feuille de styles

C'est un document qui rassemble un ou plusieurs styles CSS qui définissent la mise en forme d'un document. Si la feuille de styles est interne à un document, les différents styles doivent être définis dans l'en-tête du document, entre les balises <style type="text/css"> et </style>. Si la feuille de styles est externe, vous devez définir les styles dans un fichier d'extension .css et y faire référence dans l'en-tête du document en utilisant une balise <link rel="stylesheet" type="text/css" href="feuille-de-styles.css" />. Ici, la feuille de styles a pour nom feuille-de-styles.css.

Propriétés CSS

Elles définissent les caractéristiques d'un style CSS. Elles sont précisées dans la feuille de styles, entre les accolades ouvrante et fermante qui suivent le nom du style. Dans l'exemple qui suit, color et margin sont des propriétés CSS :

li
{
  color: red;
  margin: 10px;
}
Sélecteur CSS

Pour définir une règle CSS, on utilise un sélecteur qui indique à quoi va se reporter la règle. Il peut s'agir d'un sélecteur de balise, de classe, d'identifiant, de pseudo-élément, voire même d'un sélecteur universel qui s'adresse à toutes les balises du document. Le tableau suivant montre quelques exemples pour mieux comprendre le fonctionnement des sélecteurs.

Sélecteur

Type

Se rapporte à

h2

Sélecteur de balise

Toutes les balises <h2>

.rouge

Sélecteur de classe

Toutes les balises de classe rouge

#grand

Sélecteur d'identifiant

La balise d'identifiant grand

:first-letter

Sélecteur de pseudo-élément

La première lettre d'un élément

.rouge:first-letter

Sélecteur de pseudo-élément d'une classe

La première lettre des balises de classe rouge

*

Sélecteur universel

Toutes les balises

W3C

Le World Wide Web Consortium (W3C), est un organisme de standardisation à but non lucratif, chargé de promouvoir la compatibilité des technologies du World Wide Web telles que HTML, XHTML, XML, RDF, CSS, PNG, SVG et SOAP.

DOM

Le Document Object Model est une structure de données qui représente un document HTML comme une arborescence. La racine de cet arbre est un nœud nommé document qui correspond grossièrement à la balise <html>. Tout aussi grossièrement, les balises HTML définies dans la page Web correspondent aux nœuds de l'arbre DOM et en constituent la structure. Le langage jQuery est en mesure d'interroger le DOM pour connaître les caractéristiques (attributs et valeurs HTML, propriétés et valeurs CSS) des balises qui constituent un document HTML, mais aussi de modifier ces éléments pour changer l'allure et/ou le contenu du document.

DTD

Le Document TYPE Declaration fait référence à la balise <!DOCTYPE>. Cette dernière doit apparaître en tête des documents HTML. Elle indique au navigateur les règles d'écriture utilisées dans le document. Dans ce cours, nous utiliserons systématiquement les règles d'écriture du langage HTML5. Le DTD correspondant sera <!DOCTYPE html>.

Jeu de caractères

Le jeu de caractères d'un document HTML est associé aux différents claviers nationaux. Pour indiquer au navigateur dans quel jeu de caractères vous travaillez, vous devez insérer une balise <meta charset=""> dans l'en-tête du document. Deux jeux de caractères sont essentiellement utilisés :

Selon vos besoins, vous utiliserez donc une balise <meta charset="ISO-8859-1"> ou <meta charset="UTF-8">.

Fonction jQuery

C'est le point d'entrée de la bibliothèque jQuery. Vous pouvez utiliser au choix l'instruction jQuery() ou son alias $(). Dans ce cours, nous utiliserons systématiquement l'alias pour limiter l'écriture.

Méthodes jQuery

La bibliothèque jQuery est constituée d'un ensemble de blocs de code autonomes appelés méthodes. Ce qui fait la puissance de cette bibliothèque, c'est avant tout la grande diversité des méthodes proposées. Pour exécuter une méthode jQuery, il suffit de préciser son nom à la suite d'un sélecteur en le séparant de ce dernier par un point : $(sélecteur).méthode(paramètres);.

Objet jQuery

On appelle « objet jQuery » l'entité retournée par la fonction jQuery, c'est-à-dire par $(). Cet objet représente un ensemble de zéro, un ou plusieurs éléments issus du document.

Fatigué(e) de lire sur un écran ? Découvrez ce cours en livre.

Premiers pas Le squelette HTML typique

Le squelette HTML typique

Le vocabulaire à connaître Attendre la disponibilité du DOM

Le squelette HTML typique

Nous allons voir le squelette typique d'un document HTML dans lequel on utilise du code jQuery. C'est à partir de ce squelette que tous les exemples de ce tutoriel seront construits. Vous trouverez ici toutes les informations nécessaires pour comprendre son agencement.

En fait, ce n'est pas un mais deux squelettes dont nous allons parler ici : un concernant le développement et un autre concernant la production. Une seule balise HTML les différencie, mais, comme nous allons le voir, cette balise fait une grande différence.

Squelette HTML en phase de développement

Voici les instructions qui seront typiquement utilisées dans tous nos exemples :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Le titre du document</title>
    <link rel="stylesheet" type="text/css" href="feuille-de-styles.css">
  </head>
  <body>
    <!-- Une ou plusieurs balises HTML pour définir le contenu du document -->
    <script src="jquery.js"></script>
    <script src="mon-script.js"></script>
  </body>
</html>

Je ne vais pas m'arrêter sur chacune de ces lignes, vous devriez être en mesure de les comprendre. Je vais cependant détailler un peu les lignes 10 et 11.

La ligne 10 fait référence à la bibliothèque jquery.js. Ici également, étant donné qu'aucun chemin n'est spécifié dans la valeur affectée à l'attribut src, le fichier jquery.js doit se trouver dans le même dossier que le document HTML. Je ne vais pas revenir sur comment le télécharger, reportez-vous au premier chapitre si vous avez besoin.

La ligne 11 fait référence à un fichier JavaScript externe à votre page dans lequel vous placerez tout le code jQuery en rapport avec le document.

Au final, on se retrouve donc avec quatre fichiers :

  1. Le document HTML lui-même ;

  2. La feuille de styles externe qui définit la mise en forme du document ;

  3. Le fichier jquery.js, qui contient la bibliothèque jQuery ;

  4. Un fichier JavaScript externe qui contient tout le code jQuery que vous développerez.

Quatre fichiers pour mettre en place quelques instructions jQuery ? N'est-ce pas un peu disproportionné ?

Eh bien… tout dépend si vous voulez « bricoler » ou si vous voulez programmer en jQuery. Effectivement, la tentation est grande de placer le code CSS et jQuery dans le document HTML, afin de n'utiliser que deux fichiers : le document HTML et la bibliothèque jQuery. D'autant plus que cela fonctionne. Mais imaginez que vous deviez réaliser un site Web contenant plusieurs dizaines de pages. En externalisant les codes CSS et jQuery, vous pourrez facilement les réutiliser et ainsi être gagnants sur plusieurs tableaux :

Squelette HTML en phase de production

Ça y est, votre code HTML/CSS/jQuery/JavaScript fonctionne à la perfection et vous êtes impatients de le tester en ligne. Avant d'utiliser un client FTP, assurez-vous que vous faites référence à la version minimisée de la bibliothèque jQuery et que vous la chargez sur un CDN. Ainsi, avec la version minimisée sur le CDN de Google, voici le code à utiliser :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Le titre du document</title>
    <link rel="stylesheet" type="text/css" href="feuille-de-styles.css">
  </head>
  <body>
    <!-- Une ou plusieurs balises HTML pour définir le contenu du document -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="mon-script.js"></script>
  </body>
</html>
Optimisation du code

Voici quelques recommandations qui augmenteront les performances des pages qui contiennent du code jQuery :

  1. Invoquez la bibliothèque jquery.js à la fin du document, avant la balise </body>.

  2. Insérez le code jQuery rattaché à la page dans un fichier annexe et faites référence à ce fichier juste après la balise qui indique où se trouve la bibliothèque jQuery.

Ces positions stratégiques optimisent le temps de chargement de la page. En effet, de nombreux navigateurs bloquent l'exécution du code qui suit une balise <script> jusqu'à ce que cette balise ait été chargée et exécutée. En plaçant les deux balises <script> juste avant la balise </body>, l'affichage de la page n'est pas « freiné » par le code jQuery.

Fatigué(e) de lire sur un écran ? Découvrez ce cours en livre.

Le vocabulaire à connaître Attendre la disponibilité du DOM

Attendre la disponibilité du DOM

Le squelette HTML typique Premier script : « Hello world »

Attendre la disponibilité du DOM

Le langage jQuery est utilisé pour manipuler (en lecture et en écriture) le DOM, c'est-à-dire l'arborescence du document. Imaginez que ces manipulations commencent alors que l'arbre n'a pas encore été entièrement obtenu. Cette situation erratique pourrait désorganiser l'affichage, produire des erreurs, voire même… bloquer le navigateur !

Pour éviter d'en arriver là, vous devez attendre que l'arbre soit complet. En jQuery, cela se traduit par le code suivant :

jQuery(document).ready(function() {
  // Ici, le DOM est entièrement défini
});

Cette écriture peut se simplifier en remplaçant jQuery par son alias, $, ce qui donne :

$(document).ready(function() {
  // Ici, le DOM est entièrement défini
});

Enfin, (document).ready peut être omis pour arriver au code suivant :

$(function() {
  // Ici, le DOM est entièrement défini
});

Ces trois instructions sont strictement équivalentes. En ce qui me concerne, j'utiliserai systématiquement la troisième tout au long de ce cours, car c'est la plus courte et la plus simple à écrire. Par contre, si vous consultez d'autres articles traitant de jQuery, vous trouverez parfois les deux autres formes.

Dans l'introduction, il a été dit que jQuery peut être utilisé pour interroger/modifier le DOM, mais aussi les styles CSS du document. L'instruction $(function() { s'assure que le DOM est entièrement défini. Mais qu'en est-il de la feuille de styles ?

Si vous avez fait référence à une feuille de styles entre les balises <head> et </head>, l'instruction $(function() { s'assure également que la feuille de styles est chargée. Vous pouvez donc l'interroger et la manipuler comme bon vous semble.

Fatigué(e) de lire sur un écran ? Découvrez ce cours en livre.

Le squelette HTML typique Premier script : « Hello world »

Premier script : « Hello world »

Attendre la disponibilité du DOM Sélection d'éléments

Premier script : « Hello world »

Il est une tradition bien ancrée lorsque l'on écrit un cours sur un langage de programmation : le premier exemple affiche un texte sur l'écran : « Hello world » ! Nous n'allons pas déroger à la règle. Prêts à relever le défi ?

Précédemment, j'ai plusieurs fois affirmé que jQuery était capable de manipuler les éléments du DOM. Eh bien maintenant, il est temps de le prouver. Pour cela, je vais définir une balise <span> dans le document, lui affecter un attribut id afin de l'identifier et modifier son contenu en jQuery.

hello-world.html :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World</title>
  </head>
  <body>
    Ce texte est affiché en HTML

    <span id="texteJQ"></span>
    <script src="jquery.js"></script>
    <script src="jq-hello-world.js"></script>
  </body>
</html>

Comme vous pouvez le constater, la ligne contenant une balise <link> a été enlevée de l'en-tête. En effet, l'utilisation d'une feuille de styles ne présente aucun intérêt dans cet exemple.
La ligne 12 fait référence au fichier JavaScript jq-hello-world.js. En voici le contenu :

$(function() {
  $('#texteJQ').html('Hello world. Ce texte est affiché par jQuery.');
});

Si vous n'avez pas la mémoire trop courte, vous reconnaissez certainement les lignes 1 et 3 qui attendent la disponibilité du DOM. La ligne 2, quant à elle, contient une instruction jQuery dont la syntaxe peut vous laisser perplexes. Décomposons-la pour mieux comprendre son fonctionnement :

Cette instruction sélectionne donc l'élément d'id texteJQ et y insère le texte « Hello world. Ce texte est affiché par jQuery. » Vous voyez, il n'y a rien de sorcier là-dedans.

Double-cliquez sur le fichier hello-world.html pour l'ouvrir dans votre navigateur. Vous devriez obtenir quelque chose ressemblant à l'image suivante.

Le fichier est ouvert dans Internet Explorer
Le fichier est ouvert dans Internet Explorer

Si chez vous rien ne s'affiche, vérifiez que :

Fatigué(e) de lire sur un écran ? Découvrez ce cours en livre.

Attendre la disponibilité du DOM Sélection d'éléments

Sélection d'éléments

Premier script : « Hello world » Fonctionnement de base de jQuery

Dans ce chapitre, vous allez commencer à entrevoir la puissance de jQuery en découvrant une de ses facettes : la sélection d'éléments. Après cette lecture, vous saurez sélectionner, modifier et obtenir la valeur de la plupart des éléments qui peuvent être rencontrés dans un document HTML.

Vous connaîtrez également la nature des objets retournés par les instructions jQuery et vous verrez comment réduire la taille du code jQuery en chaînant les méthodes utilisées sur un objet.

Fonctionnement de base de jQuery

Sélection d'éléments Sélection d'éléments

Fonctionnement de base de jQuery

jQuery repose sur une seule et unique fonction : jQuery(), ou son alias, $(). Cette fonction accepte un ou plusieurs paramètres et retourne un objet que nous appellerons « objet jQuery ». Les paramètres peuvent être d'un des types suivants :

Fatigué(e) de lire sur un écran ? Découvrez ce cours en livre.

Sélection d'éléments Sélection d'éléments

Sélection d'éléments

Fonctionnement de base de jQuery Notions indispensables

Sélection d'éléments

Une des grandes forces de jQuery est d’intégrer la syntaxe des sélecteurs CSS. Par cet intermédiaire, il est élémentaire de sélectionner les nœuds DOM qui nous intéressent, en utilisant la syntaxe $(sélection)sélection représente un sélecteur CSS.

En effet, jQuery est fortement lié à trois autres langages : HTML, CSS et JavaScript. CSS est un langage consacré à la mise en forme des documents écrits en HTML. Les sélecteurs CSS sont des mots et symboles qui permettent d'identifier les éléments contenus dans un document HTML. Par exemple, h2 représente les balises HTML <h2>, ou encore p représente les balises <p>. En utilisant un sélecteur CSS dans la première partie d'une instruction jQuery, le ou les éléments HTML correspondants seront sélectionnés. Par la suite, il suffira de leur appliquer une action pour modifier leur contenu ou leur apparence.

Avant de poursuivre, voici quelques sélecteurs CSS que vous devez avoir en mémoire :

Et maintenant, nous allons raisonner sur un exemple pour mieux comprendre comment utiliser les sélecteurs CSS.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Sélecteurs CSS</title>
  </head>
  <body>
    <ul class="rouge">
      <li class="impair">premier élément de la liste à puces</li>
      <li class="pair">deuxième élément de la liste à puces</li>
      <li class="impair">troisième élément de la liste à puces</li>
    </ul>
    <div>
      <ul class="bleu">
        <li class="impair">premier élément de la liste à puces</li>
        <li class="pair">deuxième élément de la liste à puces</li>
        <li class="impair">troisième élément de la liste à puces</li>
      </ul>
    </div>
    <ol class="rouge">
      <li>premier élément de la liste numérotée</li>
      <li>deuxième élément de la liste numérotée</li>
      <li>troisième élément de la liste numérotée</li>
    </ol>
    <script src="jquery.js"></script>
    <script>
      $(function() {
        // Insérer le code jQuery ici
      });
      </script>
  </body>
</html>

Le tableau suivant donne quelques exemples significatifs de sélecteurs et indique à quoi ils correspondent.

Sélecteur CSS

Sélecteur jQuery

Signification

ul

$('ul')

Les balises <ul>

ul.bleu

$('ul.bleu')

La balise <ul> de classe bleu

div ul

$('div ul')

La balise <ul> contenue dans la balise <div>

div ul li[class="pair"]

$('div ul li[class="pair"]')

La balise <li> contenue dans une balise <ul>, elle-même contenue dans une balise <div>, et dont l'attribut class vaut pair

li[class]

$('li[class]')

Les balises <li> qui possèdent un attribut class

li[class="impair"]

$('li[class="impair"]')

Les balises <li> qui possèdent un attribut class de valeur impair

*

$('*')

Toutes les balises du document

Quelle est la nature de l'objet retourné ?

Le résultat retourné par la fonction $() est un objet jQuery. Cet objet ressemble à un tableau : il a une propriété length et les éléments sélectionnés peuvent être accédés par un indice. Par exemple :

Pour accéder à un des éléments sélectionnés, précisez son indice entre crochets à la suite du sélecteur. Par exemple :

Appliquer une méthode à la sélection

Une fois qu'un ou plusieurs éléments ont été sélectionnés avec une instruction $(sélecteur), vous pouvez leur appliquer un traitement en exécutant une méthode jQuery. Pour cela, ajoutez un point après la parenthèse fermante et indiquez la méthode à utiliser :

$(sélecteur).action

… où $(sélecteur) sélectionne un ou plusieurs éléments dans le document et action effectue un traitement sur les éléments sélectionnés. Par exemple, pour écrire un message dans une balise <span> d'identifiant resultat, vous utiliserez quelque chose comme le code suivant :

$('#resultat').html('texte à écrire dans la balise span');
Fatigué(e) de lire sur un écran ? Découvrez ce cours en livre.

Fonctionnement de base de jQuery Notions indispensables

Notions indispensables

Sélection d'éléments Plus loin dans la sélection d'éléments

Notions indispensables

Je vais ici vous parler de deux notions indispensables : les fonctions de rappel et le chaînage de méthodes.

Fonctions de rappel

Une fonction de rappel (ou callback en anglais) est une fonction exécutée lorsqu'une autre fonction a terminé de s'exécuter. En jQuery, les fonctions de rappel sont essentiellement utilisées pour réaliser des animations et des appels AJAX. Nous reviendrons sur ces deux sujets dans la partie 3 du cours.

Juste pour vous mettre l'eau à la bouche, voici un exemple de fonction de rappel, appliquée aux éléments de classe rouge :

$(function() {
    $(".rouge").fadeOut("slow",function(){
      $(this).fadeIn("slow");
    }); 
});

Ce code fait disparaître puis réapparaître progressivement les balises de classe rouge.

Chaînage de méthodes

Le chaînage est un concept très puissant et pourtant simple à comprendre. Étant donné que les méthodes jQuery retournent un objet jQuery, il est possible de les « chaîner », c'est-à-dire de les exécuter les unes à la suite des autres.

À titre d'exemple, les deux premières instructions sont équivalentes à la troisième :

$('.rouge').css('background','red');
$('.rouge').css('color','yellow');

$('.rouge').css('background','red').css('color','yellow');

Nous n'avons pas encore étudié la méthode jQuery css(), mais je suis sûr qu'en observant la façon dont elle s'articule vous comprenez son fonctionnement. Cette méthode admet deux paramètres. Le premier est une propriété CSS et le deuxième, la valeur à affecter à cette propriété.

Ainsi par exemple, l'instruction $('.rouge').css('background','red'); affecte un arrière-plan (background) de couleur rouge (red) aux balises de classe rouge ($('.rouge')). L'instruction $('.rouge').css('color','yellow');, quant à elle, affecte la couleur jaune (yellow) aux balises de classe rouge.

En chaînant ces deux instructions, les balises de classe rouge ont un arrière-plan de couleur rouge et des caractères de couleur jaune. Et tout cela en une seule instruction !

Fatigué(e) de lire sur un écran ? Découvrez ce cours en livre.

Sélection d'éléments Plus loin dans la sélection d'éléments

Plus loin dans la sélection d'éléments

Notions indispensables Sélecteurs d'attributs

Vous avez appris à sélectionner des balises, des identifiants et des classes dans le code HTML d'une page Web. Ces types de sélections sont très utiles et vous les utiliserez fréquemment lors de vos développements jQuery.

Cependant, il est possible d'aller plus loin en sélectionnant encore plus finement les éléments du DOM. Ce chapitre va vous montrer comment sélectionner des éléments HTML en fonction de leurs attributs, comment limiter les éléments retournés en utilisant des pseudo-sélecteurs ou encore comment utiliser des sélecteurs spécialisés pour certains types d'éléments.

Vous apprendrez également à parcourir les éléments sélectionnés pour appliquer à chacun d'entre eux un traitement spécifique. Cette technique est très importante. Elle sera souvent utilisée dans les autres chapitres de ce cours.

Sélecteurs d'attributs

Plus loin dans la sélection d'éléments Sélecteurs hiérarchiques

Sélecteurs d'attributs

Arrivés à ce point dans la lecture du cours, vous savez sélectionner les éléments qui contiennent :

Le tableau suivant dresse la liste des sélecteurs d'attributs évolués auxquels nous allons nous intéresser.

Sélecteur

Éléments sélectionnés

['nom*="valeur"']

Éléments qui possèdent un attribut nom qui contient (partiellement ou totalement) la valeur spécifiée.

['nom~="valeur"']

Éléments qui possèdent un attribut nom qui contient la valeur spécifiée, délimité par des espaces.

['nom$="valeur"']

Éléments qui possèdent un attribut nom qui se termine par la valeur spécifiée.

['nom!="valeur"']

Éléments qui ne possèdent pas l'attribut nom, ou qui possèdent un attribut nom différent de la valeur spécifiée.

['nom^="valeur"']

Éléments qui possèdent un attribut nom qui commence par la valeur spécifiée.

Pour bien comprendre comment fonctionnent ces sélecteurs, nous allons travailler avec le code suivant :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Sélecteurs CSS</title>
  </head>
  <body>
    <img src="canard.jpg" title="animal canard" border="11">
    <img src="chat.jpg" title="animal chat" border="4">
    <img src="cheval.jpg" title="cheval" border="2">
    <img src="chien.jpg" title="animal chien"  border="8">
    <img src="girafe.jpg" title="girafe" border="4">

    <script src="jquery.js"></script>
    <script>
      $(function() {
        // Le code jQuery sera inséré ici
      }); 
    </script>
  </body>
</html>

Le corps du document contient cinq balises <img>. Chacune d'entre elles a trois attributs : src, title et border. Nous allons utiliser plusieurs sélecteurs d'attribut évolués pour modifier la couleur de certaines bordures d'images. Après que les images ont été définies, une balise <script> fait référence à la bibliothèque jQuery et une autre délimite le code jQuery que nous allons écrire. L'instruction $(function() { attend la disponibilité du DOM. Les instructions jQuery seront placées à la place du commentaire.

L'image suivante est le résultat lorsqu'on exécute ce code dans Internet Explorer.

Le code exécuté dans Internet Explorer
Le code exécuté dans Internet Explorer

Nous allons tracer une bordure rouge autour de certaines images en utilisant la méthode jQuery css() suivante :

$('selecteur').css('border-color','red');

… où selecteur est un des sélecteur CSS du tableau suivant :

Critère

Sélecteur

Image modifiée

Image dont l'attribut border contient partiellement ou totalement la valeur « 1 ».

$('[border*="1"]')

1

Image dont l'attribut title contient le mot « animal » délimité par une espace.

$('[title~="animal"]')

1, 2, 4

Image dont l'attribut src se termine par « e.jpg ».

$('[src$="e.jpg"]')

5

Image qui ne possède pas un attribut border égal à « 15 ».

$('[border!="15"]')

1, 2, 3, 4, 5

Image dont l'attribut src commence par « ch ».

$('[src^="ch"]')

2, 3, 4

Fatigué(e) de lire sur un écran ? Découvrez ce cours en livre.

Plus loin dans la sélection d'éléments Sélecteurs hiérarchiques

Sélecteurs hiérarchiques

Sélecteurs d'attributs Pseudo-sélecteurs d'éléments sélectionnés

Sélecteurs hiérarchiques

Dans l'arborescence DOM, à l'exception de html, tous les éléments ont un parent, et certains éléments ont un ou plusieurs enfants. Cette section s'intéresse aux sélecteurs hiérarchiques, avec lesquels vous pourrez sélectionner les enfants d'un certain parent, l'énième enfant d'un parent, les enfants uniques, etc.

Sélecteur

Éléments sélectionnés

('p > e')

Éléments e directement descendants d'éléments p

('p + e')

Éléments e directement précédés d'un élément p

('p ~ e')

Éléments e précédés d'un élément p

:empty

Éléments qui n'ont pas d'enfant

:first-child

Premier enfant

:first

Premier élément

:last-child

Dernier enfant

:last

Le dernier élément de la sélection

:nth-child()

Élément qui est l'énième enfant de son parent

:only-child

Éléments qui sont enfants uniques de leur parent

Rien de tel qu'un peu de code pour bien comprendre comment fonctionnent ces sélecteurs. Ici, nous utiliserons des listes imbriquées :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Sélecteurs CSS</title>
  </head>
  <body>
    <div id="listes">
      <ul id="ul1">
        <li> Elément de liste 1
          <ul id="ul2">
            <li> Enfant 1</li>
            <li> Enfant 2</li>
          </ul>
        </li>
        <li> Elément de liste 2</li>
        <li> Elément de liste 3</li>
        <li> Elément de liste 4</li>
      </ul>
    </div>
  
    <script src="jquery.js"></script>
    <script>
      $(function() {
        // Le code jQuery sera inséré ici
      }); 
    </script>
  </body>
</html>

L'image suivante représente ce code exécuté dans Internet Explorer.

Le code précédent exécuté dans Internet Explorer
Le code précédent exécuté dans Internet Explorer

Nous allons afficher en rouge certains éléments de ces listes imbriquées en utilisant la méthode jQuery css() suivante :

$(function() {
    $('sel').css('color','red');
});

… où sel est un des sélecteur CSS du tableau suivant :

Critère

Sélecteur

Élément modifié

Éléments ul directement descendants d'éléments li

$('li > ul')

2, 3

Éléments li directement précédés d'un élément li

$('li + li')

3, 4, 5, 6

Premier élément li enfant

$('li:first-child')

1, 2, 3

Premier élément li

$('li:first')

1, 2, 3

Dernier élément li

$('li:last')

6

Dernier élément li enfant

$('li:last-child')

3, 6

Éléments li enfants uniques de leur parent

$('li:only-child')

aucun

Deuxième enfant li

$('li:nth-child(2)')

3, 4

Fatigué(e) de lire sur un écran ? Découvrez ce cours en livre.

Sélecteurs d'attributs Pseudo-sélecteurs d'éléments sélectionnés

Pseudo-sélecteurs d'éléments sélectionnés

Sélecteurs hiérarchiques Sélecteurs d'éléments particuliers

Pseudo-sélecteurs d'éléments sélectionnés

Lorsque vous utilisez un sélecteur CSS, un ou plusieurs éléments sont sélectionnés dans le DOM. En ajoutant un pseudo-sélecteur au sélecteur, vous allez pouvoir filtrer la sélection en ne conservant que les éléments pairs, impairs, ayant un certain index, etc. Regardez le tableau suivant :

Sélecteur

Éléments sélectionnés

:even

Éléments pairs

:odd

Éléments impairs

:eq()

Élément dont l'index est spécifié

:gt()

Éléments dont l'index est supérieur à (greater than) l'index spécifié

:lt()

Éléments dont l'index est inférieur à (lower than) l'index spécifié

Pour varier les plaisirs, nous allons effectuer des sélections dans une série de paragraphes. Voici le code HTML utilisé :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Sélecteurs CSS</title>
  </head>
  <body>
    <p>Paragraphe 1</p>
    <p>Paragraphe 2</p>
    <p>Paragraphe 3</p>
    <p>Paragraphe 4</p>
    <p>Paragraphe 5</p>

    <script src="jquery.js"></script>
    <script>
      $(function() {
        //Le code jQuery sera inséré ici
      }); 
    </script>
  </body>
</html>

Nous allons afficher en rouge certains éléments de ces listes imbriquées en utilisant la méthode jQuery css().

Critère

Sélecteur

Paragraphe modifié

Éléments p pairs

$('p:even')

1, 3, 5

Éléments p impairs

$('p:odd')

2, 4

Éléments p après le deuxième

$('p:gt(1)')

3, 4, 5

Élément p d'index 4

$('p:eq(3)')

4

Éléments p avant le quatrième

$('p:lt(3)')

1, 2, 3

Fatigué(e) de lire sur un écran ? Découvrez ce cours en livre.

Sélecteurs hiérarchiques Sélecteurs d'éléments particuliers

Sélecteurs d'éléments particuliers

Pseudo-sélecteurs d'éléments sélectionnés Pseudo-sélecteurs spécifiques aux formulaires

Sélecteurs d'éléments particuliers

Cette section s'intéresse à des sélecteurs propres à certaines balises ou difficilement classables dans les autres catégories. Regardez le tableau suivant :

Sélecteur

Éléments sélectionnés

:header

Tous les titres <h1> à <h6>

:hidden

Éléments cachés

:visible

Éléments visibles

:not()

Éléments qui ne correspondent pas au sélecteur spécifié

Voici le code utilisé pour tester ces sélecteurs :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Sélecteurs CSS</title>
  </head>
  <body>
    <h1>Titre de niveau 1</h1>
    <h2>Titre de niveau 2</h2>
    <h3>Titre de niveau 3</h3>
    <p>Un paragraphe de texte</p>
    <div>Texte dans une balise div</div>

    <script src="jquery.js"></script>
    <script>
      $(function() {
        $('div').hide();
        //Le code jQuery sera inséré ici
      }); 
    </script>
  </body>
</html>

Ligne 17, l'instruction jQuery dissimule la balise <div> à l'aide de la méthode hide(). Testez tour à tour les trois instructions jQuery suivantes :

Critère

Instruction jQuery

Effet

Sélection de tous les titres

$(':header').css('color','red');

Les titres <h1>, <h2> et <h3> sont affichés en rouge.

Affichage des éléments cachés

$('div:hidden').show();

L'élément div qui avait été caché à la ligne 17 est affiché.

Dissimulation de tous les titres sauf le titre <h1>

$(':header:not(h1)').hide();

Toutes les balises de titre sont cachées, à l'exception de la balise <h1>.

Fatigué(e) de lire sur un écran ? Découvrez ce cours en livre.

Pseudo-sélecteurs d'éléments sélectionnés Pseudo-sélecteurs spécifiques aux formulaires

Pseudo-sélecteurs spécifiques aux formulaires

Sélecteurs d'éléments particuliers Sélecteurs utilisés dans les tableaux

Pseudo-sélecteurs spécifiques aux formulaires

Les formulaires ont leur propre jeu de pseudo-sélecteurs CSS. En les utilisant, il est très simple de s'adresser à un élément ou un type d'élément en particulier. Regardez le tableau suivant :

Pseudo-sélecteur

Éléments sélectionnés

:input

Tous les éléments de type input, textarea, select et button

:button

Éléments de type button

:checkbox

Éléments de type checkbox

:checked

Éléments qui sont cochés

:radio

Éléments de type radio

:reset

Éléments de type reset

:image

Tous les boutons de type image

:submit

Éléments de type submit

:text

Éléments de type text

:password

Éléments de type password

:selected

Éléments sélectionnés

:focus

Sélectionne l'élément s'il a le focus

:enabled

Éléments validés

Pour illustrer ces pseudo-sélecteurs, nous allons utiliser un formulaire très classique contenant :

Voici le code :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Sélecteurs CSS</title>
  </head>
  <body>
    <form>
      Nom d'utilisateur
      <input type="text" name="nom"><br />

      Mot de passe
      <input type="password" name="pass"><br />

      Sexe
      Homme <input type="radio" name="sexe" value="H">
      Femme <input type="radio" name="sexe" value="F"><br />

      Commentaires
      <textarea rows="3" name="commentaires">Tapez vos commentaires ici</textarea><br />

      <input type="image" src="chat.jpg"><br />

      <input type="submit" value="Envoyer">
      <input type="reset" value="Annuler">
    </form> 

    <script src="jquery.js"></script>
    <script>
      $(function() {
        // Le code jQuery sera tapé ici
      }); 
    </script>
  </body>
</html>

Exécuté, ce code ressemble à l'image suivante :

Le code précédent exécuté dans Internet Explorer
Le code précédent exécuté dans Internet Explorer

Nous allons modifier la couleur d'arrière-plan de certains éléments du formulaire et modifier la taille du bouton image en utilisant quelques lignes de jQuery, comme au tableau suivant :

Action à accomplir

Instruction jQuery/JavaScript

Effet

Coloration de tous les champs de saisie

$(':input').css('background','yellow');

Les zones de texte, boutons radio et boutons ont un arrière-plan de couleur jaune.

Coloration d'un champ de saisie particulier

$(':password').css('background','yellow');

Le champ de type password a un arrière-plan de couleur jaune.

Redimensionnement d'un champ de type image

$(':image').css('width','100px');

Le champ input de type image est redimensionné pour avoir une largeur de 100 px.

Focus au premier champ de saisie et coloration en jaune

document.forms[0].nom.focus(); $(':focus').css('background','yellow');

La première instruction donne le focus au premier champ de saisie et la deuxième colore son arrière-plan en jaune.

Fatigué(e) de lire sur un écran ? Découvrez ce cours en livre.

Sélecteurs d'éléments particuliers Sélecteurs utilisés dans les tableaux

Sélecteurs utilisés dans les tableaux

Pseudo-sélecteurs spécifiques aux formulaires Parcourir les éléments sélectionnés

Sélecteurs utilisés dans les tableaux

Si les tableaux n'ont pas de sélecteurs spécifiques, plusieurs des sélecteurs évoqués dans les sections précédentes sont cependant bien pratiques pour mettre en forme rapidement des tableaux HTML.

Pseudo-sélecteur

Éléments sélectionnés

:first

Premier élément

:last

Dernier élément

:eq()

Élément dont l'index est spécifié

:gt()

Éléments dont l'index est supérieur à l'index spécifié

:lt()

Éléments dont l'index est inférieur à l'index spécifié

:even

Éléments d'index pair

:odd

Éléments d'index impair

:empty

Éléments qui n'ont pas d'enfant

:not()

Éléments qui ne correspondent pas au sélecteur spécifié

Nous allons mettre en application ces pseudo-sélecteurs en les appliquant sur le tableau défini en HTML que voici :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Sélecteurs CSS</title>
  </head>
  <body>
    <form>
      <table border=1>
      <tr><td></td><td>Salle 1</td><td>Salle 2</td></tr>
      <tr><td>Lundi</td><td>X</td><td>X</td></tr>
      <tr><td>Mardi</td><td></td><td></td></tr>
      <tr><td>Mercredi</td><td>X</td><td></td></tr>
      <tr><td>Jeudi</td><td></td><td>X</td></tr>
      <tr><td>Vendredi</td><td>X</td><td>X</td></tr>
      </table>
    </form> 

    <script src="jquery.js"></script>
    <script>
      $(function() {
        $('td').css('text-align','center');
        // Le code jQuery sera tapé ici
      }); 
    </script>
  </body>
</html>

Nous allons affecter la couleur jaune à l'arrière-plan de certaines cellules du tableau en utilisant la méthode jQuery css().

Action recherchée

Sélecteur

Coloration de la première cellule

$('td:first')

Coloration de la dernière ligne

$('tr:last')

Coloration des cellules vides

$(':empty')

Coloration des lignes paires

$('tr:even')

Coloration des cellules paires

$('td:even')

Coloration des lignes d'index supérieur à 2

$('tr:gt(1)')

Coloration des lignes d'index supérieur à 1 et inférieur à 5

$('tr:gt(0):lt(4)')

Coloration des cellules 5 à 11

$('td:gt(4):lt(10)')

Coloration de toutes les lignes à l'exception de la dernière

$('tr:not(tr:last)')

Fatigué(e) de lire sur un écran ? Découvrez ce cours en livre.

Pseudo-sélecteurs spécifiques aux formulaires Parcourir les éléments sélectionnés

Parcourir les éléments sélectionnés

Sélecteurs utilisés dans les tableaux Conversion jQuery/DOM

Parcourir les éléments sélectionnés

Tout au long de ce chapitre, vous avez vu qu'il suffisait d'appliquer une méthode jQuery aux éléments sélectionnés pour agir immédiatement sur ces éléments. Dans cette section, je vais vous montrer une autre façon d'interagir plus finement sur la sélection, en utilisant la méthode each().

Supposons par exemple que trois images soient affichées dans une page Web. Ces images sont repérées par leur chemin : images1/i1.jpg, images1/i2.jpg et images1/i3.jpg. Comment feriez-vous en jQuery pour que ces images soient lues dans le dossier images2 et non dans le dossier images1 ? Au risque de vous décevoir, c'est tout bonnement impossible avec vos connaissances actuelles en jQuery ! Pour résoudre cet exercice, il faudrait pouvoir agir de façon individuelle sur l'attribut src de chaque balise <img>.

Pour arriver à nos fins, nous allons utiliser la méthode each(), qui passe en revue les éléments sélectionnés par une requête jQuery et permet de les modifier en utilisant des instructions JavaScript. La syntaxe de la méthode each() est la suivante :

$('sel').each(function(index){
  //Une ou plusieurs instructions JavaScript
});

… où :

Jusqu'ici, rien de bien méchant ! Cependant, une question se pose : comment accéder à l'élément courant, c'est-à-dire à l'élément à modifier ? Pour cela, vous devez utiliser le mot this. Si vous avez suivi ce que j'ai dit un peu plus haut, la modification se fera via l'attribut src de la balise <img>. Eh bien, dans ce cas, vous utiliserez l'expression this.src.

Examinons le code suivant :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Sélecteurs CSS</title>
  </head>
  <body>
    <img src="images1/i1.jpg">
    <img src="images1/i2.jpg">
    <img src="images1/i3.jpg">
    
    <script src="jquery.js"></script>
    <script>
      $(function() {
        $('img').each(function(index){
          this.src = 'images2/i' + (index+1) + '.jpg';
        });  
      }); 
    </script>
  </body>
</html>

Nous retrouvons nos trois images, l'appel à jQuery ainsi que quelques instructions. Lorsque le DOM est disponible, les images du document sont sélectionnées avec le sélecteur img et les éléments sélectionnés sont parcourus avec la méthode each(). Une seule ligne est nécessaire pour modifier les adresses des images :

this.src = 'images2/i' + (index+1) + '.jpg';

Le terme this.src correspond à l'attribut src de la balise <img> en cours de traitement. Étant donné qu'il y a trois images à traiter, la variable index va prendre les valeurs 0, 1 puis 2. Le terme 'images2/i' + (index+1) + '.jpg' aura donc pour valeurs consécutives images2/i1.jpg, images2/i2.jpg et images2/i3.jpg, ce qui est exactement l'effet recherché.

Fatigué(e) de lire sur un écran ? Découvrez ce cours en livre.

Sélecteurs utilisés dans les tableaux Conversion jQuery/DOM

Conversion jQuery/DOM

Parcourir les éléments sélectionnés Modifier le contenu d'un élément

Conversion jQuery/DOM

Conversion d'un élément du DOM en un objet jQuery

Si vous avez suivi attentivement ce tutoriel, vous savez que le simple fait d'utiliser un sélecteur jQuery convertit un élément (ou un ensemble d'éléments) du DOM en un objet jQuery. Ainsi par exemple, l'instruction $('div') retourne un objet jQuery qui donne accès à toutes les balises <div> du document. La première balise <div> est alors accessible avec $("div")[0];, la deuxième avec $("div")[1];, et ainsi de suite.

Conversion d'une variable JavaScript en un objet jQuery

jQuery et JavaScript font bon ménage ensemble, et il est fréquent d'entremêler des instructions jQuery et des instructions JavaScript. Fatalement, un jour ou l'autre, vous voudrez convertir une variable JavaScript en un objet jQuery pour pouvoir lui appliquer les puissantes méthodes de ce langage. Eh bien, il n'y a rien de plus simple :

var variableJS = 'un simple texte';
var variableJQ = $(variableJS);

La première ligne crée une variable JavaScript en lui affectant un simple texte. La deuxième la convertit en un objet jQuery en « l'enveloppant » avec l'alias $().

Conversion d'un objet jQuery en un élément du DOM

Il est parfois nécessaire d'appliquer un traitement JavaScript à un objet jQuery. Étant donné que seules les méthodes jQuery peuvent être appliquées aux objets jQuery, une conversion jQuery vers DOM est alors nécessaire. Pour cela, vous appliquerez la méthode .get() à un sélecteur jQuery.

Par exemple, si un document contient plusieurs balises <span>, il est possible de les convertir en un tableau JavaScript avec l'instruction suivante :

var spans = $('span').get();

Ici, le tableau est stocké dans la variable JavaScript spans. La valeur stockée dans la première cellule du tableau est obtenue avec spans[0].innerHTML, la valeur stockée dans la deuxième cellule du tableau est obtenue avec spans[1].innerHTML, et ainsi de suite…

Fatigué(e) de lire sur un écran ? Découvrez ce cours en livre.

Parcourir les éléments sélectionnés Modifier le contenu d'un élément

Modifier le contenu d'un élément

Conversion jQuery/DOM Getters et setters

Arrivés à ce point dans la lecture du cours, vous savez sélectionner à peu près tout ce qui peut se trouver dans un document HTML. Vous vous sentez peut-être un peu frustrés : à quoi bon effectuer des sélections si vous n'en faites rien ! Vous avez tout à fait raison.

Ce chapitre va (enfin !) vous montrer comment agir sur les éléments sélectionnés pour les transformer. Vous pourrez ainsi modifier les attributs et les propriétés CSS des éléments sélectionnés, mais aussi ajouter, réorganiser et supprimer des éléments du DOM pour modifier l'agencement de la page sur laquelle vous travaillez.

Poursuivez vite la lecture et surtout… amusez-vous bien !

Getters et setters

Modifier le contenu d'un élément Accéder aux attributs HTML et aux propriétés CSS

Getters et setters

Plutôt que de différencier les méthodes chargées de lire (ces méthodes sont dites getters, de l'anglais to get qui signifie « obtenir ») et de modifier (ces méthodes sont dites setters, de l'anglais to set qui signifie « définir ») les valeurs HTML ou CSS, les concepteurs de jQuery ont choisi de leur donner le même nom. Mais alors, comment les différencier, me direz-vous ? C'est très simple, puisqu'il suffit d'observer les paramètres de la fonction. Raisonnons sur un exemple pour mieux comprendre de quoi il retourne. Observez les deux instructions suivantes :

$('h2').css('font-size');
$('h2').css('font-size','2em');

Dans la première instruction, aucune valeur n'est précisée. Il est impossible de modifier la valeur de la propriété CSS font-size. La première méthode est donc un getter ; elle retourne la valeur de la propriété font-size. Pour faciliter sa manipulation, vous pouvez la mémoriser dans une variable :

var taille = $('h2').css('font-size');

Dans la deuxième instruction, la valeur « 2em » est précisée dans les paramètres de la méthode css(). Cette valeur sera utilisée pour mettre à jour la propriété CSS font-size (ou la créer si elle n'existe pas) de tous les éléments retournés par le sélecteur. La deuxième méthode est donc un setter.

Ce qui vient d'être dit peut se généraliser à toutes les méthodes jQuery :

Ce que renvoie un getter

Un sélecteur jQuery peut retourner zéro, un ou plusieurs éléments. Lorsqu'aucun élément n'est retourné, le getter renvoie la valeur undefined (c'est-à-dire « non défini »). Lorsqu'un seul élément est retourné, le getter renvoie la valeur de cet élément. Enfin, lorsque plusieurs éléments sont retournés, le getter renvoie la valeur du premier élément.

Examinez le code suivant :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Sélecteurs CSS</title>
  </head>
  <body>
    <div id="listes">
      <a href="http://api.jquery.com">API jQuery</a><br>
      <a href="http://docs.jquery.com">Documentation jQuery</a><br>
    </div>

    <script src="jquery.js"></script>
    <script>
      $(function() {
        var test = $('a').attr('href');
        document.write(test);
      }); 
    </script>
  </body>
</html>

Deux liens hypertextes sont définis lignes 9 et 10. Le premier pointe sur la page http://api.jquery.com et le second sur la page http://docs.jquery.com. À la ligne 16, on utilise l'instruction jQuery $('a').attr('href') pour lire le contenu de l'attribut href des balises <a> contenues dans le document. L'objet retourné est stocké dans la variable test. La ligne 17 affiche cette variable. D'après vous, quelle valeur va s'afficher dans le navigateur ?

Comme il a été dit précédemment, dans le cas d'une réponse multiple, seule la première valeur est retournée par le getter. Ici, c'est donc l'adresse http://api.jquery.com qui s'affichera dans le navigateur.

Comme vous pouvez le voir, les deux balises <a> de ce document ne contiennent qu'un seul attribut : href. Si on utilisait l'instruction var test = $('a').attr('class');, la valeur retournée serait undefined.

Ce qui peut être passé à un setter

Les méthodes setters peuvent se présenter sous trois formes différentes :

$('#logo').attr('src','logo.gif');
$('#logo').attr({src: 'logo.gif', alt: 'Logo de la société', width: '200px'});
$("a").attr({target:function(){…}});

La première ligne se contente d'affecter la valeur « logo.gif » à l'attribut src de l'élément d'identifiant logo.
La deuxième ligne crée (s'ils n'existent pas) ou modifie (s'ils existent) plusieurs attributs dans l'élément d'identifiant logo. Ici, l'attribut src est initialisé avec la valeur « logo.gif », l'attribut alt avec la valeur « Logo de la société » et l'attribut width avec la valeur « 200px ».
Enfin, la troisième ligne utilise une fonction JavaScript pour créer ou modifier l'attribut target des balises <a> du document. Voici par exemple à quoi pourrait ressembler la fonction passée en deuxième argument de la méthode attr() :

$('a').attr('target', function() {
  if(this.host == location.host) return '_self'
  else return '_blank'
});

Si vous avez quelques rudiments de JavaScript, le code utilisé dans cette fonction ne devrait pas vous poser de problème. Dans le cas contraire, je vais décrire en détail les actions accomplies.

Si le lien (this.host) se trouve sur le même site que la page en cours (== location.host), l'attribut target est initialisé avec la valeur « _self » (return '_self'). Dans le cas contraire, l'attribut target est initialisé avec la valeur « _blank » (else return '_blank'). Une fois ces deux lignes exécutées, les liens hypertextes seront ouverts :

Fatigué(e) de lire sur un écran ? Découvrez ce cours en livre.

Modifier le contenu d'un élément Accéder aux attributs HTML et aux propriétés CSS

Accéder aux attributs HTML et aux propriétés CSS

Getters et setters Travailler avec l'attribut class

Accéder aux attributs HTML et aux propriétés CSS

Accéder aux attributs des balises HTML

Vous utiliserez la méthode attr() pour lire, créer et modifier les attributs des balises HTML. Voici quelques exemples :

Vous savez maintenant comment lire et comment créer/modifier un attribut d'une balise ou d'un ensemble de balises HTML.

Voyons maintenant comment supprimer un attribut dans une balise ou un ensemble de balises. Pour cela, vous utiliserez la méthode removeAttr() :

$(sel).removeAttr('attribut');

… où sel est un sélecteur jQuery et attribut est l'attribut que vous voulez supprimer. Cette méthode agit sur tous les éléments sélectionnés par le sélecteur jQuery. Par exemple, pour supprimer l'attribut href de toutes les balises <a> du document, vous utiliserez l'instruction suivante :

$('a').removeAttr('href');
Accéder aux propriétés CSS

Dans les chapitres précédents, nous avons utilisé à plusieurs reprises la méthode jQuery css() pour créer ou modifier les propriétés CSS des balises HTML. Cette méthode peut également être utilisée comme un getter, pour connaitre la valeur d'une propriété CSS. Par exemple, l'instruction suivante récupère la valeur stockée dans l'attribut font-size du premier élément de classe para et la stocke dans la variable taille :

var taille = $('.para').css('font-size');

Cette deuxième instruction affecte la valeur « 40px » à l'attribut font-size de tous les éléments de classe para :

$('.para').css('font-size', '40px');
Fatigué(e) de lire sur un écran ? Découvrez ce cours en livre.

Getters et setters Travailler avec l'attribut class

Travailler avec l'attribut class

Accéder aux attributs HTML et aux propriétés CSS Travailler avec les formulaires

Travailler avec l'attribut class

Comme tout programmeur (ou apprenti programmeur) Web, vous utilisez certainement l'attribut class pour donner la même apparence à plusieurs balises HTML. Pour accéder aux balises dont l'attribut class a une certaine valeur, il suffit de préciser cette valeur dans le sélecteur en la faisant précéder d'un point. Par exemple, pour sélectionner tous les éléments de classe vert, vous utiliserez le sélecteur jQuery $('.vert').

Ajouter et supprimer des classes

Trois méthodes consacrées aux classes vont vous permettre d'aller plus loin :

La théorie étant posée, nous allons l'expérimenter en utilisant le code suivant :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Manipulation de l'attribut class</title>
    <style type="text/css">
      .rouge { color: red; }
      .vert { color: green; }
      .petit { font-size: 100%; }
      .grand {font-size: 250%; }
    </style>
  </head>
  <body>
    <span id="jean" class="rouge grand">Jean</span>

    <span id="pierre">Pierre</span>

    <span id="paul" class="vert grand">Paul</span>

    <span id="julia">Julia</span>

    <span id="eric" class="vert">Eric</span>

    <span id="kevin" >Kévin</span>

    
    <script src="jquery.js"></script>
    <script>
      $(function() {
        // Ajouter le code jQuery ici
      }); 
    </script>
  </body>
</html>

Les lignes 6 à 11 définissent quatre styles :

Les lignes 14 à 19 affichent six prénoms par l'intermédiaire de balises <span>. Chaque balise a un identifiant unique, et certaines balises ont un attribut class initialisé avec une ou deux classes.

Pour l'instant, aucun code jQuery n'a été inséré dans le document. L'image suivante montre à quoi il ressemble une fois affiché dans un navigateur.

Le code précédent exécuté dans Firefox
Le code précédent exécuté dans Firefox

Nous allons expérimenter les méthodes addClass(), removeClass() et toggleClass() en insérant du code jQuery ligne 30.

La balise <span> d'identifiant julia ne possède aucune classe. Le prénom Julia est donc affiché en caractères noirs de taille standard. Supposons que nous voulions les afficher en rouge ; le code à utiliser est le suivant :

$('#julia').addClass('rouge');

Supposons maintenant que le prénom Julia doive être affiché en grands caractères verts. Le code à utiliser est le suivant :

$('#julia').addClass('vert grand');

Nous allons maintenant travailler avec le prénom Eric. Ce prénom est affiché via une balise <span> de classe vert. Supposons que vous vouliez afficher le prénom Eric en rouge. L'instruction suivante n'a aucun effet :

$('#eric').addClass('rouge');

Avez-vous une idée de la raison de cet échec ? Cela vient d'un conflit entre la classe vert (existante) et la classe rouge (que l'on veut ajouter). Pour parvenir au résultat souhaité, il faudrait supprimer la classe existante et la remplacer par la classe rouge :

$('#eric').removeClass('vert').addClass('rouge');

La première méthode supprime la classe vert et la deuxième ajoute la classe rouge.

Supposons maintenant que vous vouliez afficher le prénom Paul en petits caractères de couleur rouge. La balise <span> correspondante utilise deux classes : vert et grand. Pour que le texte s'affiche en caractères rouges de taille standard, vous devez :

Voici l'instruction à utiliser :

$('#paul').removeClass('vert').addClass('rouge').removeClass('grand').addClass('petit');

En utilisant un autre identifiant dans le sélecteur, ce chaînage de quatre méthodes peut également s'appliquer à une quelconque balise <span> du document. Ainsi par exemple, cette instruction affiche le prénom Pierre en caractères rouges de taille standard :

$('#pierre').removeClass('vert').addClass('rouge').removeClass('grand').addClass('petit');

Les méthodes removeClass() et addClass() peuvent également être remplacées par la méthode toggleClass(). Ainsi, cette instruction affiche le prénom Paul en caractères rouges de petite taille :

$('#paul').toggleClass('vert').toggleClass('rouge').toggleClass('grand').toggleClass('petit');

Par contre, si vous l'appliquez au <span> d'identifiant eric, le prénom Eric est affiché en caractères rouges de grande taille :

Pour simplifier l'écriture, il est possible d'indiquer plusieurs classes séparées par des espaces dans les méthodes addclass(), removeclass() et toggleclass(). Ainsi par exemple, cette instruction :

$('#pierre').removeClass('vert').addClass('rouge').removeClass('grand').addClass('petit');

Peut être simplifiée comme suit :

$('#pierre').removeClass('vert grand').addClass('rouge petit');
Tester l'existence de classes

La méthode hasClass() permet de tester si la sélection est d'une certaine classe. Supposons par exemple que la balise <span> suivante soit définie :

<span id="jean" class="rouge grand">Jean</span><br />

L'instruction $('#jean').hasClass('rouge'); renverra la valeur true, car le <span> est de classe rouge. L'instruction $('#jean').hasClass('petit'); renverra la valeur false, car le <span> n'est pas de classe petit.

Ainsi, on pourra effectuer une action ou une autre en fonction de l'existence d'une classe :

if ($('#jean').hasClass('rouge'))
  alert('le span #jean est de classe rouge');
else
  alert('le span #jean n\'est pas de classe rouge');

Si vous devez tester l'appartenance à plusieurs classes, vous utiliserez la méthode is(). Raisonnons sur la balise <span> suivante :

<span id="jean" class="rouge grand">Jean</span><br />

L'instruction $('#jean').is('.grand.rouge'); renverra la valeur true, car le <span> est de classe grand et rouge. Par contre, l'instruction $('#jean').is('.petit.rouge'); renverra la valeur false, car le <span> n'est pas de classe petit. En enveloppant l'instruction jQuery par un if, vous pourrez effectuer une action ou une autre en fonction de l'existence de deux ou plusieurs classes :

if ($('#jean').is('.grand.rouge'))
  alert('le span #jean est de classe grand et rouge');
else
  alert('le span #jean n\'est pas de classe grand et/ou rouge');
Fatigué(e) de lire sur un écran ? Découvrez ce cours en livre.

Accéder aux attributs HTML et aux propriétés CSS Travailler avec les formulaires

Travailler avec les formulaires

Travailler avec l'attribut class Travailler avec les valeurs stockées dans des éléments

Travailler avec les formulaires

Vous utiliserez la méthode val() pour tester/modifier la valeur des zones de texte, boutons radio, cases à cocher, listes déroulantes et zones de liste contenues dans un document HTML. Pour vous montrer comment utiliser cette méthode, nous allons raisonner sur un exemple :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Sélecteurs CSS</title>
  </head>
  <body>
    <form>
      Nom d'utilisateur
      <input type="text" id="nom"><br />

      Mot de passe
      <input type="password" id="pass"><br />

      Sexe 
      H <input type="radio" id="sexe" name="H" value="H">
      F <input type="radio" id="sexe" name="F" value="F"><br />

      Fonction
      <select id="fonction">
        <option VALUE="etudiant">Etudiant</option>
        <option VALUE="ingenieur">Ingénieur</option>
        <option VALUE="enseignant">Enseignant</option>
        <option VALUE="retraite">Retraité</option>
        <option VALUE="autre">Autre</option>
      </select><br /><br />

      <input type="submit" id="envoyer" value="Envoyer">
      <input type="reset" id="annuler" value="Annuler">
    </form> 

    <script src="jquery.js"></script>
    <script>
      $(function() {
        // Entrer les instructions jQuery ici
      }); 
    </script>
  </body>
</html>

Ce code définit une zone de texte (nom), un mot de passe (pass), deux boutons radio (sexe), une liste déroulante (fonction), un bouton « Envoyer » (envoyer) et un bouton « Annuler » (annuler).

Le tableau suivant donne un aperçu des instructions que vous pouvez utiliser pour lire et modifier les données stockées dans le formulaire.

Instruction jQuery

Effet

$('#nom').val()

Lit le nom de l'utilisateur.

$('#pass').val()

Lit le mot de passe.

$(':radio[name="H"]:checked').val()

Lit l'état du bouton radio H. Renvoie true si le bouton est sélectionné, sinon false.

$('#fonction').val()

Lit l'élément sélectionné dans la liste déroulante.

$('#nom').val('Michel')

Écrit « Michel » dans la zone de texte Nom d'utilisateur.

$('#pass').val('abcde')

Écrit « abcde » dans la zone de texte Mot de passe.

$(':radio').val(['H']);

Sélectionne le bouton radio H.

$('#fonction').val('retraite')

Sélectionne Retraité dans la liste déroulante.

La syntaxe des instructions n'est pas complexe, mais rien de tel qu'un peu de pratique pour qu'elle ne vous pose plus aucun problème. Je vous suggère donc de vous entraîner à utiliser ces instructions en les tapant une à une sur la ligne 36 du code précédent !

Fatigué(e) de lire sur un écran ? Découvrez ce cours en livre.

Travailler avec l'attribut class Travailler avec les valeurs stockées dans des éléments

Travailler avec les valeurs stockées dans des éléments

Travailler avec les formulaires Position et taille des éléments

Travailler avec les valeurs stockées dans des éléments

Lorsque vous définissez un sélecteur jQuery, vous obtenez un objet jQuery qui fait référence à zéro, un ou plusieurs éléments. Si ces éléments contiennent des valeurs textuelles, vous pouvez les lire ou les modifier en utilisant deux méthodes jQuery :

Comme toujours, nous allons utiliser un exemple pour bien comprendre le fonctionnement de ces deux méthodes. Voici le code utilisé :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Valeurs stockées dans les éléments</title>
  </head>
  <body>
    <h1>Documentation jQuery</h1>
    <p><a href='http://docs.jquery.com'>Documentation officielle</a></p>
    <p><a href='http://api.jquery.com'>API jQuery</a></p>
    
    <script src="jquery.js"></script>
    <script>
      $(function() {
        // Entrer les instructions jQuery ici
      }); 
    </script>
  </body>
</html>

Le corps du document définit un titre de niveau 1 et deux paragraphes qui pointent vers la documentation officielle de jQuery et l'API jQuery. Pour récupérer le texte stocké dans les deux paragraphes, nous utiliserons l'instruction $('p').text();, et pour afficher ce texte sur l'écran nous utiliserons une boîte de dialogue : alert($('p').text());. Tapez cette instruction à la ligne 15 du code précédent, sauvegardez le document et affichez-le dans le navigateur de votre choix. L'image suivante vous montre le résultat sous Internet Explorer.

Une boîte de dialogue s'affiche
Une boîte de dialogue s'affiche

Comme vous pouvez le voir, l'instruction retourne les deux valeurs textuelles stockées dans les balises <p>. Ces deux valeurs sont placées l'une à la suite de l'autre. Pour accéder individuellement à la première et à la dernière valeur, le plus simple consiste à utiliser des pseudo-opérateurs :

var premier = $('p:first').text();
var dernier = $('p:last').text();

Si vous voulez accéder individuellement à chacune des valeurs, vous devez définir une fonction comme paramètre de la méthode text(), comme ceci : function(index, actuel), où index représente le numéro de la valeur en cours de traitement (à partir de 0), et actuel représente la valeur en cours de traitement.

À titre d'exemple, pour afficher la valeur contenue dans chaque paragraphe du document, vous pourriez utiliser le code suivant :

$('p').text(function(index,actuel) {
  alert('Paragraphe ' + (index+1) + ' : '+actuel);
});

Ce qui vous donnerait la figure suivante.

Affiche le code HTML du premier élément
Affiche le code HTML du premier élément

Vous savez maintenant récupérer sous forme de texte les valeurs stockées dans des éléments HTML. Pour en obtenir une forme HTML, remplacez la méthode text() par la méthode html(). Voici quelques-unes des instructions que vous pourriez utiliser :

Instructions

Résultat

alert($('p').html());

Affiche le code HTML du premier élément (voir image suivante).

alert($('p:first').html());

Affiche le code HTML du premier élément.

alert($('p:last').html());

Affiche le code HTML du dernier élément.

$('p').html(function(index,actuel) { alert('Paragraphe ' + (index+1) + ' : '+actuel);});

Affiche individuellement le code HTML de chaque élément.

En observant les deux premiers exemples de code dans le tableau précédent, vous vous demandez certainement si une erreur ne s'est pas glissée dans la colonne « Résultat ». En effet, est-ce que les instructions alert($('p').html()); et alert($('p:first').html()); seraient équivalentes et renverraient toutes deux le code HTML du premier élément ? Eh bien oui, ces deux instructions sont équivalentes car, contrairement à la méthode text(), html() ne balaie pas tous les éléments, mais se contente du premier.

Les méthodes text() et html() peuvent bien évidemment être utilisées en tant que setters. Par exemple, pour que le premier paragraphe du listing précédent pointe vers le moteur de recherche Google et non vers la documentation officielle de jQuery, vous utiliserez l'instruction suivante :

$('p:first').html('<a href="http://www.google.com">Moteur de recherche Google</a>');
Fatigué(e) de lire sur un écran ? Découvrez ce cours en livre.

Travailler avec les formulaires Position et taille des éléments

Position et taille des éléments

Travailler avec les valeurs stockées dans des éléments Associer des données aux balises

Position et taille des éléments

Je vais vous montrer comment connaître et modifier la position et les dimensions des éléments affichés dans une page Web.
Pour gérer la position des éléments dans une page HTML, vous utiliserez les méthodes suivantes :

Les positions retournées par ces méthodes ont deux composantes : l'abscisse left et l'ordonnée top. Vous utiliserez donc :

Pour montrer comment utiliser ces deux méthodes, nous allons utiliser le code suivant :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Valeurs stockées dans les éléments</title>
    <style type="text/css">
      #parent {
        width: 300px;
        height:300px;
        position: absolute;
        top: 100px;
        left: 200px;
        background-color: yellow;
      }
      
      #enfant {
        width: 100px;
        height:100px;
        position: absolute;
        top: 150px;
        left: 100px;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div id="parent">
      Texte dans le parent
      <div id="enfant">
        Texte dans l'enfant
      </div>
    </div>
    <span id="resultat"></span>    
    
    <script src="jquery.js"></script>
    <script>
      $(function() {
        // Entrer les instructions jQuery ici
      }); 
    </script>
  </body>
</html>

Le corps du document contient deux balises <div> imbriquées, d'identifiants respectifs parent et enfant :

<div id="parent">
  Texte dans le parent
  <div id="enfant">
    Texte dans l'enfant
  </div>
</div>

… ainsi qu'une balise <span> qui sera utilisée par la suite pour afficher les coordonnées des balises <div> :

<span id="resultat"></span>

Ces balises sont mises en forme par des règles CSS, entre les lignes 7 et 23. Les dimensions de la balise d'identifiant parent sont fixées à 300 pixels sur 300. Cette balise est positionnée de façon absolue à 100 pixels du bord supérieur et à 200 pixels du bord gauche de la page. Enfin, la couleur d'arrière-plan est jaune :

#parent {
  width: 300px;
  height:300px;
  position: absolute;
  top: 100px;
  left: 200px;
  background-color: yellow;
}

Les dimensions de la balise d'identifiant enfant sont fixées à 100 pixels sur 100. Cette balise est positionnée de façon absolue à 150 pixels du bord supérieur et à 100 pixels du bord gauche de son parent. Oui, vous avez bien lu, de son parent : la balise enfant étant imbriquée dans la balise parent, le terme absolute a une valeur toute… relative (sans vouloir faire un jeu de mots). En effet, le positionnement est bien absolu, si on se réfère à la balise parent et non au document dans son ensemble. Enfin, la couleur d'arrière-plan est rouge :

#enfant {
  width: 100px;
  height:100px;
  position: absolute;
  top: 150px;
  left: 100px;
  background-color: red;
}

Si vous affichez ce document dans votre navigateur, vous devriez obtenir l'image suivante.

Le code précédent exécuté dans Internet Explorer
Le code précédent exécuté dans Internet Explorer
Connaître la position des éléments sur la page

Nous allons ajouter quelques instructions jQuery à partir de la ligne 38 pour afficher les coordonnées absolues des deux balises <div> dans la balise <span> :

var posparent=$('#parent').offset();
var posenfant=$('#enfant').offset();
$('span').text('Parent : x=' + posparent.left + ', y=' + posparent.top + ' Enfant : x=' + posenfant.left + ', y=' + posenfant.top);

La ligne 1 utilise la méthode offset() pour connaître les coordonnées absolues de la balise <div>parent. Ces coordonnées sont mémorisées dans la variable posparent.
La ligne 2 est très proche de la ligne 1, à ceci près qu'elle mémorise les coordonnées absolues de la balise <div>enfant dans la variable posenfant.

La ligne 3 affiche les coordonnées absolues des balises parent et enfant dans la balise <span>. La méthode text() est utilisée pour insérer du texte dans la balise <span>. Les coordonnées left et top des balises parent et enfant sont extraites des variables posparent et posenfant. Par exemple, pour l'abscisse de la balise parent, on utilise posparent.left.

Pourquoi avoir défini les variables posparent et posenfant?

Deux objectifs ont motivé l'écriture de variables intermédiaires :

  1. L'instruction $('span').text() est ainsi allégée. En effet, il est plus court d'écrire posparent.left que $('#parent').offset().left. Si vous n'utilisiez pas de variables intermédiaires, l'instruction deviendrait :

    $('span').text('Parent : x=' + $('#parent').offset().left + ', y=' + $('#parent').offset().top + ' Enfant : x=' + $('#enfant').offset().left + ', y=' + $('#enfant').offset().top);
  2. L'instruction posparent.left s'exécute bien plus vite que l'instruction $('#parent').offset().left. Le code sera donc optimisé en utilisant des variables intermédiaires.

Une fois ces trois lignes de code insérées après la ligne 38, sauvegardez puis affichez le document dans un navigateur. L'image suivante représente ce que vous devriez obtenir.

Le code précédent a été modifié grâce à jQuery
Le code précédent a été modifié grâce à jQuery

Remplaçons les méthodes offset() par position(), sans toucher à l'affichage dans la balise <span> :

var posparent=$('#parent').position();
var posenfant=$('#enfant').position();
$('span').text('Parent : x=' + posparent.left + ', y=' + posparent.top + ' Enfant : x=' + posenfant.left + ', y=' + posenfant.top);

Les coordonnées renvoyées sont relatives au parent de chaque balise. Le parent de la balise #parent est le document. Elles ne devraient donc pas changer. Quant au parent de la balise #enfant, il s'agit de la balise #parent. Ses coordonnées seront donc relatives à cette balise.
Une fois le code modifié et sauvegardé, exécutez le fichier. Vous devriez obtenir l'image suivante.

Les coordonnées ont changé
Les coordonnées ont changé
Modifier la position des éléments

Nous avons vu que la méthode offset() pouvait être utilisée en tant que setter, et donc pouvait modifier les coordonnées absolues d'un élément. Pour cela, il suffit d'indiquer les nouvelles coordonnées dans les paramètres de la méthode offset(). Par exemple, pour afficher la balise <div>#enfant aux coordonnées absolues (100,100), voici le code à mettre en place :

var posenfant = $('#enfant').offset();
posenfant.top = 100;
posenfant.left = 100;
$('#enfant').offset(posenfant);

La première instruction crée un objet jQuery contenant les coordonnées absolues de la balise #enfant et le mémorise dans la balise posenfant. Les deux instructions suivantes définissent les nouvelles coordonnées et les affectent aux composantes top et left de l'objet posenfant. Enfin, la quatrième instruction utilise l'objet posenfant pour modifier les coordonnées absolues de la balise #enfant.

Connaître les dimensions des éléments

Examinez l'image suivante. Elle représente une balise <div> dans laquelle ont été définies :

Une balise <div> avec padding, margin et border
Une balise
avec padding, margin et border

Plusieurs méthodes jQuery permettent de connaître les dimensions et de redimensionner les éléments de type block :

Voyons comment utiliser ces méthodes en exploitant les propriétés CSS d'une balise <div>. Voici le code utilisé :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Manipulation de l'attribut class</title>
    <style type="text/css">
      div {
        width: 250px;
        height: 250px;
        background-color: #AEEE00;
        padding: 35px;
        margin: 35px;
        border-width : 6px;
        border-color: black;
        border-style: solid;
      }
    </style>
  </head>
  <body>
    <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    <span id="resultat"></span>
    
    <script src="jquery.js"></script>
    <script>
      $(function() {
        // Entrer les instructions jQuery ici
      });
    </script>
  </body>
</html>

Le corps du document accomplit deux actions :

  1. Mise en place d'une balise <div> et insertion d'un peu de texte dans cette balise.

  2. Mise en place d'une balise <span> d'identifiant #resultat, dans laquelle les dimensions de la balise <div> seront affichées.

Le style de la balise <div> est redéfini dans l'en-tête, entre les balises <style> et </style> :

Pour accéder aux dimensions de la balise <div>, nous allons insérer un peu de code jQuery après la ligne 30 :

var dimensions = 'width=' + $('div').width() + ', innerWidth=' + $('div').innerWidth() + ', outerWidth=' + $('div').outerWidth() + ', outerWidth(true)=' + $('div').outerWidth(true);
dimensions = dimensions + ', height=' + $('div').height() + ', innerHeight=' + $('div').innerHeight() + ', outerHeight=' + $('div').outerHeight() + ', outerHeight(true)=' + $('div').outerHeight(true);
$('#resultat').text(dimensions);

Les deux premières lignes obtiennent les dimensions de la balise <div> avec les méthodes width(), innerWidth(), outerWidth(), outerWidth(true), height(), innerheight(), outerHeight() et outerHeight(true). Ces informations sont mémorisées dans la variable dimensions. La troisième ligne affiche le contenu de la variable dimensions dans la balise <span> en utilisant la méthode jQuery text().

Le résultat se trouve à l'image suivante.

Les dimensions sont affichées sur la page
Les dimensions sont affichées sur la page

Aux imprécisions près, les valeurs retournées par les méthodes jQuery correspondent bien aux dimensions définies dans le style CSS de la balise <div> :

Méthode

Propriété(s) CSS

Valeur

width()

width

250

innerWidth()

width + padding gauche + padding droit

250 + 35 + 35 = 320

outerWidth()

width + padding gauche + padding droit + border gauche + border droit

250 + 35 + 35 + 6 + 6 = 332

outerWidth(true)

width + padding gauche + padding droit + border gauche + border droit + margin gauche + margin droit

250 + 35 + 35 + 6 + 6 + 35 + 37 = 402

height()

height

250

innerHeight()

height + padding supérieur + padding inférieur

250 + 35 + 35 = 320

outerHeight()

height + padding supérieur + padding inférieur + border supérieur + border inférieur

250 + 35 + 35 + 6 + 6 = 332

outerHeight(true)

height + padding supérieur + padding inférieur + border supérieur + border inférieur + margin supérieur + margin inférieur

250 + 35 + 35 + 6 + 6 + 35 + 35 = 402

Supposons maintenant que vous vouliez modifier les dimensions de la balise <div>. Vous utiliserez pour cela les méthodes width() et height() en tant que setters. Dans cet exemple, les dimensions de la balise <div> sont fixées à 400×200 pixels :

$('div').width('400px');
$('div').height('200px');
Fatigué(e) de lire sur un écran ? Découvrez ce cours en livre.

Travailler avec les valeurs stockées dans des éléments Associer des données aux balises

Associer des données aux balises

Position et taille des éléments Insérer et remplacer des éléments dans le DOM

Associer des données aux balises

Utilisée en setter, la méthode jQuery $.data() permet d'associer une ou plusieurs données textuelles à n'importe quel élément du DOM. Oui, vous avez bien lu ! Il peut s'agir de données complémentaires quelconques que vous retrouverez par la suite en utilisant la méthode $.data() en getter. Rassurez-vous, ces données ne surchargent pas la mémoire de l'ordinateur : elles sont détruites lorsque l'élément auquel elles sont liées est retiré du DOM ou lorsque la page Web change.

La syntaxe de cette méthode est un peu particulière. Supposons que vous vouliez associer une donnée unique à un élément, vous utiliserez la syntaxe suivante :

$.data(el, 'nom', nom_don: don);

… où :

Si vous voulez associer plusieurs données à un élément, vous utiliserez une syntaxe légèrement différente :

$.data(el, 'nom', {nom_don1: don1, nom_don2: don2, nom_don3: don3, etc.});

… où :

Pour retrouver une donnée associée à un élément, utilisez la syntaxe suivante :

var uneVariable = $.data(el,'nom').nom_don;

… où :

Si tout ceci est confus pour vous, un petit exemple va vous apporter la lumière ! Dans le code suivant, nous allons associer trois données à une balise <div>, retrouver ces données et les afficher dans trois balises <span> enfants du <div>. Voici le code :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Manipulation de l'attribut class</title>
  </head>
  <body>
  <div id="mondiv">
  Les valeurs stockées dans la balise &lt;div&gt; sont : <span id="sp1"></span>, <span id="sp2"></span> et <span id="sp3"></span>.
  </div>
    
    <script src="jquery.js"></script>
    <script>
      $(function() {
        var div = $('div')[0];
        $.data(div, 'mesValeurs', {premier: 'bonjour', deuxieme: 12, troisieme: 'http://www.siteduzero.com'});
        var val1 = $.data(div, 'mesValeurs').premier;
        var val2 = $.data(div, 'mesValeurs').deuxieme;
        var val3 = $.data(div, 'mesValeurs').troisieme;
        $('#sp1').text(val1);
        $('#sp2').text(val2);
        $('#sp3').text(val3);
        }); 
    </script>    
  </body>
</html>

Remarquez :

La partie intéressante du code se trouve entre les lignes 15 et 22.

Pour alléger l'écriture, la ligne 15 commence par stocker le premier élément div dans la variable div. Ainsi, il suffira d'écrire div à la place de $('div')[0] :

var div = $('div')[0];

La ligne 16 attache trois données nommées « premier », « deuxieme » et « troisieme » à la variable mesValeurs et relie cette variable à l'unique balise <div> du document. Remarquez les apostrophes utilisées autour des données textuelles « premier » et « troisieme » :

$.data(div, 'mesValeurs', {premier: 'bonjour', deuxieme: 12, troisieme: 'http://www.siteduzero.com'});

Les lignes 17 à 19 sont construites sur le même modèle. À titre d'exemple, la ligne 17 lit la valeur « premier » de la variable mesValeurs associée à la balise <div> et la mémorise dans la variable val1 :

var val1 = $.data(div, 'mesValeurs').premier;

Les lignes 20 à 22 insèrent les trois valeurs récupérées lignes 17 à 19 dans les balises <span>#sp1, #sp2 et #sp3 :

$('#sp1').text(val1);
$('#sp2').text(val2);
$('#sp3').text(val3);

Si vous exécutez ce code dans votre navigateur, vous devriez obtenir le même résultat qu'à l'image suivante.

Le code exécuté dans le navigateur
Le code exécuté dans le navigateur

Je vous ai dit que les données associées aux éléments ne surchargeaient pas la mémoire de l'ordinateur, car elles étaient détruites lorsque l'élément auquel elles sont liées est retiré du DOM, lorsque la page Web change ou que le navigateur est fermé.

Je voudrais vous parler d'une troisième technique, moins destructrice que les deux premières puisqu'elle se contente de supprimer les données associées à un élément sans supprimer l'élément et sans changer de page. Il s'agit de la méthode removeData() dont voici la syntaxe :

$.removeData(el,'nom');

… où :

Par exemple, pour supprimer la variable mesValeurs associée à la première (et unique d'ailleurs) balise <div> de l'exemple précédent, vous utiliserez les instructions suivantes :

var div = $('div')[0];
$.removeData(div, 'mesValeurs');

La première instruction définit la variable div et y stocke le premier élément <div>. La deuxième instruction supprime la variable mesValeurs qui était associée à première balise <div>.

Fatigué(e) de lire sur un écran ? Découvrez ce cours en livre.

Position et taille des éléments Insérer et remplacer des éléments dans le DOM

Insérer et remplacer des éléments dans le DOM

Associer des données aux balises Insérer du contenu

Nous allons ici nous intéresser à une autre facette de jQuery : la modification du DOM. Les méthodes qui vont être examinées permettent d'insérer, de remplacer et de supprimer des éléments quelconques dans le DOM, et ainsi de modifier le contenu de la page affichée dans le navigateur.

Insérer du contenu

Insérer et remplacer des éléments dans le DOM Remplacer des éléments

Insérer du contenu

Toutes les méthodes passées en revue dans cette section seront testées sur le code suivant :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Insertion, copie et suppression de données</title>
  </head>
  <body>
    <h2 id="un">Lorem ipsum</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
    <hr>

    <h2 id="deux">Lorem ipsum suite</h2>
    <p>
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <hr>

    <h2 id="trois">Liste à puces</h2>
    <ul>
      <li>Premier élément</li>
      <li>Deuxième élément</li>
      <li>Troisième élément</li>
      <li>Quatrième élément</li>
    </ul>      
    
    <script src="jquery.js"></script>
    <script>
      $(function() {
        // Insérer le code jQuery ici
        }); 
    </script>
  </body>
</html>

L'image suivante vous montre comment apparaît la page lorsqu'aucun code jQuery n'a été inséré.

La page HTML avant l'intervention du code jQuery
La page HTML avant l'intervention du code jQuery

Plusieurs méthodes très pratiques permettent d'insérer du contenu dans ou en dehors de la sélection (entendez par là des éléments retournés par le sélecteur jQuery) :

Voici quelques exemples d'utilisation de ces méthodes.

Ajout d'une espace et de trois astérisques à la suite de chaque titre <h2>
$('h2').append(' ***');
Ajout de trois astérisques et d'une espace avant chaque titre <h2>
$('h2').prepend('*** ');
Ajout d'une ligne de séparation horizontale avant le titre <h2> #trois
$('#trois').before('<hr>');
Insertion de deux sauts de ligne après chaque balise <hr>
$('hr').after('

');

Comme vous le voyez, c'est plutôt simple ! Passons donc à la suite.

Fatigué(e) de lire sur un écran ? Découvrez ce cours en livre.

Insérer et remplacer des éléments dans le DOM Remplacer des éléments

Remplacer des éléments

Insérer du contenu Insérer des éléments

Remplacer des éléments

Pour remplacer la sélection, utilisez la méthode replaceWith() en précisant le nouvel élément entre les parenthèses. Par exemple, pour remplacer les balises <hr> par des sauts de ligne, utilisez l'instruction suivante :

$('hr').replaceWith('
');

Une petite question à tout hasard : quelle instruction jQuery utiliseriez-vous pour remplacer tous les titres <h2> du document par des titres <h3> ?

Alors, une petite idée ? Peut-être avez-vous songé à cette instruction :

$('h2').replaceWith('<h3>');

Mais quelle déception lorsque vous avez affiché le document dans votre navigateur ! En effet, vous devriez avoir quelque chose ressemblant à l'image suivante.

La méthode replaceWith() n'a pas produit l'effet escompté
La méthode replaceWith() n'a pas produit l'effet escompté

Les titres <h2> ont tout bonnement disparu ! Comprenez-vous ce qui s'est passé ? Le sélecteur $('h2') ne s'est pas contenté de sélectionner les balises <h2>, mais également leur contenu et la balise fermante </h2>. Les trois titres de niveau 2 ont donc été remplacés par une balise <h3>, sans balise fermante, ce qui a provoqué leur disparition.

Mais alors, est-ce que nous nous trouvons face à la première lacune de jQuery ? Bien sûr que non ! La solution consiste à parcourir les éléments sélectionnés avec la méthode each() et à effectuer un remplacement replaceWith() personnalisé :

$('h2').each(function(){
  var elemH2 = $(this);
  elemH2.replaceWith('<h3>' + elemH2.text() + '</h3>');
});

La première ligne sélectionne tous les éléments <h2> du document ($.('h2')) et applique une fonction à chacun d'entre eux (each(function(){).

Pour limiter l'écriture et améliorer les performances du code, la deuxième ligne définit la variable elemH2 et y mémorise l'élément <h2> en cours de traitement.

La troisième ligne applique la méthode replaceWith() à l'élément jQuery en cours de traitement (elemH2.replaceWith) et le remplace par une balise ouvrante <h3>, suivie du texte contenu dans l'élément en cours de traitement (elemH2.text()) et d'une balise fermante </h3>.

La quatrième ligne met fin à la fonction et à la méthode each().

Fatigué(e) de lire sur un écran ? Découvrez ce cours en livre.

Insérer du contenu Insérer des éléments

Insérer des éléments

Remplacer des éléments Déplacer du contenu

Insérer des éléments

Vous avez précédemment appris à insérer du contenu dans ou en dehors des éléments sélectionnés par un sélecteur jQuery. Ici, je vais vous montrer comment insérer des éléments dans l'arborescence du DOM. Les méthodes utilisées sont les suivantes :

eai représente l'élément àinsérer et cible représente l'élément avant ou après lequel doit se faire l'insertion.

Peut-être vous demandez-vous si les méthodes appendTo() et insertAfter() ne sont pas équivalentes ? Et de même, si les méthodes prependTo() et insertBefore() ne sont pas équivalentes ?

Eh bien, appendTo() insère un élément à la fin de la cible, tout en restant à l'intérieur de cette dernière, alors que insertAfter() insère un élément après la cible.
D'une manière identique, prependTo() insère un élément au début de la cible tout en restant à l'intérieur de cette dernière, alors que insertBefore() insère un élément avant la cible.

Voici quelques exemples d'utilisation de ces méthodes pour mieux les comprendre (ces exemples se basent sur le code HTML présenté au début de ce chapitre). Les instructions jQuery sont insérées après la ligne 32.

Ajout d'un élément de liste à puces après le deuxième élément
$('<li>Deuxième élément bis</li>').insertAfter($('li:nth-child(2)'));

Le résultat se trouve à l'image suivante.

La puce « Deuxième élément bis » a été insérée après la puce « Deuxième élément »
La puce « Deuxième élément bis » a été insérée après la puce « Deuxième élément »
Ajout d'une balise <hr> avant chaque titre <h2>
$('<hr>').prependTo($('h2'));

Le résultat se trouve à l'image suivante.

Un séparateur horizontal a été inséré avant chaque titre de niveau 2
Un séparateur horizontal a été inséré avant chaque titre de niveau 2

Et maintenant, une simple petite question pour vous inciter à réfléchir sur la méthode prependTo(). D'après vous, que produit l'instruction suivante ?

$('<li>Deuxième élément bis</li>').prependTo($('li:nth-child(2)'));

Sans trop y réfléchir, vous pensez certainement qu'une puce « Deuxième élément bis » est ajoutée avant la puce « Deuxième élément ». Pourtant, si vous exécutez le code, vous obtenez l'image suivante.

L'effet de la méthode prependTo() n'est pas celui qui était attendu
L'effet de la méthode prependTo() n'est pas celui qui était attendu

D'où vient le problème ?

Rappelez-vous ce que j'ai dit à propos des différences entre les méthodes prependTo() et insertBefore(). La première effectue une insertion à l'intérieur de la cible et la deuxième avant la cible. Après l'exécution de l'instruction jQuery, le code HTML de la liste à puces est donc le suivant :

<ul>
  <li>Premier élément</li>
  <li><li>Deuxième élément bis</li>Deuxième élément</li>
  <li>Troisième élément</li>
  <li>Quatrième élément</li>
</ul>

Totalement incohérent d'un point de vue sémantique, ce code est mal interprété par le navigateur qui affiche… quelque chose d'assez inattendu ! Ne rejetez pas la faute sur lui : dans ce cas précis, la méthode insertBefore() était plus adaptée à la situation. ;)