jQuery cours avec exemple d’introduction au selecteurs DOM


Télécharger jQuery cours avec exemple d’introduction au selecteurs DOM

★★★★★★★★★★3.5 étoiles sur 5 basé sur 1 votes.
Votez ce document:

Télécharger aussi :


jQuery cours avec exemple d’introduction au sélecteurs DOM

La bibliothèque jQuery fournit une couche d’abstraction générique pour les scripts web classiques.

Elle est donc utile pour la plupart des développements de scripts. En raison de sa nature extensible, il est impossible d’étudier toutes ses utilisations dans un même ouvrage, d’autant que le développement de plugins proposant de nouvelles possibilités est permanent.

Toutefois, les fonctionnalités standard permettent de répondre aux besoins suivants :

n Accéder aux éléments d’un document. Sans l’aide d’une bibliothèque JavaScript, il faut écrire de nombreuses lignes de code pour parcourir l’arborescence du DOM (Document Object Model) et localiser des parties spécifiques de la structure d’un document HTML. jQuery fournit un mécanisme de sélection robuste et efficace qui permet de retrouver n’importe quels éléments d’un document afin de les examiner ou de les manipuler.

n Modifier l’aspect d’une page web. CSS propose une solution puissante pour modifier le rendu des documents, mais elle montre ses limites lorsque les navigateurs web ne respectent pas les mêmes standards. Avec jQuery, les développeurs peuvent contourner ce problème en se fondant sur une prise en charge identique des standards quels que soient les navigateurs. Par ailleurs, la bibliothèque permet de modifier les classes ou les propriétés de style appliquées à une partie du document, même après que la page a été affichée.

n Altérer le contenu d’un document. jQuery ne se borne pas à des changements cosmétiques mais permet de modifier le contenu du document. Du texte peut être changé, des images peuvent être insérées ou interverties, des listes être réordonnées, l’intégralité de la structure du contenu HTML peut être revue et étendue. Toutes ces possibilités sont permises par une API (Application Programming Interface) simple d’emploi.

La bibliothèque jQuery se fonde sur la puissance des sélecteurs CSS (Cascading Style Sheets) pour que nous puissions accéder rapidement et facilement à des éléments ou à des groupes d’éléments du DOM. Dans ce chapitre, nous examinerons quelques sélecteurs CSS, ainsi que des sélecteurs propres à jQuery. Nous examinerons également le parcours du DOM à l’aide des méthodes de jQuery, qui apportent une plus grande souplesse encore.

2.1 Le DOM

L’un des aspects les plus puissants de jQuery réside dans sa capacité à sélectionner aisément des éléments dans le DOM (Document Object Model). Le DOM est une sorte de structure généalogique arborescente. HTML, comme d’autres langages de balisage, utilise ce modèle pour décrire les relations entre les éléments d’une page. Pour faire référence à ces relations, nous employons la terminologie associée aux relations familiales : parents, enfants, etc. Un exemple simple permettra de mieux comprendre l’application de la métaphore généalogique à un document:

<html>

<head>

<title>Le titre</title>

</head>

<body>

<div>

<p>Un paragraphe.</p>

<p>Un autre paragraphe.</p>

<p>Encore un autre paragraphe.</p>

</div>

</body>

</html>

<html> est l’ancêtre de tous les autres éléments ; autrement dit, tous les autres éléments sont des descendants de <html>. Les éléments <head> et <body> sont non seulement des descendants mais également des enfants de <html>. De même, en plus d’être l’ancêtre de <head> et de <body>, <html> est également leur parent. Les éléments <p> sont des enfants (et des descendants) de <div>, des descendants de <body> et de <html>, et des frères. Pour de plus amples informations concernant l’affichage de la structure arborescente du DOM à l’aide de logiciels tiers, consultez l’Annexe B.

Avant d’aller plus loin, il est important de noter que le jeu d’éléments obtenu à l’aide des sélecteurs et des méthodes est toujours placé dans un objet jQuery. Les objets jQuery permettent de manipuler très facilement les éléments recherchés dans une page. Nous pouvons aisément lier des événements à ces objets et leur ajouter de jolis effets, tout comme enchaîner de multiples modifications ou effets. Toutefois, les objets jQuery diffèrent des éléments du DOM ou des listes de nœuds et, en tant que tels, n’offrent pas nécessairement les mêmes méthodes et propriétés pour certaines tâches. À la fin de ce chapitre, nous verrons comment accéder aux éléments du DOM qui sont encapsulés dans un objet jQuery.

