I selettori jQuery sono interamente basati sulla sintassi CSS. Questo permette anche ai non sviluppatori di intuirne immediatamente il significato. Alcuni di questi selettori non appartengono alle specifiche CSS ma sono specifici di jQuery. Vediamone insieme una panoramica.
Selettori
| Selettore | Esempio | Seleziona |
|---|---|---|
* |
$("*") | Tutti gli elementi |
#id |
$("#lastname") | L'elemento con ID uguale a lastname |
.class |
$(".intro") | Tutti gli elementi con classe intro |
element |
$("p") | Tutti gli elementi p |
.class.class |
$(".intro.demo") | Tutti gli elementi con le classi intro e demo |
:first |
$("p:first") | Il primo elemento p |
:last |
$("p:last") | L'ultimo elemento p |
:even |
$("tr:even") | Tutti gli elementi pari |
:odd |
$("tr:odd") | Tutti gli elementi dispari |
:eq(indice) |
$("ul li:eq(3)") | Il quarto elemento in una lista (l'indice parte da 0) |
:gt(n) |
$("ul li:gt(3)") | Elementi della lista con un indice maggiore di 3 |
:lt(n) |
$("ul li:lt(3)") | Elementi della lista con un indice minore di 3 |
:not(selettore) |
$("input:not(:empty)") | Tutti gli input non vuoti |
:header |
$(":header") | h1, h2, h3, h4, h5, h6 |
:animated |
$(":animated") | Tutti gli elementi animati |
:contains(testo) |
$(":contains('Test')") | Tutti gli elementi che contengono il testo specificato |
:empty |
$(":empty") | Tutti gli elementi senza elementi discendenti |
| :hidden | $("p:hidden") | Tutti gli elementi p visibili |
:visible |
$("table:visible") | Tutte le tabelle visibili |
s1,s2,s3 |
$("th,td,.intro") | Tutti gli elementi che corrispondono ai selettori |
[attributo] |
$("[href]") | Tutti gli elementi con attributo href |
[attributo=valore] |
$("[href='default.htm']") | Tutti gli elementi con attributo href uguale a default.htm |
[attributo!=valore] |
$("[href!='default.htm']") | Tutti gli elementi con attributo href diverso da default.htm |
[attributo$=valore] |
$("[href$='.jpg']") | Tutti gli elementi il cui valore di attributo href termina con .jpg |
[attribute^=value] |
$("[href^='jquery_']") | Tutti gli elementi il cui valore di attributo href inizia con jquery_ |
:input |
$(":input") | Tutti gli elementi di input |
:text |
$(":text") | <input type="text"/> |
:password |
$(":password") | <input type="password"/> |
:radio |
$(":radio") | <input type="radio"/> |
:checkbox |
$(":checkbox") | <input type="checkbox"/> |
:submit |
$(":submit") | <input type="submit"/> |
:reset |
$(":reset") | <input type="reset"/> |
:button |
$(":button") | <input type="button"/> |
:image |
$(":image") | <input type="image"/> |
:file |
$(":file") | <input type="file"/> |
:enabled |
$(":enabled") | Tutti gli elementi di input attivi |
:disabled |
$(":disabled") | Tutti gli elementi di input disattivati |
:selected |
$(":selected") | Tutti gli elementi di input selezionati |
:checked |
$(":checked") | Tutti gli elementi di input con un segno di spunta |