Tutoriel : Simplifiez vos développements JavaScript avec 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.

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 :

• HTML est le langage de base du Web. Apparu en août 1991, il utilise un ensemble de balises pour décrire les données à afficher.

• CSS est un langage consacré à la mise en forme des contenus HTML. Apparu vers le milieu des années 90, c'est aujourd'hui un complément essentiel de tout site Web qui se respecte. Il assure l'uniformité des pages et facilite leur maintenance.

• JavaScript a été développé par Netscape en 1995. Il a vu le jour sous le nom « LiveScript » et a été utilisé pour la première fois dans Netscape 1.0. Ce n'est que lors de la sortie de Netscape 2.0 que le nom « JavaScript » est apparu. Exécuté côté client, il ajoute de l'interactivité aux pages Web.

• AJAX est également apparu en 1995. Son utilisation est très intéressante, car elle permet de mettre à jour une partie (et une partie seulement) d'une page Web en demandant les données nécessaires à un serveur. Les échanges client/serveur sont donc limités et les pages Web sont affichées plus rapidement, pour le plus grand plaisir des internautes.

• jQuery est une bibliothèque (c'est-à-dire un ensemble de codes prêts à l'emploi) conçue pour simplifier l'écriture de codes JavaScript et AJAX. Créée en 2006 par John Resig, cette bibliothèque est la plus célèbre et la plus utilisée à ce jour.

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.

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

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 ?

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 :

• La documentation officielle de jQuery ;

• Le forum de discussion consacré à jQuery, en anglais.

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.

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 :

• La documentation officielle est très fournie et de grande qualité ;

• La communauté qui gravite autour de jQuery est en perpétuelle expansion et elle fournit un support de qualité ;

• De nombreux acteurs de premier plan du Web (Microsoft, Google, Amazon, Twitter, Mozilla, etc.) utilisent jQuery ;

• Une foultitude de plugins est disponible afin d'augmenter les possibilités de base de jQuery.

Bienvenue dans le monde merveilleux de jQuery !

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.

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

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.

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

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.

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.

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 :

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.

• En règle générale, le code jQuery s'exécute sur les ordinateurs clients. Cependant, il peut parfois demander à un serveur de mettre à jour une partie d'une page en utilisant du code AJAX.

• La meilleure technique pour développer du code jQuery sur son ordinateur consiste à télécharger le fichier jquery.js, à le placer dans un dossier de son disque dur et à faire référence à ce fichier dans une balise <script>.

• Lorsque le code a été testé et débogué, vous le placerez sur un serveur Web avec votre client FTP et vous ferez référence au fichier jquery.min.js stocké sur un CDN pour améliorer les temps de réponse sans grignoter la bande passante de votre serveur.

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 :

• Apprenez à créer votre site web avec HTML5 et CSS3 écrit par Mathieu Nebra alias m@teo21

• Dynamisez vos sites web avec Javascript ! écrit par Sébastien de la Mark alias Thunderseb et Johann Pardanaud alias Nesquik69

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.

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 :

• ISO-8859-1 pour accéder à la majorité des caractères des langues occidentales, telles que le français, l'anglais, l'allemand, l'espagnol, etc.

• UTF-8 pour afficher sur une même page des caractères issus de plusieurs langues (français et japonais par exemple).

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.

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.

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 :

• Le temps de développement sera réduit d'autant ;

• Les risques d'erreurs seront minimisés, puisque le même code sera utilisé dans les différents documents HTML ;

• La maintenance sera d'autant facilitée : pour effectuer une modification dans tout le site, il vous suffira d'agir sur la feuille de styles externe et sur le fichier de code JavaScript externe. Si vous aviez internalisé le code de ces deux fichiers, vous auriez dû agir sur chacune des pages HTML du site !

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.

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.

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.

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 :

• $('#texteJQ') : cette partie agit comme un sélecteur. Elle retrouve dans le DOM l'élément dont l'attribut id vaut texteJQ. Pourquoi l'attribut id, me direz-vous ? Eh bien parce que, selon les conventions du langage CSS, le caractère # représente justement l'attribut id.

• html('Hello world. Ce texte est affiché par jQuery.'); : la deuxième partie indique ce qui doit être modifié. Dans cet exemple, on utilise la méthode html() pour demander la modification du contenu de la balise.

• Le point entre ces deux parties fait le lien entre le sélecteur et l'action.

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.

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

• Le fichier jquery.js se trouve bien dans le même dossier que le fichier hello-world.html.

• Vous n'avez oublié aucun guillemet, parenthèse ou accolade dans le fichier jq-hello-world.js.

• Le squelette d'un document qui utilise du code jQuery est différent en développement et en production. Dans le premier cas, vous ferez référence à la bibliothèque jquery.js localement. Dans le second, vous ferez référence à la bibliothèque jquery.min.js sur un CDN.

• Il est impératif d'attendre la disponibilité du DOM avant d'exécuter du code jQuery. Sans quoi, ce code pourrait s'appliquer à un élément indisponible et provoquer un comportement inattendu, voire même un plantage du navigateur.

• En jQuery, pour modifier le contenu d'une balise <span> dont l'attribut id vaut monid, on utilise l'instruction $("#monid").html("texte quelconque");.

• Pour optimiser le code d'un document HTML qui utilise une feuille de styles et du code jQuery, on place les styles et le code jQuery dans des fichiers externes. La feuille de styles est appelée dans l'en-tête du document, alors que le code jQuery est appelé juste avant la balise </body> et juste après la référence à la bibliothèque jQuery.

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 :

• Une fonction, qui sera exécutée dès que le DOM est disponible. Cette technique est très largement utilisée par tous les programmeurs jQuery.

• Un sélecteur CSS : l'élément (ou les éléments) qui correspondent au sélecteur sont retournés. Nous allons nous intéresser à cette technique dans ce chapitre.

• Un élément HTML, un document ou l'objet window : un objet jQuery correspondant à cet élément est retourné.

• Une (ou plusieurs) balise(s) HTML : un objet jQuery correspondant à cette (ces) balise(s) est retourné. Vous pouvez lui appliquer des méthodes jQuery, par exemple pour ajouter cette (ces) balise(s) dans un élément HTML.

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) où 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 :

• Un nom de balise, sans les caractères < et >, permet de sélectionner cette balise. Si plusieurs balises de même nom se trouvent dans le document, toutes ces balises sont sélectionnées. Par exemple, si le document contient plusieurs balises <div>, le sélecteur CSS div sélectionne toutes ces balises.

• Le signe # fait référence à l'attribut id (ou identifiant) d'une balise. Par exemple, si vous définissez la balise <p id="premier">, le sélecteur #premier sélectionne cette balise. Notez que deux balises ne peuvent pas avoir le même identifiant.

• Le point fait référence à l'attribut class d'une balise. Supposons que vous ayez défini la balise <h2 class="rouge">. Le sélecteur .rouge sélectionne cette balise. Plusieurs balises peuvent avoir la même classe. Un même traitement pourra donc être appliqué à ces deux balises.

• Pour différencier les balises <h2> de classe rouge des balises <p> de classe rouge, vous utiliserez les sélecteurs h2.rouge et p.rouge. Ce cas particulier s'applique à toutes les balises et toutes les classes. Ainsi, le sélecteur nom_balise.nom_classe permet de sélectionner les balises nom_balise de classe nom_classe.

• Supposons maintenant que vous ayez défini une liste à puces <ul></ul> et une liste numérotée <ol></ol>. Chacun des éléments des deux listes est repéré par des balises <li>. Pour différencier les éléments <li> de la liste à puces des éléments <li> de la liste numérotée, vous utiliserez un « sélecteur descendant ». Ainsi, le sélecteur ul li s'adresse à tous les éléments <li> de la liste à puces <ul>, et le sélecteur ol li s'adresse à tous les éléments <li> de la liste numérotée <ol>.

• Certaines balises HTML peuvent contenir un ou plusieurs attributs. Par exemple, la balise <img src="chien.jpg" width="40" height="30"> contient trois attributs : src, width et height. Pour sélectionner toutes les balises qui contiennent un attribut src, vous utiliserez le sélecteur [src].

• Vous pouvez même aller plus loin en sélectionnant les balises dont un attribut a une certaine valeur. Par exemple, pour sélectionner toutes les balises dont l'attribut width a pour valeur 40, vous utiliserez le sélecteur [width="40"].

• Le caractère * représente toutes les balises du document.

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.

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 :

• $('a').length retourne le nombre de liens hypertextes contenus dans la page.

• $('ul.bleu').length retourne le nombre de balises <ul> de classe bleu.

• $('li[class="impair"]').length retourne le nombre de balises <li> qui ont un attribut class de valeur impair.

• $('body').length retourne « 1 » car le document contient une seule balise <body>.

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

• $('a')[0] retourne le premier lien hypertexte de la page.

• $('ul.bleu')[3] retourne la quatrième balise <ul> de classe bleu.

• $('body')[0] est équivalent à document.body.

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');

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 !

• Le sélecteur jQuery $('sel') utilise la syntaxe CSS. En remplaçant sel par un sélecteur CSS quelconque, les éléments correspondants (s'ils existent) seront sélectionnés dans le DOM. Par exemple :

  • $('a') sélectionne tous les liens hypertextes ;

  • $('.rouge') sélectionne les éléments de classe rouge ;

  • $('#e2') sélectionne l'élément d'identifiant e2 ;

  • $('[src]') sélectionne tous les éléments qui possèdent un attribut src ;

  • $('[width="40"]') sélectionne tous les éléments qui ont un attribut width égal à 40.

• L'objet retourné par un sélecteur jQuery peut faire référence à plusieurs éléments. Pour accéder à un élément, vous pouvez préciser son index entre crochets, en ayant bien à l'esprit que le premier élément a un index égal à 0. Par exemple, le sélecteur $('a')[2] fait référence au troisième lien hypertexte contenu dans la page.

• Pour appliquer une méthode à un objet jQuery obtenu en utilisant un sélecteur, il suffit d'écrire cette méthode à droite du sélecteur en la séparant de ce dernier par un point. Par exemple, l'instruction suivante écrit en jaune tous les liens hypertextes contenus dans la page : $('a').css('color', 'yellow');.

• Pour chaîner deux méthodes jQuery, écrivez-les l'une à la suite de l'autre en les séparant par un point. Par exemple, cette instruction applique un arrière-plan de couleur rouge et un texte de couleur jaune aux éléments de classe rouge : $('.rouge').css('background','red').css('color','yellow');.

Sélecteurs d'attributs

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

• un attribut donné, en utilisant le sélecteur $('[nom]') ;

• un attribut donné qui a une certaine valeur, en utilisant le sélecteur $('[nom:valeur]').

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

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.

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 :

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.

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.

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 :

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 :

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

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 :

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 :

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 :

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

• une zone de texte ;

• un mot de passe ;

• deux boutons radio ;

• une zone de texte multiligne ;

• un bouton submit et un bouton reset ;

• un bouton image.

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 :

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 :

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.

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

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ù :

• sel est un sélecteur CSS, comme ceux que nous avons utilisés jusqu'ici ;

• index est une variable JavaScript qui représente la position de l'élément dans la sélection. Il aura pour valeurs consécutives 0, 1, 2, etc. jusqu'à ce que tous les éléments aient été passés en revue ;

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

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…

• Il est possible d'affiner la sélection d'éléments grâce aux sélecteurs d'attributs, aux pseudo-sélecteurs et aux sélecteurs hiérarchiques.

• Les formulaires ont leur propre jeu de pseudo-sélecteurs. Faciles à mémoriser, ils ont le nom des balises correspondantes et sont précédés d'un « : ».

• En utilisant un sélecteur jQuery, on obtient un objet jQuery qui contient zéro, un ou plusieurs éléments du DOM. On peut appliquer un traitement global à ces éléments en leur appliquant une méthode jQuery. Lorsqu'un traitement global n'est pas suffisant, on utilise une boucle each.

• Avec une boucle each, les différents éléments sélectionnés sont parcourus un à un. Ils sont repérés par leur index, dont le nom est spécifié en paramètre de la fonction. Le traitement est réalisé par une ou plusieurs instructions JavaScript.

• Il est parfois utile de convertir des objets jQuery en éléments du DOM et inversement. La transformation DOM vers jQuery se fait en utilisant un sélecteur, et éventuellement en le limitant à un des éléments retournés. Quant à la transformation jQuery vers DOM, elle repose sur l'utilisation de la méthode get().

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 :

• Si aucune valeur n'est précisée dans les arguments de la méthode, il s'agit d'un getter. La méthode retourne la valeur qui correspond au premier argument.

• Si une valeur est précisée dans les arguments de la méthode, il s'agit d'un setter. Le premier argument de la méthode est initialisé avec cette valeur. S'il n'existe pas, il est créé. S'il existe, il est modifié en conséquence.

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 :

• dans l'onglet courant du navigateur s'ils renvoient vers une page située dans le même nom de domaine que la page actuelle ;

• dans une autre fenêtre (ou un nouvel onglet) du navigateur s'ils se trouvent sur un autre nom de domaine.

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 :

• $('#plus').attr('src'); retourne l'attribut src de l'élément d'identifiant plus.

• $('div').attr('class'); retourne l'attribut class du premier <div>.

• $('div').attr('class', 'madiv'); modifie ou crée l'attribut class dans les balises <div> du document et leur affecte la valeur « madiv ».

• $('#illustration').attr('src','monimage.jpg'); modifie ou crée l'attribut src dans la balise d'identifiant illustration et lui affecte la valeur « monimage.jpg ».

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');

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 :

• addClass() ajoute une classe dans les éléments sélectionnés ;

• removeClass() supprime (si elle existe) une classe des éléments sélectionnés ;

• toggleClass() accomplit deux actions : si la classe spécifiée n'existe pas dans les éléments sélectionnés, elle y est ajoutée. Si elle existe, elle est supprimée.

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 :

• rouge affiche les caractères en rouge ;

• vert affiche les caractères en vert ;

• petit affiche les caractères avec la taille par défaut (100%) ;

• grand affiche les caractères avec une grande taille (250%).

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.

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 :

• supprimer la classe vert ;

• ajouter la classe rouge ;

• supprimer la classe grand ;

• ajouter la classe petit.

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 :

• Le <span> étant de classe vert, cette classe est supprimée : toggleClass('vert') ;

• La classe rouge lui est ajoutée puisqu'elle n'existe pas : toggleClass('rouge') ;

• Le <span> étant de classe petit, cette classe est supprimée : toggleClass('petit') ;

• Enfin, la classe grand lui est ajoutée puisqu'elle n'existe pas : toggleClass('grand').

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');

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.

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 !

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 :

• text() retourne/modifie la valeur textuelle stockée dans l'élément ;

• html() retourne/modifie le code HTML stocké dans l'élément.

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.

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.

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 :

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>');

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 :

• offset() : position absolue d'un élément dans la page (getter et setter) ;

• position() : position relative d'un élément dans son parent (getter seulement).

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

• offset().left et offset().top pour connaître la position absolue d'un élément.

• position().left et position().top pour connaître la position d'un élément dans son parent.

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.

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.

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.

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.

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 marge intérieure (padding) ;

• une marge extérieure (margin) ;

• une bordure (border).

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

• width() : largeur de l'élément, de la fenêtre ou du document, sans inclure les marges (padding, border et margin). Cette méthode peut être utilisée comme getter (pour connaître la largeur d'un élément) ou comme setter (pour modifier la largeur d'un élément).

• innerWidth() : largeur de l'élément, en incluant le padding gauche et droit.

• outerWidth() : largeur de l'élément, en incluant le padding gauche et droit et border.

• outerWidth(true) : largeur de l'élément, en incluant padding gauche et droit, border et margin gauche et droit.

• height() : hauteur de l'élément, de la fenêtre ou du document, sans inclure les marges (padding, border et margin). Cette méthode peut être utilisée comme getter (pour connaître la hauteur d'un élément) ou comme setter (pour modifier la hauteur d'un élément).

• innerHeight() : hauteur de l'élément, en incluant le padding supérieur et inférieur.

• outerHeight() : hauteur de l'élément, en incluant border et padding supérieur et inférieur.

• outerHeight(true) : hauteur de l'élément, en incluant border, padding supérieur et inférieur et margin supérieur et inférieur.

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

• Dimensions : width: 250px; height: 250px;

• Couleur d'arrière-plan : background-color: #AEEE00;

• Marges internes : padding: 35px;

• Marges externes : margin: 35px;

• Bordure : border-width : 6px; border-color: black; border-style: solid;

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.

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

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');

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ù :

• el est le nom de l'élément concerné, sans apostrophes ;

• nom est le nom (entre apostrophes) de la « variable » dans laquelle sera stockée la donnée ;

• nom_don est le nom (sans apostrophes) associé à la donnée ;

• don est une donnée quelconque. S'il s'agit d'un nombre, les apostrophes sont inutiles. Par contre, s'il s'agit d'une chaîne, mettez-la entre apostrophes.

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ù :

• el est le nom de l'élément concerné, sans apostrophes ;

• nom est le nom (entre apostrophes) dans lequel sera stockée la donnée ;

• nom_don1, nom_don2, nom_don3, etc. sont les noms (sans apostrophes) associés aux données ;

• don1, don2, don3, etc. sont des données quelconques. Lorsqu'une de ces données est numérique, ne mettez pas d'apostrophes. Au contraire, lorsqu'une de ces données est une chaîne, mettez-la entre apostrophes.

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

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

… où :

• uneVariable est une variable quelconque ;

• el est le nom de l'élément (sans apostrophes) auquel une donnée a été associée ;

• nom est le nom (entre apostrophes) dans lequel a été stockée la donnée ;

• nom_don est le nom de la donnée à retrouver, sans apostrophes.

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 :

• Les codes HTML < et > qui apparaissent autour du mot div. Ces codes remplacent les caractères < et >. Sans eux, le texte « <div> » serait interprété comme une balise, et le code ne produirait pas l'effet recherché.

• L'emplacement stratégique des balises <span>. En y insérant des données, elles complèteront la phrase « Les valeurs stockées […] » d'une façon naturelle, comme si la phrase avait été écrite « en dur ».

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.

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ù :

• el est le nom de l'élément (sans apostrophes) auquel les données ont été associées ;

• nom est le nom (entre apostrophes) de la « variable » dans lequel les données ont été stockées.

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

• Les termes getter et setter correspondent aux méthodes de lecture (getter) et d'écriture (setter) du langage jQuery. Ils viennent des verbes anglais to get (obtenir) et to set (définir). En jQuery, un getter est une méthode qui obtient une valeur HTML ou CSS en interrogeant le code. Inversement, un setter est une méthode qui modifie une valeur HTML ou CSS dans le code du document.

• 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. Les setters reçoivent généralement plusieurs paramètres textuels qui permettent de modifier une propriété CSS, un attribut HTML ou encore d'insérer un élément dans le code.

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

• Vous utiliserez la méthode css() pour lire, créer et modifier les propriétés CSS attachées au document.

• La méthode addClass() ajoute à la sélection l'attribut class dont le nom est indiqué entre les parenthèses. La méthode removeClass() supprime un attribut class dans une balise. Enfin, la méthode hasClass() permet de tester l'existence d'une classe dans les éléments retournés par le sélecteur.

• La méthode val() permet de connaître et de modifier la valeur des zones de texte, boutons radio, cases à cocher, listes déroulantes et zones de liste contenues dans un document HTML.

• Les méthodes text() et html() permettent de travailler avec les valeurs stockées dans des éléments HTML : text() retourne/modifie la valeur textuelle stockée dans l'élément, et html() retourne/modifie le code HTML stocké dans l'élément.

• Pour connaître/modifier la position absolue d'une balise dans le document, vous utiliserez les méthodes offset() et position(). Pour connaître les dimensions d'un élément, vous utiliserez les méthodes width(), innerWidth(), outerWidth(), height(), innerHeight(), et outerHeight().

• En utilisant le langage jQuery, il est possible d'associer des données aux balises HTML. Pour cela, on utilise la méthode $.data(). Dans un premier temps, on affecte une ou plusieurs données à la balise en utilisant la méthode $.data() en tant que setter. Lorsque cela est nécessaire, la ou les valeurs associées à la balise sont récupérées en utilisant la méthode $.data() en getter. Lorsque les données associées à une balise ne sont plus nécessaires, on peut les supprimer avec la méthode $.removeData().

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

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) :

• append() insère du contenu à la fin de la sélection ;

• prepend() insère du contenu au début de la sélection ;

• before() insère du contenu avant la sélection ;

• after() insère du contenu après la sélection.

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.