Apprendre jQuery

Sélectionner des éléments

De JavaScript vers jQuery

jQuery nous permet de sélectionner des éléments de façon plus simple qu'en JavaScript.

Exemple : Sélectionner une balise span

// Version Javascript
document.getElementsByTagName('span');

// Version jQuery
$('span');

Exemple : Sélectionner un identifiant #sub-footer

// Version Javascript
document.getElementById('sub-footer');

// Version jQuery
$('#sub-footer');

Exemple : Sélectionner une classe box

// Version Javascript
document.getElementsByClassName('box');

// Version jQuery
$('.box');

Exemple : Sélectionner #nav a:nth-child(odd)

// Version Javascript
// Ne fonctionne pas sous IE8
document.querySelectorAll('#nav a:nth-child(odd)');

// Version jQuery
// Fonctionne sous IE8
$('#nav a:nth-child(odd)');

Article d'Alsacréation sur querySelector et querySelectorAll : http://www.alsacreations.com/article/lire/1445-dom-queryselector-queryselectorall-selectors-api.html

Sélectionner avec jQuery

Un des grands avantages de jQuery est d'utiliser la syntaxe des sélecteurs CSS et permet d'utiliser les sélecteurs CSS3 avec de vieux navigateurs.

Pour sélectionner les noeuds du DOM (éléments) nous utiliserons la syntaxe $(sélecteur).

Bien entendu, la liste ci-dessous n'est pas exhaustive et ne reprend que les sélecteurs les plus utilisés.
Vous pouvez en trouver davantage dans l'API jQuery.

Certains sélecteurs jQuery sont redondants avec les sélecteurs CSS3.

En effet, les sélecteurs jQuery ont été implémentés bien avant la sortie de CSS3. Je vous conseille donc de préviligier les sélecteurs CSS3 dont l'utilisation est plus pérenne.

Combiner des sélecteurs

Les combinateurs standards

Sélecteurs	Exemple	Éléments selectionnés
.class, .class	`$('.box, .pod')`	Les éléments class="box" ou class="pod"
#id .class	`$('#content .box')`	Les éléments class="box" à l'intérieur id="content"
#id.class	`$('#content.wrap')`	Les éléments class="wrap" ayant pour identifiant id="content"

Le sélecteur de contexte

Le sélecteur de contexte permet d’éviter la redondance de caractères au sein du sélecteur.

Sélecteurs	Exemple	Éléments selectionnés
'.class', '#id'	`$('.box, h1', '#content')`	Les éléments class="box" et h1 contenu dans id="content"

Dans l'exemple suivant, nous pouvons être plus concis.

$('#product .box, #product .thumbs').fadeIn(1000);

Utilisons maintenant la même déclaration, mais avec un sélecteur de contexte.

$('.box, .thumbs','#product').fadeIn(1000);

Nous avons ainsi optimisé notre sélecteur.

Les sélecteurs de base

API : http://api.jquery.com/category/selectors/basic-css-selectors/

Sélecteurs	Exemple	Éléments selectionnés
*	`$('*')`	Tous les éléments
Balise html	`$('p')`	Tous les paragraphes
#id	`$('#header')`	Les éléments avec id="header"
.class	`$('.box')`	Les éléments avec class="box"
A > B	`$('.box > p'`)	Les élément B enfants directs de A
A + B	`$('li + li')`	L'élément B frère adjacent de A

Les sélecteurs d'enfant

API : http://api.jquery.com/category/selectors/child-filter-selectors/

Sélecteurs	Exemple	Éléments selectionnés
:first-child	`$('p:first-child')`	1^er élément p
:last-child	`$('p:last-child')`	Dernier élément p
:nth-child(x)	`$('li:nth-child(2)')`	2^ème élément li
:nth-child(xn + x)	`$('li:nth-child(3n + 2)')`	2^ème élément li tous les 3 li
:only-child	`$('.box p:only-child')`	Le fils unique p de class="box"

Les sélecteurs de contenu

API : http://api.jquery.com/category/selectors/content-filter-selector/

