back to top

jQuery: selettori di base, gerarchici e per attributi

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.

Pubblicità
Massimiliano Bossi
Massimiliano Bossi
Stregato dalla rete sin dai tempi delle BBS e dei modem a 2.400 baud, ho avuto la fortuna di poter trasformare la mia passione in un lavoro (nonostante una Laurea in Giurisprudenza). Adoro scrivere codice e mi occupo quotidianamente di comunicazione, design e nuovi media digitali. Orgogliosamente "nerd" sono il fondatore di MRW.it (per il quale ho scritto centinaia di articoli) e di una nota Web-Agency (dove seguo in prima persona progetti digitali per numerosi clienti sia in Italia che all'estero).