Apprendre jQuery : Introduction aux sélecteurs

Date de publication : 22 octobre 2008

Cet article a pour but de vous apprendre à sélectionner des éléments avec jQuery

Version PDF (Miroir) Version hors-ligne (Miroir)

Les sélecteurs

La première chose à apprendre de jQuery afin d'être en mesure de séparer vos codes JavaScript et (X)HTML sont les sélecteurs. Les sélecteurs permettent de sélectionner un ou des éléments du DOM, ces derniers pouvant être manipulés comme tout autre objet. Si vous êtes familier avec CSS, vous allez saisir rapidement les sélecteurs. Ceux-ci sont dans la réalité la même chose et ils utilisent presque la même syntaxe. jQuery permet la sélection des éléments grâce à une fonction spéciale nommé « $ ».

Sélecteurs


$(document) // Extension de l'objet document à la classe jQuery.
$('*')	// Sélectionne tous les éléments.
$('#monDiv')  // Sélectionne l'élément ayant l'ID "monDiv".
$('p.first') // Sélectionne les éléments <p> ayant la classe "first".
$('p[title]')	//Sélectionne les éléments <p> ayant un attribut "title".
$('p[title="Bonjour"]') // Sélectionne les éléments <p> dont l'attribut title est "Bonjour".
$('p[title!="Bonjour"]') // Sélectionne les éléments <p> dont l'attribut title n'est pas "Bonjour".
$('p[title^="H"]') // Sélectionne les éléments dont l'attribut title commence par "H".
$('p[title$="H"]') // Sélectionne les éléments dont l'attribut title fini par "H".
$('p[title*="H"]') // Sélectionne les éléments dont l'attribut title contient "H".
$('ul, ol, dl') // Sélectionne les éléments <ul>, <ol> et <dl>
$('div .desc')	// Sélectionne les éléments ayant la classe "desc" descendants (au sens CSS) d'éléments <div>.
$('div > .enfant')	// Sélectionne les éléments ayant la classe "enfant" enfants d'éléments <div>.
$('label + input')	// Sélectionne les éléments <input /> dont l'élément précédent (dans le DOM) est <label>.
$('#debut ~ div')	// Sélectionne les éléments <div> frères se situant après l'élément dont l'id est "debut".

La sélection par filtre

jQuery offre une très large possibilité de sélection d'éléments en fonction de filtres sur des collections d'éléments.
Le fonctionnement de la sélection par filtre est simple, on sélectionne d'abord un ensemble d'éléments (par défaut, tous) puis on affine cette sélection à partir de certains critères.

Pour bien comprendre les notions de filtre, il est important d'avoir des connaissances minimum sur la structure du DOM (Document Object Model). Pour en savoir plus faq

sur le DOM.

Filtres


// La notation [a|b] signifie que l'on applique le filtre a ou le filtre b.
$('div:first')	// Sélectionne le premier élément <div>.
$('div:last')	// Sélectionne le dernier élément <div>.
$('div:not(.ok)')	// Sélectionne les <div> n'ayant pas la classe "ok".
$('div:[even|odd]')	// Sélectionne les éléments <div> de rang [pair|impair] (le premier rang est 0).
$('div:[eq|lt|gt](n)')	// Sélectionne le ou les éléments <div> de rang [égal|inférieur|supérieur] à n.
$(':header')	// Sélectionne les éléments <hn>.
$(':animated')	// Sélectionne les éléments actuellements animés.
$("div:contain('dvp')")	// Sélectionne les éléments <div> contenant le texte "dvp" (sensible à la casse !)
$('div:empty')	// Sélectionne les éléments <div> vides.
$('div:has(p)')	// Sélectionne les éléments <div> ayant un descendant <p>.
$('div:parent')	//Sélectionne les éléments <div> ayant des enfants (y compris les noeuds texte).
$('div:nth-child([n|even|odd|equation])')	// Les enfants de <div> [de rang n|pairs|impairs|résultat de].
$('div:[first-child|last-child]')	// Les éléments [premier|dernier] enfant d'un élément <div>.
$('div:only-child')	// Les éléments qui sont les seuls enfant d'un élément <div>.

Les éléments de formulaire

Pour terminer, jQuery possède quelques filtres spécifiques à la sélection d'éléments de formulaires en fonction de leur nature ou de leur état.

Eléments de formulaires


$(':input')	// Tous les éléments <input />, <textarea>, <select> et <button>.
$(':[text|password|radio|checkbox|submit|image|reset|button|file|hidden]')	// Les <input /> du type choisi.
$(':[enabled|disabled|checked|selected]')	// Les <input /> possédant l'attibut indiqué.

En conclusion

La force de jQuery réside donc manifestement dans la richesse de sa fonction $, d'autant plus qu'en dehors de la richesse de ces sélecteurs, vous pouvez bien sûr les combiner entre eux pour atteindre n'importe quels élément du DOM très facilement.

Voilà, je crois que le tout ne demande pas plus d'explication que cela. Tous les sélecteurs CSS vont fonctionner avec jQuery et ce dernier permet encore plus de possibilités que CSS.

Version PDF (Miroir) Version hors-ligne (Miroir)