Dopo aver parlato dei selettori di jQuery, passiamo a vedere come "raffinare" le selezioni utilizzando dei filtri che ci vengono messi a disposizione dal framework e grazie ai quali possiamo identificare elementi della pagina in modo estremamente preciso. I filtri che sto per presentarvi devono essere combinati con i selettori visti nella lezione precedente. I filtri sono combinati coi selettori in questo modo:
$('selettore:filtro');In alcuni casi è possibile omettere il selettore ed utilizzare unicamente il filtro, ad esempio:
// seleziono tutti gli input type="password"
$(':password');Passiamo quindi in rassegna i principali filtri di selezione offeri da jQuery.
Filitrare gli elementi in base alla visibilità (:hidden e :visible)
Possiamo selezionare uno o più elementi della pagina in base al fatto che questi siano visibili o meno. A tal fine jQuery ci mette a disposizione due filtri ad hoc: :hidden e :visible. Vediamo un esempio:
// seleziono tutti i div nascosti
$("div:hidden");
// seleziono tutti i paragrafi con classe class1 che sono visibili
$("p.class1:visible");Filtri specifici per i form
I filtri di questa famiglia sono molteplici e consentono di selezionare un elemento di un Form in base alla sua tipologia. Questi sono:
- :button
- :checkbox
- :file
- :image
- :input
- :password
- :radio
- :reset
- :submit
- :text
Qualche esempio:
// seleziono tutti gli input di testo
$('input:text');
// seleziono tutti i checkbox
$('input:checkbox');Il loro funzionamento può essere replicato anche mediante una selezione in base all’attributo type (come visto nella lezione precedente).
Per quanto riguarda i form, oltre ai filtri in base al tipo, esistono anche dei filtri specifici in base allo stato dell’elemento:
- :checked
- :disabled
- :enabled
- :focus
- :selected
I filtri :checked e :selected identificano gli elementi selezionati: il primo opera per checkbox, radio e selectbox; il secondo solo sulle selectbox. I filtri :disabled e :enabled selezionano un elemento in base al fatto che sia stato disabilitato oppure no. Il filtro :focus seleziona l’elemento che ha il focus in un dato momento.
Filtrare gli elementi in base al contenuto
E’ possibile filtrare una selezione anche in base al contenuto. I filtri di questo tipo sono 4:
- :contains()
- :empty
- :has()
- :parent
:contains()
Questo filtro seleziona tutti gli elementi che contengono una data stringa passata in attributo. Ad esempio:
// seleziono tutti i paragrafi che contengono la stringa "Mr.Webmaster"
$("p:contains('Mr.Webmaster')");:empty
Seleziono tutti gli elementi vuoti. Ad esempio:
$("td:empty");:has()
Seleziono uno o più elementi in base al fatto che contengano o meno l’elemento passato come attributo. Ad esempio:
// seleziono tutti i div che contengono un paragrafo
$("div:has(p)");:parent
Seleziono gli elementi che hanno almeno un child-node o contengono del testo. Ad esempio:
$("td:parent");Filtrare gli elementi "figli"
jQuery mette a disposizione degli sviluppatori anche un nutrito set di filtri in base al "grado di parentela" dei vari elementi tra loro. Questi sono:
- :first-child
- :first-of-type
- :last-child
- :last-of-type
- :nth-child()
- :nth-last-child()
- :nth-last-of-type()
- :htn-of-type
- :only-child
- :only-of-type
I filtri :first-child e :last-child selezionano, rispettivamente, il primo e l’ultimo elemento in relazione all’elemento genitore. Se, ad esempio, volessimo selezionare l’ultimo item di una lista useremmo:
$('li:last-child');Si noti che la selezione mediante :first-child (e :last-child) avviene solo se il primo (o l’ultimo) elemento del genitore corrisponde al selettore indicato. Se stiamo cercando con :last-child uno span mentre l’ultimo elemento del genitore è un bold, allora non avremo nessuna selezione.
I filtri :first-of-type e :last-of-type, invece, selezionano il primo e l’ultimo elemento di un dato tipo, ignorando cioè altri elementi non corrispondenti al tipo indicato. Ad esempio:
$('#box span:last-of-type');Questo codice seleziona l’ultimo span all’interno dell’elemento con id "box" ignorando il fatto che materialmente l’ultimo elemento del nostro contenitore sia di diverso tipo.
<div id="box">
<span>...</span>
<span>...</span>
<span>...</span>
<b>...</b>
</div>Per quanto riguarda i filtri nth-* è solo il caso di precisare che prevedono un numero come attributo il quale servirà per identificare l’elemento che si desidera selezionare. Se ad esempio di una lista di 10 elementi volessimo selezionare il terzo useremo:
$('li:nth-child(3)');Se volessimo selezionare il penultimo potremmo usare:
$('li:nth-last-child(2)');Con :nth-last-child, in pratica, il conteggio parte dall’ultimo elemento e non dal primo.
Funzionamento analogo per :nth-last-of-type e :nth-of-type dove il conteggio riguarda unicamente gli elementi che corrispondono al tipo selezionato.
Per finire i filtri della famiglia :only-* riguardano gli elementi che sono gli unici figli del loro genitore.
Filtrare gli elementi in base all’indice
jQuery dispone di filtri di selezione in base all’indice dell’elemento (ricordiamoci che il primo elemento ha sempre indice "0"). Questi sono:
- :eq()
- :lt()
- :gt()
- :even
- :odd
I primi tre prevedono l’indicazione di un attributo numerico. Con :eq() seleziono l’elemento con indice equivalente al numero indicato. Questo filtro restituisce sempre e solo un elemento.
// seleziono il terzo <li> presente nella pagina
// attenzione! NON il terzo elemento gi ogni lista (se ce ne sono più di una)!
$('li:eq(2)');I filtri :lt() e :gt() consentono di filtrare gli elementi a seconda che il loro indice sia, rispettivamente, minore o maggiore di quello specificato.
Per finire :even e :odd consentono di selezionare, rispettivamente, gli elementi pari e quelli dispari.
Altri filtri
La dotazione di filtri di jQuery è davvero molto ricca. Oltre a quelli già illustrati ne esistono altri non diversamente classificabili. Vediamo di seguito i più important.
:animated
Il filtro :animated consente di selezionare uno più elementi per i quali è in corso un’animazione nel momento in cui viene effettuata la selezione.
:first
Seleziona il primo elemento ed è euqivalente a :eq(0). Anche in questo caso, come in :eq(), il risultato è un singolo elemento.
:header
Seleziona tutti gli elementi corrispondenti ai tag H1, H2, H3, ecc. Vediamo un esempio:
$(':header').css('color','#00FF00');:not()
Si tratta del filtro di negazione: in sostanza si selezionano tutti gli elementi che non corrispondono all’espressione definita come attributo di :not(). Vediamo un esempio:
// seleziono tutti i checkbox non selezionati
$('input:not(:checked)');
// seleziono tutti i paragrafi che non hanno classe class1
$('p:not(.class1)');Oltre a quelli elencati esistono altri filtri di marginale importanza. Per una documentazione completa si rimanda alla documentation di jQuery.