2.2 La fonction $()

Quel que soit le type de sélecteur que nous voulons employer dans jQuery, l’instruction commence toujours avec le symbole du dollar et des parenthèses : $(). Tout ce qu’il est possible d’utiliser dans une feuille de style peut également être placé entre guillemets et inséré entre les parenthèses. Ainsi, nous pouvons ensuite appliquer des méthodes jQuery à la collection d’éléments obtenue.

Les trois constituants de base des sélecteurs sont un nom de balise, un identifiant (ID) et une classe. Ils peuvent être employés de manière indépendante ou en association avec d’autres sélecteurs. Le Tableau 2.1 donne un exemple pour chacun de ces trois sélecteurs lorsqu’ils sont employés indépendamment.

 Éviter un conflit entre jQuery et d’autres bibliothèques JavaScript

Dans jQuery, le symbole du dollar ($) est un alias pour jQuery. Lorsque plusieurs bibliothèques sont utilisées dans une même page, il est possible que des conflits surviennent car la fonction $() est très souvent définie par les bibliothèques JavaScript. Pour éviter de tels conflits, nous pouvons remplacer chaque occurrence de $ par jQuery dans le code jQuery. Le Chapitre 10 proposera d’autres solutions à ce problème.

...

Nous l’avons mentionné au Chapitre 1, lorsque nous associons des méthodes à la fonction $(), les éléments encapsulés dans l’objet jQuery sont parcourus automatiquement et implicitement. Par conséquent, nous pouvons généralement éviter l’itération explicite, par exemple avec une boucle for, qui est souvent de mise dans les scripts manipulant le DOM.

Puisque les bases sont à présent posées, nous sommes prêts à utiliser les sélecteurs de manière plus élaborée.

2.3 Sélecteurs CSS

La bibliothèque jQuery prend en charge pratiquement tous les sélecteurs décrits dans les spécifications 1 à 3 de CSS (voir le site du World Wide Web Consortium à l’adresse … ). Ainsi, tant que JavaScript est activé, les développeurs peuvent enrichir leurs sites web sans se demander si le navigateur de l’utilisateur, en particulier Internet Explorer 6, comprendra ou non les sélecteurs élaborés.

Pour comprendre le fonctionnement de jQuery avec les sélecteurs CSS, nous nous appuierons sur une structure souvent employée par les sites web pour la navigation: la liste imbriquée non ordonnée.

...

Vous remarquerez que l’identifiant de la première balise <ul> est selected-plays, mais qu’aucune classe n’est associée aux balises <li>. Lorsque aucun style n’est appliqué, la liste est affichée conformément à la Figure 2.1.

Elle se présente comme attendu, avec des puces et des éléments organisés verticalement et indentés en fonction de leur niveau.

Appliquer un style aux éléments de liste

Supposons que nous voulions que les éléments de premier niveau, et uniquement ceux-là, soient organisés à l’horizontale. Nous pouvons commencer par définir une classe horizontal dans la feuille de style :

.horizontal { float: left;

list-style: none;

margin: 10px;

}



La classe horizontal fait en sorte que l’élément soit flottant à gauche de celui qui le suit, lui retire la puce s’il s’agit d’un élément de liste et ajoute une marge de 10 pixels sur ses quatre côtés.

Au lieu d’associer directement la classe horizontal à un élément dans le document HTML, nous l’ajoutons dynamiquement aux éléments de premier niveau de la liste, c’est-à-dire COMÉDIES, TRAGÉDIES et HISTORIQUES. Cela nous permet d’illustrer l’utilisation des sélecteurs dans jQuery :

$(document).ready(function() {

$('#selected-plays > li').addClass('horizontal'); });

Notre code jQuery débute par l’enveloppe $(document).ready(), qui s’exécute dès que le DOM a été chargé.

La deuxième ligne utilise le combinateur d’enfant (>) pour ajouter la classe horizontal à tous les éléments de premier niveau et à eux seuls. Le sélecteur placé dans la fonction $() signifie "rechercher chaque élément de liste (li) qui est un enfant (>) de l’élément dont l’identifiant est selected-plays (#selected-plays)".

