Selettori di base e gerarchici

Tra i principali punti di forza di jQuery c’è il suo potente motore di selezione degli elementi del DOM. Il suo compito è di selezionare specifici elementi all’interno di un documento per poterci lavorare successivamente con i metodi jQuery.

Per selezionare gli elementi nel documento sarà sufficiente identificarli attraverso un selettore (lo stesso che useremmo in un foglio di stile CSS) e passare la stringa alla funzione $:

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

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.

$(Parent Child), il selettore spazio

Il selettore gerarchico più conosciuto è senza dubbio il selettore quello padre figlio grazie al quale possiamo selezionare tutti gli elementi che si trovano all’interno di un elemento contenitore che ne è progenitore. Ad esempio:

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

$(Parent > Child), il selettore ‘>’

Il selettore padre > figlio, permette di selezionare solo gli elementi che sono direttamante discendenti dell’elemento padre, potremmo dire “solo i figli e non i nipoti”:

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

per capire meglio, ecco quali <li> sarebbero selezionati:

<ul>
<li>Questo si</li>
<li>
	<ol>
		<li>Questo no</li>
	</ol>
</li>
</ul>

Ecco un altro esempio.

$(Prev + Next), il selettore ‘+’

Il selettore precedente + adiacente indica gli elementi che sono selezionati dal selettore a destra e che siano immediatamente preceduti dal elementi selezionati dal selettore a sinistra. Con un esempio forse è più chiaro:

$('div + span')

<div>Questo</div><span>Sì</span>
<div>Questo</div><img /><span>No</span>

Un esempio classico di uso di questo selettore:

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

Qui un altro esempio.

$(Prev ˜ Next), il selettore ‘˜’

il selettore tilde precedente ˜ seguente indica tutti i fratelli seguenti anche non adiacenti. Il testo della pagina invece dice cose imprecise o del tutto sbagliate.

$('div ~ span')

<div>Questo</div><span>Sì</span>
<div>Questo</div><img /><span>Anche</span>

Sizzle

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.