Derniers tutoriels de développement web
 

jQuery sélecteurs


jQuery sélecteurs

Utilisez notre jQuery sélecteur Tester pour démontrer les différents sélecteurs.

Sélecteur Exemple Sélectionne
* $("*") Tous les éléments
# id $("#lastname") L'élément avec id="lastname"
. class $(".intro") Tous les éléments avec class="intro"
. class, . class $(".intro,.demo") Tous les éléments avec la class "intro" ou "demo"
element $("p") Tous <p> éléments
el1 , el2 , el3 $("h1,div,p") Tous <h1>, <div> <p> <h1>, <div> <p> éléments
   
:first $("p:first") Le premier <p> élément
:last $("p:last") Le dernier <p> élément
:even $("tr:even") Tous les même <tr> éléments
:odd $("tr:odd") Tous les impairs <tr> éléments
   
:first-child $("p:first-child") Tous <p> éléments qui sont le premier enfant de leur parent
:first-of-type $("p:first-of-type") Tous <p> éléments qui sont le premier <p> élément de leur parent
:last-child $("p:last-child") Tous <p> éléments qui sont le dernier enfant de leur parent
:last-of-type $("p:last-of-type") Tous <p> éléments qui sont le dernier <p> élément de leur parent
:nth-child( n ) $("p:nth-child(2)") Tous <p> éléments qui sont le 2e enfant de leur parent
:nth-last-child( n ) $("p:nth-last-child(2)") Tous <p> éléments qui sont le 2e enfant de leur parent, à compter de la dernière enfant
:nth-of-type( n ) $("p:nth-of-type(2)") Tous <p> éléments qui sont la 2e <p> élément de leur parent
:nth-last-of-type( n ) $("p:nth-last-of-type(2)") Tous <p> éléments qui sont la 2e <p> élément de leur parent, à compter de la dernière enfant
:only-child $("p:only-child") Tous <p> éléments qui sont le seul enfant de leur parent
:only-of-type $("p:only-of-type") Tous <p> éléments qui sont le seul enfant, de son type, de leur parent
   
parent > child $("div > p") Tous <p> éléments qui sont un enfant direct d'un <div> élément
parent descendant $("div p") Tous <p> éléments qui sont les descendants d'un <div> élément
element + next $("div + p") Le <p> élément qui sont à côté de chaque <div> éléments
element ~ siblings $("div ~ p") Tous <p> éléments qui sont frères et sœurs d'un <div> élément
   
:eq( index ) $("ul li:eq(3)") Le quatrième élément dans une liste (index commence à 0)
:gt( no ) $("ul li:gt(3)") éléments de la liste avec un indice supérieur à 3
:lt( no ) $("ul li:lt(3)") éléments de la liste avec un indice inférieur à 3
:not( selector ) $("input:not(:empty)") Tous les éléments d'entrée qui ne sont pas vides
   
:header $(":header") Tous les éléments d' en- tête <h1>, <h2> ...
:animated $(":animated") Tous les éléments d'animation
:focus $(":focus") L'élément qui a le focus
:contains( text ) $(":contains('Hello')") Tous les éléments qui contient le texte "Hello"
:has( selector ) $("div:has(p)") Tous les éléments <div> qui ont un élément <p>
:empty $(":empty") Tous les éléments qui sont vides
:parent $(":parent") Tous les éléments qui sont un parent d'un autre élément
:hidden $("p:hidden") Tous cachés <p> éléments
:visible $("table:visible") Tous les tableaux visibles
:root $(":root") l'élément racine du document
:lang( language ) $("p:lang(de)") Tous <p> éléments avec une valeur d'attribut lang commençant par "de"
   
[ attribute ] $("[href]") Tous les éléments avec un href attribut
[ attribute = value ] $("[href='default.htm']") Tous les éléments avec un href valeur d'attribut correspondant à "default.htm"
[ attribute != value ] $("[href!='default.htm']") Tous les éléments avec un href valeur d'attribut pas égal à "default.htm"
[ attribute $= value ] $("[href$='.jpg']") Tous les éléments avec un href valeur d'attribut se terminant par ".jpg"
[attribute|=value] $("[title|='Tomorrow']") Tous les éléments avec un titre attribuent une valeur égale à 'Tomorrow' , ou en commençant par 'Tomorrow' suivie d'un tiret
[attribute^=value] $("[title^='Tom']") Tous les éléments avec un titre attribut valeur commençant par "Tom"
[attribute~=value] $("[title~='hello']") Tous les éléments d'une valeur d'attribut de titre contenant le mot spécifique "hello"
[attribute*=value] $("[title*='hello']") Tous les éléments d'une valeur d'attribut de titre contenant le mot "hello"
   
:input $(":input") Tous les éléments d'entrée
:text $(":text") Tous les éléments d'entrée avec type="text"
:password $(":password") Tous les éléments d'entrée avec type="password"
:radio $(":radio") Tous les éléments d'entrée avec type="radio"
:checkbox $(":checkbox") Tous les éléments d'entrée avec type="checkbox"
:submit $(":submit") Tous les éléments d'entrée avec type="submit"
:reset $(":reset") Tous les éléments d'entrée avec type="reset"
:button $(":button") Tous les éléments d'entrée avec le type="button"
:image $(":image") Tous les éléments d'entrée avec type="image"
:file $(":file") Tous les éléments d'entrée avec type="file"
:enabled $(":enabled") Tous les enabled éléments d'entrée
:disabled $(":disabled") Tous les disabled éléments d'entrée
:selected $(":selected") Tous les selected des éléments d'entrée
:checked $(":checked") Tous checked éléments d'entrée