La Figure 2.2 présente l’affichage de la liste après que la classe a été appliquée.

...

Pour donner un style à tous les autres éléments, c’est-à-dire ceux qui ne sont pas de premier niveau, nous avons plusieurs méthodes à notre disposition. Puisque nous avons déjà appliqué la classe horizontal aux éléments de premier niveau, nous pouvons sélectionner les éléments secondaires en utilisant une pseudo-classe de négation pour identifier tous les éléments de liste qui ne sont pas de la classe horizontal. Cela se passe dans la troisième ligne de code :

$(document).ready(function() {

$('#selected-plays > li').addClass('horizontal');

$('#selected-plays li:not(.horizontal)').addClass('sub-level'); });

Cette fois-ci, nous sélectionnons chaque élément de liste (li) qui est un descendant de l’élément dont l’identifiant est selected-plays (#selected-plays) et dont la classe n’est pas horizontal (:not(.horizontal)).

Lorsque nous ajoutons la classe sub-level à ces éléments, un arrière-plan gris leur est attribué par la feuille de style. La Figure 2.3 illustre la nouvelle présentation de la liste imbriquée.

 2.4 Sélecteurs d’attribut

Les sélecteurs d’attributs de CSS sont particulièrement utiles. Ils permettent de désigner un élément par l’une de ses propriétés HTML, comme l’attribut title d’un lien ou l’attribut alt d’une image. Par exemple, pour sélectionner toutes les images qui possèdent un attribut alt, nous écrivons le code suivant:

$('img[alt]')

Appliquer un style aux liens

Les sélecteurs d’attribut utilisent une syntaxe issue des expressions régulières pour identifier la valeur au début (^) ou à la fin ($) d’une chaîne de caractères. Nous pouvons également nous servir de l’astérisque (*) pour indiquer une valeur placée n’importe où dans une chaîne et un point d’exclamation (!) pour indiquer l’inverse d’une valeur.

Supposons que nous souhaitions appliquer des styles différents aux différents types de liens. Nous commençons par les définir dans la feuille de style :

a {

color: #00c;

}

a.mailto {

background: url(images/mail.png) no-repeat right top;

padding-right: 18px;

}

a.pdflink {

background: url(images/pdf.png) no-repeat right top;

padding-right: 18px;

}

a.henrylink {

background-color: #fff;

padding: 2px;

border: 1px solid #000;

}

Ensuite, nous utilisons jQuery pour ajouter les classes mailto, pdflink et henrylink aux liens appropriés.

Pour ajouter une classe à tous les liens de type courrier électronique, nous construisons un sélecteur qui recherche toutes les ancres (a) dont l’attribut href ([href) commence par mailto: (^=mailto:]) :

$(document).ready(function() {

$('a[href^=mailto:]').addClass('mailto'); });

Pour ajouter une classe à tous les liens vers des fichiers PDF, nous utilisons le symbole du dollar à la place du symbole de l’accent circonflexe. En effet, nous voulons sélectionner des liens ayant un attribut href qui se termine par .pdf :

$(document).ready(function() {

$('a[href^=mailto:]').addClass('mailto'); $('a[href$=.pdf]').addClass('pdflink'); });

Il est également possible de combiner les sélecteurs d’attribut. Par exemple, nous pouvons ajouter la classe henrylink à tous les liens dont l’attribut href commence par http et inclut henry :

20 jQuery

$(document).ready(function() {

$('a[href^=mailto:]').addClass('mailto'); $('a[href$=.pdf]').addClass('pdflink');

$('a[href^=http][href*=henry]').addClass('henrylink');

});

La Figure 2.4 présente la nouvelle version de la liste après que ces trois classes ont été appliquées aux trois types de liens.

Notez l’icône PDF à droite du lien HAMLET, l’icône d’enveloppe à côté du lien EMAIL, ainsi que le fond blanc et la bordure noire autour du lien HENRY V.

2.5 Sélecteurs personnalisés

À la grande diversité de sélecteurs CSS, jQuery ajoute ses propres sélecteurs personnalisés. Pour la plupart, ils permettent de sélectionner certains éléments dans un groupe. La syntaxe est identique à celle des pseudo-classes CSS, dans laquelle le sélecteur commence par des deux-points (:). Par exemple, pour sélectionner le deuxième élément parmi l’ensemble obtenu à l’aide d’un sélecteur de balises <div> dont la classe est horizontal, nous écrivons le code suivant:

$('div.horizontal:eq(1)')

La partie :eq(1) sélectionne le deuxième élément de l’ensemble car les indices des tableaux JavaScript commencent à zéro. À l’opposé, CSS numérote à partir de un. Par conséquent, un sélecteur CSS comme $('div:nth-child(1)') sélectionne tous les éléments <div> qui sont le premier enfant de leur parent (toutefois, dans ce cas, il est plus simple d’utiliser $('div:first-child')).

...

Vous constaterez un résultat sans doute inattendu si la page contient plusieurs tables. Par exemple, puisque la dernière ligne de cette table possède un fond blanc, la première ligne de la table suivante aura un fond gris. Pour éviter ce type de problème, la solution consiste à utiliser le sélecteur :nth-child(). Il peut prendre en argument un nombre pair ou impair. Attention, cependant, car :nth-child() est le seul sélecteur jQuery qui commence à un. Pour obtenir le même effet que précédemment et pour qu’il reste cohérent sur les multiples tables d’un document, nous modifions le code de la manière suivante :

$(document).ready(function() {

$('tr:nth-child(even)').addClass('alt'); 1);

Supposons que, pour une raison ou pour une autre, nous souhaitions mettre en exergue les cellules de la table qui font référence à l’une des pièces HENRY. Pour cela, après avoir ajouté une classe à la feuille de style de manière à placer le texte en gras et en italique (.highlight {font-weight:bold; font-style: italics;}), il suffit d’ajouter à notre code jQuery la ligne suivante, fondée sur le sélecteur :contains() :



$(document).ready(function() {

$('tr:nth-child(even)').addClass('alt'); $('td:contains(Henry)').addClass('highlight'); 1);

La Figure 2.6 montre notre jolie table à bandes, dans laquelle les pièces HENRY sont mises en exergue.

Il est important de noter que le sélecteur :contains() est sensible à la casse. Si nous avions utilisé $('td:contains(henry)'), c’est-à-dire sans le H majuscule, aucune cellule n’aurait été sélectionnée.

Bien évidemment, il existe des solutions pour créer des tables à bandes et mettre du texte en exergue sans passer par jQuery ni utiliser un script côté client. Quoi qu’il en soit, la combinaison de jQuery et de CSS constitue une bonne solution pour mettre en place des styles de ce type lorsque le contenu est généré dynamiquement et que nous n’avons accès ni au contenu HTML ni au code côté serveur.

Sélecteurs pour formulaires

Lorsqu’on manipule des formulaires, les sélecteurs personnalisés de jQuery peuvent simplifier la sélection des éléments recherchés. Le Tableau 2.2 décrit quelques-uns de ces sélecteurs.

...

Comme les autres sélecteurs, il est possible de combiner les sélecteurs pour formulaires afin d’obtenir une meilleure précision. Par exemple, nous pouvons sélectionner tous les boutons radio cochés (non les cases à cocher) avec $(':radio:checked') ou sélectionner toutes les zones de saisie de mot de passe et les champs de saisie de texte désactivés avec $(':password, :text:disabled'). Avec les sélecteurs personnalisés, nous appliquons les principes de base de CSS pour construire la liste des éléments correspondants.

2.6 Méthodes de parcours du DOM

Les sélecteurs jQuery étudiés jusqu’à présent permettent de sélectionner des éléments dans l’arborescence du DOM, que ce soit latéralement ou vers le bas, et de filtrer les résultats. S’il s’agissait de la seule manière de sélectionner les éléments, nos possibilités seraient relativement limitées (même si les expressions de sélection sont plutôt robustes, en particulier par rapport aux solutions classiques d’accès au DOM). En de nombreuses occasions, il est nécessaire de sélectionner un élément parent ou un élément ancêtre. C’est à ce moment-là que les méthodes jQuery pour le parcours du DOM entrent en scène. Elles permettent de parcourir le DOM dans toutes les directions.

Pour certaines méthodes, l’expression de sélection s’écrit de manière quasi identique. Par exemple, la ligne $('tr:odd').addClass('alt'); employée initialement pour ajouter la classe alt peut être récrite avec la méthode .filter() :

$('tr').filter(':odd').addClass('alt');

Cependant, en général, les deux manières de sélectionner les éléments se complètent. De plus, la méthode .filter() est particulièrement puissante car elle peut prendre une fonction en argument. Cette fonction permet de créer des tests complexes pour le choix des éléments qui feront partie du jeu correspondant. Par exemple, supposons que nous voulions ajouter une classe à tous les liens externes. jQuery ne propose aucun sélecteur pour répondre à ce besoin. Sans une fonction de filtre, nous serions obligés de parcourir explicitement chaque élément et de les tester un par un. En revanche, grâce à la fonction de filtre, nous pouvons nous appuyer sur l’itération implicite de jQuery et garder un code concis:

$('a').filter(function() {

return this.hostname 88 this.hostname != location.hostname; }).addClass('external');

La deuxième ligne applique un filtre à deux critères sur la collection d’éléments <a> :

  1. Ils doivent posséder un attribut href avec un nom de domaine (this.hostname). Ce test permet d’exclure les liens mailto et ceux d’autres espèces.
  2. Le nom de domaine ciblé par le lien (à nouveau this.hostname) ne doit pas correspondre (!=) au nom de domaine de la page courante (location.hostname).

Plus précisément, la méthode .filter() itère sur le jeu d’éléments correspondants, en testant la valeur de retour de la fonction appliquée à chacun. Si elle retourne false, l’élément est retiré de la collection obtenue. Si elle retourne true, il est conservé.

Revenons à présent à notre table à bandes pour voir si nous ne pourrions pas exploiter les méthodes de parcours.

Appliquer un style à certaines cellules

Précédemment, nous avons ajouté la classe highlight à toutes les cellules qui contiennent le texte Henry. Pour appliquer un style à la cellule qui suit chaque cellule contenant ce nom, nous pouvons partir du sélecteur écrit et lui enchaîner la méthode next() :

$(document).ready(function() {

$('td:contains(Henry)').next().addClass('highlight'); 1);

La méthode .next() sélectionne uniquement l’élément frère suivant. Pour mettre en exergue toutes les cellules qui viennent après celle qui contient Henry, nous pouvons employer la méthode .nextAll() :

$(document).ready(function() {

$('td:contains(Henry)').nextAll().addClass('highlight'); Pour inclure la cellule d’origine (celle qui contient Henry) avec les cellules qui suivent, nous pouvons ajouter la méthode .andSelf() :

$(document).ready(function() {

$('td:contains(Henry)').nextAll().andSelf().addClass('highlight'); });

Vous le constatez, il existe différentes manières de combiner les sélecteurs et les méthodes de parcours pour sélectionner la même collection d’éléments. Voici par exemple une autre façon de sélectionner chaque cellule d’une ligne dont au moins l’une contient le nom Henry :

$(document).ready(function() {

$('td:contains(Henry)').parent().children().addClass('highlight'); });

Dans ce cas, au lieu de parcourir transversalement les éléments frères, nous remontons d’un niveau dans le DOM avec .parent(), vers l’élément <tr>, puis nous sélectionnons toutes les cellules de la ligne avec .children().

Enchaîner des méthodes

Les combinaisons de méthodes de parcours que nous venons de présenter illustrent les possibilités de chaînage de jQuery. Avec jQuery, il est possible de sélectionner plusieurs jeux d’éléments et de leur appliquer plusieurs opérations, le tout en une seule ligne de code. Ce chaînage permet non seulement de garder un code JavaScript concis, mais également d’améliorer les performances d’un script lorsque l’alternative est de préciser à nouveau un sélecteur.

Il est aussi possible de découper une même ligne de code en plusieurs lignes de manière à faciliter la lecture. Par exemple, une succession de méthodes peut s’écrire sur une seule ligne :

$('td:contains(Henry)').parent().find('td:eq(1)') .addClass('highlight').end().find('td:eq(2)')

.addClass('highlight');

ou sur sept lignes :

$('td:contains(Henry)') // Rechercher chaque cellule qui contient "Henry".

.parent() // Sélectionner son parent.

.find('td:eq(1)') // Rechercher la deuxième cellule descendante.

.addClass('highlight') // Ajouter la classe "highlight".

.end() // Retourner au parent de la cellule qui contient "Henry".

.find('td:eq(2)') // Rechercher la troisième cellule descendante.

.addClass('highlight'); // Ajouter la classe "highlight".



277