Guida completa ai selettori di jQuery

Quando dobbiamo manipolare il contenuto di un elemento o collegare un evento ad esso è necessario prima selezionarlo. Questo è possibile attraverso i selettori di jQuery, una componente importantissima della libreria. È possibile selezionare gli elementi di una pagina web attraverso diversi criteri. Ad esempio il loro ID, nomi di classe, altri attributi o una combinazione di uno o più criteri precedenti.

La maggior parte dei selettori di jQuery si basa sugli attributi CSS esistenti, ma la libreria dispone di diversi selettori personalizzati.

Selettori di base

È possibile selezionare gli elementi di una pagina web utilizzando il loro id, la loro classe o il loro nome tag. E inoltre possibile utilizzare una combinazione di questi selettori o selezionare più elementi contemporaneamente.

Selettore tramite id

$('#id')
// seleziona l'elemento con id specificato

Selettore tramite classe

$('.class')
// seleziona l'elemento con classe specificata

Selettore tramite tag HTML

$('p')
// seleziona tutti gli elementi tag <p>

Selettore multiplo

$('#id, .class, p')
// seleziona l'elemento con id=id, gli elementi con class=class e tutti gli elementi tag <p>

jQuery ci mette a disposizione ulteriori selettori di base

:header – Questo selettore permette di selezionare tutti i tag <h1>, <h2>, <h3> all’interno di un documento. Invece che scrivere $(‘h1, h2, h3) possiamo utilizzare il selettore $(‘:header’)

:target – Questo selettore identifica l’elemento che corrisponde all’hash URI del documento. Ad esempio se l’URI è “https://www.makingweb.it/#hash” e all’interno del documento abbiamo impostato il tag target <h2 id=”hash”>, possiamo usare questo selettore di jQuery $(“h2 :target”)

:animated – Questo selettore restituisce tutti elementi in cui è in corso un’animazione quando viene eseguito il selettore. Se l’animazione inizia dopo che il selettore viene eseguito, l’elemento non sarà restituito.

Selettori basati sugli indici

Oltre ai selettori di base è possibile selezionare gli elementi in base al loro indice. jQuery fornisce un insieme di selettori che utilizzano l’indicizzazione a partire da zero. Ciò significa che per selezionare il terzo elemento si dovrà utilizzare l’indice 2.

:eq(n) – Seleziona l’elemento con indice n. A partire dalla versione 1.8, accetta anche valori negativi. Quando viene fornito un valore negativo, il conteggio viene effettuato a ritroso dall’ultimo elemento.

:lt(n) – Seleziona tutti gli elementi con indice inferiore a n. Accetta anche valori negativi a partire dalla versione 1.8. Esattamente come il selettore precedente, quando viene fornito un valore negativo, il conteggio comincia dall’ultima posizione a ritroso.

:gt(n) – Funziona come :lt(n) con la differenza che restituisce tutti gli elementi con un indice maggiore o uguale a n.

:first – Restituisce il primo elemento, come :eq(0) e :lt(1).

:last – Simile al selettore :first ma restituisce l’ultimo elemento

:even – Restituisce tutti gli elementi con un indice pari. Dal momento che l’indicizzazione di jQuery comincia da zero, il selettore seleziona il primo figlio, il terzo figlio e così via. Può apparire poco intuitivo, ma funziona così.

:odd – Funziona come :even ma restituisce gli elementi con indice dispari.

<ul id="nav">
 <li><a href="index.html">Home</a></li>
 <li><a href="single.html">About us</a></li>
 <li><a href="blog.html">Blog</a></li>
 <li><a href="portfolio.html">Portfolio</a></li>
 <li><a href="contact.html">Contact us</a></li>
</ul>
<script type="text/javascript">
jQuery(function()
{
 jQuery('#nav li:eq(0)').addClass('active');
 // seleziona Home
 jQuery('#nav li:lt(3)').addClass('active');
 // seleziona Home e About us
 jQuery('#nav li:gt(3)').addClass('active');
 // seleziona Blog, Portfolio e Contact us
 jQuery('#nav li:first').addClass('active');
 // seleziona Home
 jQuery('#nav li:last').addClass('active');
 // seleziona Contact us
})
</script>

Selettori Child

jQuery consente di selezionare i figli di un elemento in base al loro indice o tipologia. I selettori child del codice CSS sono differenti da quelli usati da jQuery, in quanto non usano l’indicizzazione su base zero.

:first-child – Restituisce tutti i primi figli del proprio genitore.

:first-of-type – Restituisce tutti gli elementi con la tipologia specificata e primi figli del proprio genitore. Gli esempi alla fine della lista chiariranno senza dubbio il concetto.

:last-child – Restituisce tutti gli ultimi figli del proprio genitore.

:last-of-type – Funziona come :first-of-type ma seleziona l’ultimo figlio dell’elemento genitore.

:nth-child(n) – Restituisce tutti gli elementi figli dell’elemento genitore, in base al parametro n. Il parametro accetta diverse tipologie di valori, ad esempio un numero intero, una funzione matematica o le stringhe even e odd.

:nth-last-child(n) – Funziona come il selettore precedente, con la differenza che comincia a contare dall’ultimo elemento, procedendo a ritroso.

:nth-of-type(n) – Restituisce tutti gli n-essimi figli del genitore con la tipologia specificata

:nth-last-of-type(n) – Funziona come :nth-of-type() ma il conteggio inizia dalla fine.

:only-child – Restituisce solo gli elementi che sono figli unici dell’elemento genitore.

:only-of-type – Restituisce tutti gli elementi con la caratteristica specificata ma che non hanno “fratelli” all’interno dell’elemento genitore

