Nella lezione precedente abbiamo visto la sintassi delle istruzioni jQuery. Ora vediamo come selezionare gli elementi all'interno di una pagina HTML utilizzando i selettori jQuery.
A cosa servono i selettori
L'obbiettivo principale della libreria di jQuery è manipolare la pagina HTML, ad esempio facendo apparire e scomparire menu, animando elementi o modificando dinamicamente il contenuto della pagina. Per questo motivo, è necessario specificare un elemento per svolgere un'istruzione.
La sintassi base di un'istruzione jQuery è:
$(selettore).metodo()Per cercare un elemento, utilizziamo proprio il selettore. Vediamo la sintassi da usare.
I diversi tipi di selettori
Esistono diversi tipi di selettori che possono essere usati per cercare gli elementi in una pagina HTML. Li vediamo insieme nel dettaglio.
Il selettore tramite id
Il modo più semplice per trovare un elemento è tramite il suo id.
Nota: se non conosci cosa sono gli id degli elementi, prova a dare un'occhiata alla lezione HTML dedicata.
Per utilizzare l'id, si usa la sintassi #id.
<p id="testo">Un testo che si dissolve</p>
<script>
$(document).ready(function(){
$("#testo").fadeOut();
});
</script>In questo esempio, è stato usato l'id testo per selezionare il testo.
Il metodo .fadeOut() permette di nascondere l'elemento con una dissolvenza (lo vedremo nella lezione sulla dissolvenza degli elementi).
Il selettore tramite class
Oltre all'id, si può utilizzare anche la classe dell'elemento. In questo caso, la sintassi è .classe.
<p class="testo">Un testo che si dissolve</p>
<script>
$(document).ready(function(){
$(".testo").fadeOut();
});
</script>Se all'interno della pagina esistono più elementi con la stessa classe, allora la stessa istruzione verrà eseguita a tutti.
Il selettore tramite tag
Se si vuole scegliere un elemento tramite il proprio tag, ad esempio <p> o <h1>, si può utilizzare come selettore in jQuery. Questa volta non servono prefissi come nel caso dell'id o della classe.
<p>Un testo che si dissolve</p>
<script>
$(document).ready(function(){
$("p").fadeOut();
});
</script>Se all'interno della pagina web esistono più tag uguali, allora l'istruzione verrà eseguita a tutti.
Selettori particolari
Oltre a quelli citati prima, esistono altri selettori che si possono utilizzare in jQuery.
| Selettore | Descrizione |
$("[attributo]") | Ricerca gli elementi che contengono l'attributo indicato. |
$("[attributo=valore]") | Ricerca gli elementi che contengono l'attributo indicato e hanno il valore dell'attributo specificato. |
$("tag.classe") | Ricerca un specifico tag con una specifica classe. |
$("*") | Seleziona tutti gli elementi della pagina. |
$(":not(selettore)") | Ricerca gli elementi che non hanno il selettore specificato. |