jQuery.selecteur $()

Avant toute chose, voici deux liens qui permettent de se familiariser à propos de XPath et CSS (en anglais), et notamment a leur techniques de selection.

Combiner l'usage de CSS et de Xpath

jQuery permet de créer des sélecteurs en utilisant la syntaxe de CSS et de Xpath combiné, ce qui peut s'avérer très pratique:

Cache tous les élements fils d'un paragraphe contenant des liens:

$("p[a]").hide();

Affiche le premier paragraphe de la page:

$("p:eq(0)").show();

Cache tous les div qui sont affichés:

$("div:visible").hide();

Permet d'obtenir la liste des items d'une liste non ordonnée:

$("ul/li");

$("ul>li");

Récupère tous les paragraphes de la classe "test", et contenant au moins un lien:

$("p.test[a]");

Récupère tous les élements de liste contenant le texte "test":

$("li[a:contains('test')]");

Retourne les valeurs des champs input ayant pour nom "Valider":

$("input[@name=Valider]").val();

Retourne la liste des cases a cocher qui sont cochées:

$("input[@type=radio][@checked]")

Sélecteurs CSS

jQuery supporte les selecteurs utilisant les normes allant de CSS1 à CSS3.

Liste des selecteurs supportés

Pour plus d'informations sur les sélecteurs énoncés ci-dessous, rendez-vous sur la documentation officielle concernant les selecteurs CSS.

