jQuery italia

La potenza e la rilevanza del motore di selezione all'interno di jQuery è notevole in quanto è grazie a questo che possiamo selezionare gli elementi all'interno del documento e quindi applicare metodi jQuery (e non solo) ad un determinato elemento piuttosto che ad un altro. La sintassi che quindi adottano questi selettori è la stessa dei più conosciuti selettori per CSS.

Passiamo quindi ad analizzare più a fondo questi selettori dividendoli in 2 categorie: selettori di base e selettori gerarchici.

Selettori di base

Ecco alcuni esempi di selettori di base:

$("a"); //seleziona tutti i tag ancora () del documento

$("#id_elemento"); //seleziona un elemento (uno solo !!!) con id "id_elemento"

$(".class1"); //seleziona gli elementi con classe "class1" 

Ovviamente è possibile anche effettuare delle combinazioni di questi, infatti se si vogliono, per esempio, solo i link () con classe "class1", basta scrivere:

$("a.class1"); //seleziona tutti i tag  con classe "class1"

Si possono anche indicare più selettori contemporaneamente, come del resto è possibile per i selettori CSS e la sintassi sarà quindi:

$("a.class1,#pippo); //seleziona gli elementi  con classe "class1" e gli elementi con id "pippo"

Un ultimo selettore semplice da far notare è quello che permette di selezionare tutti gli elementi del documento:

$("*"); //seleziona tutti gli elementi del documento

Selettori Gerarchici

Questi selettori servono per cercare elementi all'interno di altri elementi, piuttosto che all'interno di tutto il documento. Ci sono vari selettori di questo genere come quello padre/figlio, precedente/seguente e precedente/adiacente.

Il primo tipo permette di selezionare gli elementi interni ad un tag selezionato (relazione padre/figlio) o anche di selezionare gli elementi direttamente discendenti da quel tag.
Vediamo con due esempi la differenza di tra i due tipi di selettori:

$("#menu_ul li"); //seleziona tutti gli elementi lista all'interno dell'elemento con id = menu_ul

$("#menu_ul > li"); //seleziona tutti gli elementi lista direttamenti discendenti del tag con id = menu_ul

La differenza sostanziale tra i due sta nel fatto che nel secondo esempio non vengono selezionati ulteriori annidamenti, che invece nel primo caso vengono presi in considerazione.

Passiamo ora a spiegare il selettore precedente/seguente. Questo selettore permette di selezionare gli elementi che sono preceduti direttamente da uno specifico elemento (relazione precedente/seguente). La sintassi corretta è la seguente: precedente + seguente. Ecco un esempio:

$("h1 + h2"); //tutti i tag h2 preceduti da un tag h1

$("#id_tag ~ div"); //seleziona tutti i div adiacenti al tag con id = id_tag

Selettori per parole chiave

Esisto parole chiave che permettono di filtrare meglio gli elementi da selezionare. Ecco un elenco delle parole che si possono utilizzare:

• odd o even per selezionare gli elementi pari o dispari;
• first o last per selezionare il primo o l'ultimo elemento;
• lt(n), gt(n) o eq(n) se si vogliono selezionare tutti gli elementi, rispettivamente, precedenti, successivi o uguali all'ennesimo (n) elemento (il conto parte da 0);
• not;
• has, contain, hidden, cioè in base ad attributi o contenuti.

$("tr:last"); //seleziona l'ultima riga della tabella (se ve ne è una sola !!!)

Queste keyword sono molto utili e permettono di selezionare in modo molto più rapido ed efficiente quello che si sta ricercando. Si pensi, riprendendo l'esempio precedente, se si vuole applicare una classe alla sola ultima riga della tabella, basta fare:

$("tr:last").addClass("classe_footer"); //applica la classe classe_footer all'ultima riga della tabella