Uno dei punti di forza di jQuery, come già detto nella seconda lezione di questa guida, è il motore di selezione basato su Sizzle (un motore per i selettori CSS utilizzato anche da altri framework). Questo motore è molto importante perchè permette di selezionare in maniera molto rapida ed efficiente gli elementi all’interno del documento, così da applicarvi proprietà, metodi e tutto quello che si può fare con jQuery.
I selettori, come abbiamo visto, vengono passati come paramentro della funzione jQuery() o del suo alias $(). La sintassi utilizzata è la stessa che siamo già abituati ad utilizzare nei CSS, più alcune scorciatoie tipiche di jQuery.
Per procedere nella nostra trattazione dividiamo i selettori in tre categorie:
- Selettori di base
- Selettori gerarchici
- Selettori per attributo
Selettori di base in jQuery
I selettori di base sono quelli che ci permettono di selezionare un elemento in base al tipo di tag, alla classe a cui esso appartiene o in base all’ID. Vediamo un esempio di utilizzo:
//seleziona tutti i div e imposta il font
$("div").css("font-size","14px");
//nasconde tutti gli elementi con la classe class1
$(".class1").hide();
//preleva il contenuto HTML dell'elemento selezionato tramite ID
var elhtml = $("#id_ele").html();Come avrete notato la sintassi utilizzata è identica a quella di CSS: per selezionare gli elementi per tag si scrive solamente il nome del tag, per la classe si precede il nome della classe da un punto (.) e per l’ID si fa precedere il nome dell’indicativo da un cancelletto (#).
I primi due tipi di selezione ritornano uno o più elementi del documento; la selezione tramite ID invece ritorna uno ed un solo elemento, quindi se si assegna il medesimo ID a diversi elementi della pagina (mai farlo !!!) viene preso solamente il primo.
Come per i CSS è possibile specificare una combinazione delle selezioni possibili. Vediamo in questo esempio come si possono selezionare tutti i paragrafi con una determinata classe:
//cambia il colore di sfondo dei paragrafi con classe class1
$("p.class1").css("background-color","yellow");Nell’esempio qui sopra gli elementi selezionati saranno solo i paragrafi con classe "class1", questo significa che i paragrafi privi della classe indicata o gli altri tag con la stessa classe verranno ignorati.
Selettori gerarchici in jQuery
Con i selettori gerarchici è possibile selezionare degli elementi in base alla relazione con altri elementi della pagina. Anche in questo caso la sintassi è quella utilizzata per i selettori CSS:
//seleziona tutti gli elementi (<li>) del menu
$("ul#menu li");
//seleziona solo gli elementi (<li>) direttamente discendenti
$("ul#menu > li");La differenza sta nel fatto che il secondo seleziona le voci del menù direttamente discendenti dal padre (il menù stesso) e non ulteriori annidamenti, come nel primo esempio.
Un altro utile selettore è quello che definisce l’ordine di selezione tra elementi dello stesso livello. Vediamo due esempi che chiariscono meglio:
// seleziona gli input appena seguenti ad una label
$("label + input");
// seleziona tutti gli input fratelli di una label
$("label ~ input");La sostanziale differenza è che nel primo caso viene selezionato l’input immediatamente dopo i tag <label>, nel secondo caso invece gli input selezionati sono tutti quelli successivi al tag <label>, anche se non immediatamente.
Selettori in base all’attributo in jQuery
Un’altra comoda funzionalità di selezione offerta da jQuery consiste nella possibilità di selezionare uno o più elementi della pagina sulla base della presenza o del contenuto di uno specifico attributo. Ad esempio è possibile selezionare degli input sulla base del loro tipo:
// seleziono tutti gli input radio
$('input[type="radio"]');E’ possibile anche l’operazione inversa, cioè selezionare tutti gli elementi che NON hanno quel dato valore per un dato attributo:
// seleziono tutti gli input NON radio
$('input[type!="radio"]');E’ possibile anche effettuare una selezione "parziale" in base al contenuto di un attribito. Ad esempio:
// seleziono tutti gli input il cui name inizia per "utente"
// ad esempio: utente_nome, utente_cognome, utente_email, ecc.
$('input[name^="utente"]');
// seleziono tutti gli input che contengono la parola "euro"
// ad esempio: euro_iva, prezzo_euro, cambio_euro_dollaro, ecc.
$('input[name*="euro"]');
// seleziono tutti gli input il cui name finisce per "email"
// ad esempio: utente_email, azienda_email, amico_email, ecc.
$('input[name$="email"]');E’ anche possibile selezionare uno o più elementi sulla base della sola presenza di un attributo, a prescindere dal suo contenuto:
// seleziono tutti i link in cui è settato l'attributo rel
$('a[rel]');Infine è opportuno ricordare che anche gli attributi possono essere "concatenati" al fine di migliorare la selezione:
// seleziono tutti i link con attributo rel e con target _blank
$('a[rel][target="_blank"]');Nota: ovviamente un elemento può essere manipolato solo quando è già stato caricato nel DOM. I selettori, quindi, non sortiranno alcun effetto se utilizzati prima dell’elemento interessato, salvo siano stati richiamati col metodo ready() – di cui abbiamo già accennato – che ha la peculiarità di attendere che il DOM sia stato caricato completamente.
