Les sélecteurs

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.

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 @).

Slecteurs non supportés

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

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

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

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

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)

Encore plus de sélecteurs !

Vous pouvez agrandir la liste des sélecteurs disponibles: