# 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");`

ou

`$("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 @ .