*: n'importe quel élément
E: élément de type E
E:nth-child(n): élément E, le n-ième fils de son père
E:first-child: élément E, le premier fils de son père
E:last-child: élément E, le dernier fils de son père
E:only-child: élément E, seul fils de son père
E:empty: élément E qui n'a pas de fils (en incluant les noeuds textes)
E:enabled: élément de type interface (élement de formulaire) E qui n'est pas désactivé
E:disabled: élément de type interface E qui est désactivé
E:checked: élément de type interface E qui est coché (case a cocher, bouton radio...)
E:selected: élément de type interface E qui est sélectionné (options d'un select).Ce selecteur n'est pas dans la spécification CSS, mais est supporté par jQuery.
E.warning: élement E dont la classe est "warning"
E#myID: élement E dont l'id est "myID". ne retourne qu'un élement maximum.
E:not(s): élement E qui ne repond pas a la condition du selecteur s. Exemple: E:not(enabled) = E:disabled
E F: élement F descendant d'un élement E.
E > F: élement F fils d'un élement E.
E + F: élement F immédiatemment précédé d'un élement E.
E ~ F: élement F précédé d'un élement E.
E,F,G: sélectionne tous les élements E, F et G.

Autres sélecteurs supportés

Les selecteurs d'attributs ont été écrits suivant les règles de XPath (du fait que tous les attributs devraient débuter par le symbole @).

Depuis les recentes mises a jours (1.2) Le signe @ est devenue obsolete, les Xpath reste les meme mais sans le @

E[@foo]: élément E avec un attribut "foo".
E[@foo=bar]: élément E avec un attribut "foo" valant "bar".
E[@foo^=bar]: élément E avec un attribut "foo" dont la valeur débute par la chaine "bar".
E[@foo$=bar]: élément E avec un attribut "foo" dont la valeur se termine par la chaine "bar".
E[@foo*=bar]: élément E avec un attribut "foo" dont la valeur contient la chaine "bar".

Slecteurs non supportés

jQuery ne supporte que les slecteurs qui Sélectionne des elements dom, les autres sont ignorés:

E:link
E:visited
E:active
E:hover
E:focus
E:target
E::first-line
E::first-letter
E::selection
E::before
E::after

jQuery ne supporte pas non plus les sélecteurs suivants en raison de leur utilité très limitée:

E:nth-last-child(n)
E:nth-of-type(n)
E:nth-last-of-type(n)
E:first-of-type
E:last-of-type
E:only-of-type
E:lang(fr)
E[foo~="test"]
E[hreflang|="en"]

Sélecteurs XPath

jQuery supporte également une partie du langage XPath pour la constitution de sélecteurs.

Les chemins

Les chemins absolus:

$("/html/body//p") $("/*/body//p") $("//p/../div")

Les chemins relatifs:

$("a",this) $("p/a",this)

Les selecteurs d'"axes"

Descendant: Element qui a un élement descendant.
Recherche les élements p contenus dans un div:

$("//div//p")

Fils: Element qui a un element fils .
Recherche les élements p fils de div:

$("//div/p")

Elements frères: Element qui a un element frère (sur le même axe).
Recherche les formulaires qui précèdent un div:

$("//div ~ form")

Parent: Sélection du parent d'un élement.
Recherche les élements p contenus dans un div:

$("//div/../p")

Les prédicats

Les prédicats supportés

[@foo]: Element qui a un attribut foo.

$("//input[@checked]")

[@foo='test']: Element qui a un attribut foo qui est égal à 'test'.

$("//a[@ref='nofollow']")

[Nodelist]: Element qui contient une liste de noeuds.

 $("//div[p]")//liste des paragraphes contenus dans un div  $("//div[p/a]") //liste des lien contenus dans les paragrpaghe d'un div

Les prédicats supportés, mais avec une syntaxe différente

[last()] or [position()=last()] devient :last

$("p:last")

[0] or [position()=0] devient :eq(0) ou :first

$("p:first") $("p:eq(0)")

[position() < 5] devient :lt(5)

$("p:lt(5)")

[position() > 2] devient :gt(2)

$("p:gt(2)")

Sélecteurs spécifiques a jQuery

Certaines expressions ne sont pas incluses dans Xpath ou CSS, mais elles s'avèrent être bien utiles dans le cas de traitement de documents HTML. En voici la liste:

Sélecteurs généraux

:even: Sélectionne les élement de la sélection dont l'index est pair.
:odd: Sélectionne les élement de la sélection dont l'index est impair.
:eq(0) and :nth(0): Sélectionne le n-ième élément de la selection.
:gt(N): Sélectionne les élements dont l'index est supérieur à 4.
:lt(N): Sélectionne les élements dont l'index est inférieur à 4.
:first: Equivalent de :eq(0)
:last: Sélectionne les dernier élement de la sélection.
:parent: Sélectionne les élements de la selection qui ont des enfants (noeuds texte inclus).
:contains('test'): Sélectionne les élements de la sélection qui contiennent le texte spécifié.
:visible: Sélection tous les élements de la sélection visibles (élements qui ont la propriété display:block ou display:inline, visibility:visible, et ne sont pas des élements de formulaire de type input hidden)
:hidden: Sélection tous les élements de la sélection cachés (élements qui ont la propriété display:none, ou visibility:hidden, ou sont des élements de formulaire de type input:hidden)

Quelques exemples:

 $("p:first").css("fontWeight","bold"); //met en gras le premier paragraphe $("div:hidden").show(); //montre tous les div cachés $("div:contains('test')").hide(); //cache les div contenant 'test'

Sélecteurs pour les formulaires

:input: Sélectionne tous les élements de formulaire (input, select, textarea, button).
:text: Sélectionne tous les champs texte (type="text").
:password: Sélectionne tous les champs mot de passe (type="password").
:radio: Sélectionne tous les champs de type boutons radio (type="radio").
:checkbox: Sélectionne tous les champs de type case a cocher (type="checkbox").
:submit: Sélectionne tous les boutons d'envoi (type="submit").
:image: Sélectionne tous les champs de type image (type="image")
:reset: Sélectionne tous les boutons de réinitialisation (type="reset").
:button: Sélectionne tous les autres boutons(type="button").
:file: Sélectionne les champs input de type file (type="file").

Voir aussi :hidden, décrit dans la section précédente.
Il est recommandé de définir une sélection limitée pour l'utilisation de ces sélecteurs :

Exemple:
va sélectionner tous les champ de type input du formulaire myForm.

$('#myForm :input')

Exemple:
va sélectionner tous les champs de type radio du formulaire myForm (syntaxe a utiliser si vous disposez déja d'une référence au formulaire).
A noter que ce sélecteur est sensiblement le même que [@input=radio], mais sera un petit plus rapide que ce dernier.

ou, $('input:radio', myForm)

Les Astuces du développeur ...

Notez que depuis la mise a jour de la version 1.2 le sigle @ est devenue obsolete.
Vous pouvez utiliser les Xptah comme avant mais en enlevant les @ .