JavaScript  »  Guide  »  Guida jQuery 

Come visto nella lezione precedente, uno dei punti di forza di jQuery è il suo potente motore di selezione CSS. Il suo compito è di selezionare specifici elementi all'interno di un documento per poterci lavorare successivamente con i metodi jQuery.

A partire dalla versione 1.3 il creatore di jQuery, John Resig, ha deciso di riscrivere e rendere indipendente il codice che ora è disponibile come progetto standalone. Secondo Resig, il motore Sizzle, questo il nome, potrà crescere indipendentemente da jQuery e magari contare su apporti di altri team per migliorare le sue già ottime prestazioni.

Ma passiamo alla pratica: come abbiamo già visto in precedenza, per selezionare degli elementi nel documento sarà sufficiente identificarli attraverso un selettore CSS (lo stesso che usereste in un foglio di stile) e passare la stringa alla funzione $:

$("ul#menu li") //ora nell'oggetto jQuery saranno disponibili tutti gli elementi lista del menu

jQuery, oltre a tutta la gamma di selettori CSS3, comprende alcuni filtri speciali in grado di semplificarci molto la vita.

Selettori di base

Per prima cosa potete utilizzare selettori semplici (tutte le combinazioni di tag, classi e id):

$("a"); //tutti i link nel documento
$("#blocco"); //seleziona un singolo elemento con id "blocco"
$("a.external"); //solo i link con classe "external"

Come in una regola di un foglio di stile CSS, possiamo indicare più selettori contemporaneamente:

$("#blocco,a.external");

Infine è possibile selezionare tutti gli elementi di un documento:

$("*");

In quest'ultimo caso, ricordiamo sempre che maggiore sarà la precisione con cui identificheremo gli elementi che ci servono, maggiore sarà la velocità con cui jQuery li raccoglierà ma soprattutto minore sarà il peso dello script per il browser.

Selettori gerarchici

Un'altra possibilità è quella di utilizzare i selettori gerarchici per ricercare gli elementi all'interno di altri elementi piuttosto che all'interno di tutto il documento. Il selettore gerarchico più conosciuto è senza dubbio quello padre > figlio:

$("#blocco a"); //i link all'interno dell'elemento con id "blocco"

Tuttavia jQuery supporta altri selettori che possono risultare spesso molto utili come padre > figlio, che permette di selezionare solo gli elementi che sono direttamante contenuti nell'elemento padre:

$("ul > li"); //solo gli elementi lista diretti discendenti del tag ul

Ecco un esempio pratico per capire la differenza con il selettore precedente

Altri due selettori interessanti sono precedente + seguente, in cui vengono selezionati tutti gli elementi preceduti direttamente da uno specifico elemento:

$("label + input"); //tutti i tag input preceduti da un tag label

oppure precedente ~ adiacente, che seleziona tutti gli elementi direttamente adiacenti ad un elemento (esempio):

$("#prev ~ div");

Altri articoli

Altre guide

Altre newsletter