[PDF] jQuery cours avec exemple d’introduction au sélecteurs DOM | Cours jquery

(1)

2

Sélecteurs

Au sommaire de ce chapitre U Le DOM U La fonction $() U Sélecteurs CSS U Sélecteurs d’attribut U Sélecteurs personnalisés

U Méthodes de parcours du DOM

U Accéder aux éléments du DOM

U En résumé

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élec-teurs CSS, ainsi que des sélecsélec-teurs propres à jQuery. Nous examinerons également le parcours du DOM à l’aide des méthodes de jQuery, qui apportent une plus grande sou-plesse 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éaisé-ments dans le DOM (Docuaisé-ment Object Model). Le DOM est une sorte de structure généalogique arborescente. HTML, comme d’autres langages de balisage, uti-lise 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 :

(2)

<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

arbores-cente 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élec-teurs lorsqu’ils sont employés indépendamment.

(3)

É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 fonc-tion $(), 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

expli-cite, par exemple avec une boucle for, qui est souvent de mise dans les scripts manipu-lant 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 http://www.w3.org/Style/CSS/#specs). Ainsi, tant que JavaScript est activé, les déve-loppeurs peuvent enrichir leurs sites web sans se demander si le navigateur de l’utilisa-teur, en particulier Internet Explorer 6, comprendra ou non les sélecteurs élaborés.

INFO

Les développeurs jQuery sérieux doivent toujours appliquer les concepts d’amélioration progressive et de dégradation élégante à leur code afin de s’assurer qu’une page sera toujours affichée correctement, si ce n’est joliment, que JavaScript soit activé ou non. Nous reviendrons sur ces concepts tout au long de cet ouvrage.

Tableau 2.1 : Utilisation des trois sélecteurs de base

Sélecteur CSS jQuery Description

Nom de balise p $('p') Sélectionne tous les paragraphes du document.

Identifiant #un-id $('#un-id') Sélectionne l’élément unique du document dont l’identifiant est un-id. Classe .une-classe $('.une-classe') Sélectionne tous les éléments du

(4)

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.

<ul id="selected-plays" class="clear-after"> <li>Comédies

<ul>

<li><a href="/commeilvousplaira/">Comme il vous plaira</a></li> <li>Tout est bien qui finit bien</li>

<li>Le Songe d'une nuit d'été</li> <li>La Nuit des rois</li>

</ul> </li> <li>Tragédies <ul> <li><a href="hamlet.pdf">Hamlet</a></li> <li>Macbeth</li> <li>Roméo et Juliette</li> </ul> </li> <li>Historiques <ul>

<li>Henry IV (<a href="mailto:henryiv@king.co.uk">email</a>) <ul>

<li>Partie I</li> <li>Partie II</li> </ul>

</li>

<li><a href="http://www.shakespeare.co.uk/henryv.htm">Henry V</a></li> <li>Richard II</li>

</ul> </li> </ul>

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 appli-qué, la liste est affichée conformément à la Figure 2.1.

Figure 2.1 Aspect de la liste sans application d’un style.

(5)

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’utilisa-tion 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.

Figure 2.2

(6)

Pour donner un style à tous les autres éléments, c’est-à-dire ceux qui ne sont pas de pre-mier 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ési-gner 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]') INFO

Dans les versions antérieures à la 1.2, jQuery utilisait la syntaxe du langage XML Path (XPath) pour ses sélecteurs d’attribut et proposait plusieurs autres sélecteurs XPath. Même si ces sélecteurs ont depuis été retirés de la bibliothèque jQuery standard, ils restent disponibles sous forme d’un plugin (http://plugins.jquery.com/project/xpath/).

Figure 2.3

(7)

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

$('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élec-tionner des liens ayant un attribut href qui se termine par .pdf:

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

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

(8)

$('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 personnali-sé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')).

Figure 2.4

(9)

Appliquer un style en alternance aux lignes d’une table

Avec :odd et :even, jQuery propose deux sélecteurs personnalisés très intéressants. Voyons comment utiliser l’un d’eux pour créer des bandes dans la table suivante :

<td>Comme il vous plaira</td> <td>Comédie</td>

<td>Tout est bien qui finit bien</td> <td>Comédie</td> <td>1601</td> </tr> <tr> <td>Hamlet</td> <td>Tragédie</td> <td>1604</td> </tr> <tr> <td>Macbeth</td> <td>Tragédie</td> <td>1606</td> </tr> <tr> <td>Roméo et Juliette</td> <td>Tragédie</td> <td>1595</td> </tr> <tr>

<td>Henry IV, Partie I</td> <td>Historique</td> <td>1596</td> </tr> <tr> <td>Henry V</td> <td>Historique</td> <td>1599</td> </tr> </table>

Nous complétons la feuille de style de manière à appliquer un style à toutes les lignes de la table et à définir une classe alt pour les lignes paires :

tr { background-color: #fff; } .alt { background-color: #ccc; }

(10)

$(document).ready(function() { $('tr:odd').addClass('alt'); });

Attention, pourquoi utilisons-nous le sélecteur :odd (impair) pour cibler des lignes paires ? Comme dans le cas du sélecteur :eq(), :odd et :even se fondent sur la numé-rotation JavaScript, qui commence à zéro. Par conséquent, la première ligne possède le numéro 0 (pair), la deuxième, le numéro 1 (impair), etc. La Figure 2.5 montre le résultat de notre petit bout de code sur la table.

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 :

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

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 ita-lique (.highlight {font-weight:bold; font-style: italics;}), il suffit d’ajouter à notre code jQuery la ligne suivante, fondée sur le sélecteur :contains():

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

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

mises en exergue. Figure 2.5

Application alter-née d’un style aux lignes d’une table.

(11)

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

Figure 2.6 Application d’un style à certaines cellules de la table.

Tableau 2.2 : Sélecteurs jQuery pour les formulaires

Sélecteur Correspondance

:text, :checkbox,

:radio, :image,

:submit, :reset,

:password, :file

Éléments de saisie dont l’attribut de type est égal au nom du sélecteur (sans les deux-points). Par exemple, :text sélectionne <input

type="text">.

:input Éléments de type input, textarea, select et button.

:button Éléments button et input dont l’attribut de type est égal à button.

:enabled Éléments de formulaire activés.

:disabled Éléments de formulaire désactivés.

:checked Boutons radio ou cases à cocher sélectionnés.

(12)

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élection-ner 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 appli-quons 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 robus-tes, en particulier par rapport aux solutions classiques d’accès au DOM). En de nom-breuses 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 && 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 corres-pondre (!=) au nom de domaine de la page courante (location.hostname).

(13)

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 contien-nent 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():

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

La Figure 2.7 illustre la nouvelle présentation de la table.

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

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

});