Sélecteurs	Exemple	Éléments selectionnés
:contains(texte)	`$('p:contains("Markdown")')`	Les éléments contenant la chaîne de caractères Markdown. Attention ce sélecteur est sensible à la casse
:has(sélecteur)	`$('.box:has(strong)')`	Les éléments class="box" ayant une balise strong
:parent	`$('.box:parent')`	Les éléments class="box" non vides
:empty	`$('.box:empty')`	Les éléments class="box" vides

Les sélecteurs d'attribut

API : http://api.jquery.com/category/selectors/attribute-selectors/

Sélecteurs	Exemple	Éléments selectionnés
[attr]	`$('[href]')`	Les éléments contenant un attribut href
[attr=valeur]	`$('[href="index.html"]')`	Les éléments contenant un attribut href ayant pour valeur index.html
[attr!=valeur]	`$('[href!="index.html"]')`	Les éléments contenant un attribut href ayant pas pour valeur index.html
[attr^=valeur]	`$('[class^="box-"]')`	Les éléments ayant un classe préfixée de box- comme .box-inner
[attr$=valeur]	`$('[class$="-active"]')`	Les éléments ayant un classe sufixée de -active comme .pod-active
*[attr=valeur]**	`$('[class*="box"]')`	Les éléments ayant un classe contenant box comme .pod-boxed
[attr~=valeur]	`$('[class~="box"]')`	Les éléments ayant un classe dont la valeur est une liste séparée par des espaces dont l’un d’eux est exactement box comme class="first box"

Les sélecteurs de filtre

API : http://api.jquery.com/category/selectors/basic-filter-selectors/

Sélecteurs	Exemple	Éléments selectionnés
:animated	`$('.box:animated')`	Les éléments class=".box" animés en jQuery
:eq	`$('.box:eq(2)')`	Le 3^ème élément class=".box"
:even	`$('tr:even')`	Les éléments tr pairs
:odd	`$('tr:odd')`	Les éléments tr impairs
:first	`$('tr:first')`	Le premier élément tr trouvé
:last	`$('tr:last')`	Le dernier élément tr trouvé
:focus	`$('.box:focus')`	Les éléments qui ont le focus
:gt	`$('.box:gt(3)')`	Les éléments class="box à partir du 4^ème
:lt	`$('.box:lt(3)')`	Les éléments class="box jusqu'au 3^ème
:header	`$('.title:header')`	Toutes les balises de h1 à h6 ayant class="title"

Les sélecteurs de visibilité

API : http://api.jquery.com/category/selectors/visibility-filter-selectors/

Sélecteurs	Exemple	Éléments selectionnés
:hidden	`$('.box:hidden')`	Les éléments class="box" cachés
:visible	`$('.box:visible')`	Les éléments class=".box" ayant une largeur ou une hauteur plus grande que 0.

Les sélecteurs de formulaires

API : http://api.jquery.com/category/selectors/form-selectors/

Sélecteurs	Exemple	Éléments selectionnés
:input	`$(:input)`	Tous les éléments de type input
:text	`$(':text')`	Les éléments input type="text"
:password	`$(':password')`	Les éléments input type="password"
:radio	`$(':radio')`	Les éléments input type="radio"
:checkbox	`$(':checkbox')`	Les éléments input type="checkbox"
:submit	`$(':submit')`	Les éléments input type="submit"
:reset	`$(':reset')`	Les éléments input type="reset"
:button	`$(':button')`	Les éléments button
:image	`$(':image')`	Les éléments input type="image"
:file	`$(':file')`	Les éléments input type="file"
:enable	`$('input:enabled')`	Les éléments input actifs
:disabled	`$('input:disabled')`	Les éléments input désactivés
:selected	`$('select option:selected')`	Les éléments option de select sélectionnés
:checked	`$('input:checked')`	Les éléments input qui sont vérifiés ou sélectionnés

Vous pouvez aussi sélectionner un élément de formulaire avec un sélecteur CSS :$('input[type="text"]')