- Learn
- Guida jQuery
- Selettori di base e gerarchici
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");
$(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.
Se vuoi aggiornamenti su Selettori di base e gerarchici inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
I Video di HTML.it
Cambiare il colore dei capelli con Photoshop
Photoshop ci permette di giocare con il colore dei capelli in modo semplice e divertente. Gli strumenti del programma permettono […]