INFO

Comme nous pouvions le supposer, les méthodes .next() et .nextAll() ont leurs homolo-gues .prev() et .prevAll(). Par ailleurs, la méthode .siblings() sélectionne tous les autres éléments au même niveau du DOM, qu’ils viennent avant ou après l’élément précé-demment sélectionné.

Figure 2.7 Application d’un style aux cellules qui suivent certaines autres cellules.

(14)

Pour inclure la cellule d’origine (celle qui contient Henry) avec les cellules qui suivent, nous pouvons ajouter la méthode .andSelf():

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

Vous le constatez, il existe différentes manières de combiner les sélecteurs et les métho-des 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 :

$('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élection-nons 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 plu-sieurs jeux d’éléments et de leur appliquer pluplu-sieurs 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".

Évidemment, le parcours du DOM dans cet exemple est absurde. Nous ne conseillons pas une telle approche, d’autant qu’il existe des méthodes plus simples et plus directes.

(15)

Le but de cet exemple est simplement de démontrer l’extrême souplesse de l’enchaîne-ment des méthodes.

Nous pourrions le comparer à la lecture à haute voix d’un paragraphe sans reprendre son souffle. Cela permet d’aller vite, mais les auditeurs risquent d’avoir du mal à comprendre ce qui est lu. En découpant l’instruction en plusieurs lignes et en ajoutant des commentai-res, nous pouvons gagner du temps sur le long terme.

2.7 Accéder aux éléments du DOM

Les expressions de sélection et la plupart des méthodes jQuery retournent un objet jQuery. En général, c’est ce que nous souhaitons, en raison de l’itération implicite et des possibilités de chaînage que cela permet.

Toutefois, il peut arriver que nous ayons besoin d’accéder directement à un élément du

DOM dans le code. Par exemple, nous pourrions avoir besoin de fournir le jeu

d’élé-ments obtenu à une autre bibliothèque JavaScript. Ou bien nous pourrions avoir besoin d’accéder au nom de balise d’un élément, qui est disponible sous forme de propriété de l’élément du DOM. Pour ces cas relativement rares, jQuery propose la méthode .get(). Pour accéder au premier élément du DOM référencé par un objet jQuery, nous utilisons .get(0). Si l’accès à l’élément doit se faire dans une boucle, nous pouvons écrire .get(indice). Ainsi, pour connaître le nom de balise d’un élément dont l’identifiant est mon-element, nous écrivons :

var maBalise = $('#mon-element').get(0).tagName;

Pour plus de commodité, jQuery propose un raccourci à .get(). Au lieu d’écrire la ligne précédente, nous pouvons utiliser des crochets après le sélecteur :

var maBalise = $('#mon-element')[0].tagName;

Ne soyez pas surpris par le fait que cette syntaxe ressemble à un tableau d’éléments du DOM. Utiliser les crochets équivaut à retirer l’enveloppe jQuery pour accéder à la liste des nœuds, tandis qu’utiliser l’indice (dans ce cas 0) équivaut à récupérer l’élément du DOM.

2.8 En résumé

Grâce aux techniques décrites dans ce chapitre, nous pouvons à présent appliquer un style aux éléments de premier niveau et aux éléments secondaires d’une liste imbriquée en utilisant les sélecteurs CSS de base, appliquer différents styles à différents types de liens en utilisant des sélecteurs d’attribut, ajouter des bandes à une table en utilisant les

sélecteurs jQuery personnalisés :odd et :even ou le sélecteur CSS élaboré :nth-child(), et mettre en exergue du texte dans certaines cellules de la table en chaînant des méthodes jQuery.

(16)

Jusque-là, nous avons employé l’événement $(document).ready() pour ajouter une classe aux éléments obtenus. Au chapitre suivant, nous allons voir comment ajouter une classe en réponse aux événements générés par l’utilisateur.