<div>
  <span>Luca</span>
  <span>Gabriele</span>
  <span>Marco</span>
  <span>Mirko</span>
</div>
<div>
  <b>Maria</b>
  <span>Alessia</span>
  <span>Veronica</span>
  <span>Vanessa</span>
</div>
<script type="text/javascript">
jQuery(function()
{
 jQuery('span:first-child').addClass('active');
 // seleziona Luca
 jQuery('span:first-of-type').addClass('active');
 // seleziona Luca e Alessia
 jQuery('span:last-child').addClass('active');
 // seleziona Mirko e Vanessa
 jQuery('span:last-of-type').addClass('active');
 // seleziona Mirko e Vanessa
 jQuery('span:nth-child(odd)').addClass('active');
 // seleziona Luca, Marco e Veronica
 jQuery('span:nth-last-child(4)').addClass('active');
 // seleziona Luca
 jQuery('span:nth-of-type(1)').addClass('active');
 // seleziona Luca e Alessia
 jQuery('span:nth-last-of-type(1)').addClass('active');
 // seleziona Mirko e Vanessa
 jQuery('span:only-child').addClass('active');
 // non restituisce nulla
 jQuery('b:only-of-type').addClass('active');
 // restituisce Maria
})
</script>

Selettori di attributo

È possibile selezionare gli elementi anche in base al valore dei loro attributi. Bisgona sottolineare che jQuery considera come una singola stringa anche più valori separati da uno spazio. Ad esempio, $(“a[rel=’nofollow’]”) non corrisponde a $(“a[rel=’nofollow external’]”).

$ (“[attributo |= ‘valore’]”) – Seleziona tutti gli elementi con l’attributo il cui valore è uguale o inizia con la stringa ‘valore’.

$ ( “[attributo *= ‘valore’]”) – Seleziona tutti gli elementi con l’attributo il cui valore contiene la stringa passata. La posizione del valore non è rilevante.

$(“[attributo $=’valore’]”) – Seleziona tutti gli elementi con l’attributo il cui valore finisce con la stringa passata.

$ (“[attributo = ‘valore’]”) – Seleziona tutti gli elementi con l’attributo il cui valore è esattamente uguale alla stringa passata.

$( “[attributo ^= ‘valore’]”) – Seleziona tutti gli elementi con l’attributo il cui valore inizia esattamente con la stringa passata.

$(“[attributo != ‘valore’]”) – Seleziona tutti gli elementi che non hanno il determinato attributo o il cui valore è diverso dalla stringa passata.

 <div>
   <span role="one">Luca</span>
   <span role="two">Gabriele</span>
   <span role="third">Marco</span>
   <span role="four">Mirko</span>
 </div>
 <div>
   <b role="one">Maria</b>
   <span role="two">Alessia</span>
   <span role="third">Veronica</span>
   <span role="four">Vanessa</span>
 </div>
<script type="text/javascript">
jQuery(function(){
                  $("[role |= 'one']").addClass('active');
                  // seleziona Luca e Maria
                  $("[role *= 'h']").addClass('active');
                  // seleziona Marco e Veronica
                  $("[role *= 'h']").addClass('active');
                  // seleziona Marco e Veronica
                  $("[role = 'one']").addClass('active');
                  // seleziona Luca e Maria
                  $("[role ^= 'o']").addClass('active');
                  // seleziona Luca e Maria
                  $("span[role != 'one']").addClass('active');
                  // seleziona Gabriele Marco Mirko Alessia Veronica Vanessa
                  })
</script>

Selettori in base al contenuto

Questi selettori si basano sul contenuto degli elementi

:contains(testo) – Seleziona tutti gli elementi che contengono il testo specificato. Il testo può essere contenuto direttamente nell’elemento o all’interno di uno dei suoi nodi figli.

:has(selettore) – Seleziona tutti gli elementi che hanno almeno un elemento al loro interno corrispondente al selettore specificato. Come nel caso precedente, il selettore può essere contenuto anche all’interno di un nodo figlio dell’elemento.

:empty – Seleziona tutti gli elementi che non hanno nodi figli.

:parent – Seleziona tutti gli elementi che hanno almeno un nodo figlio.

Selettori di gerarchia

Questi selettori utilizzano la gerarchia DOM come criterio per la selezione gli elementi

$(“antenato discendente”) – Seleziona tutti gli elementi discendenti di un elemento antenato. Il discendente può essere un figlio, nipote e così via.

$(“padre > figlio”) – È un selettore più preciso di quello precedente e restituisce solo i figli diretti di un genitore.

$(“prev + next”) – Selettore molto preciso. Seleziona l’elemento next, immediatamente preceduto dall’elemento prev

$(“prev ~ elementi”) – Seleziona tutti gli elementi che vengono dopo l’elemento prev

Selettori per i campi dei moduli

jQuery ci da la possibilità di utilizzare selettori brevi per la maggior parte degli elementi contenuti in un modulo elettronico.

Ad esempio possiamo selezionare uno o più pulsanti utilizzando la forma breve $(“:button”) invece che la versione più lunga $(“input[type=’button’]”). Nella stessa maniera è possibile selezionare tutti gli elementi di tipo radio utilizzando $(“:radio”) anziché $(“[type=radio]”).

È inoltre possibile selezionare tutti gli elementi attivati o disattivati, utilizzando rispettivamente i selettori $(“:enabled”)e $(“:disabled”).

Abbiamo anche il selettore $(“:checked”) che seleziona tutti gli elementi che sono stati spuntati o selezionati. Viene applicato a caselle di controllo e nelle opzioni del campo select. Se si desidera selezionare solo le opzioni selezionate del campo select è necessario utilizzare $(“:selected”)

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *