I selettori jQuery

I selettori sono una delle funzionalità più importanti della libreria jQuery, perché mi permettono di selezionare e modificare gli elementi html in un documento.

$(" ")

Tutti i selettori di jQuery cominciano con il simbolo del dollaro ($) oppure con la scritta jQuery.

jQuery(" ")

E' la stessa cosa. Ovviamente... è più sintetico usare l'alias $.

A cosa serve un selettore?

Il selettore $() trova un elemento nella pagina in base al suo nome, all'id, alla classe, alla tipologia o al valore degli attributi.

Nota. Anche javascript ha un meccanismo per selezionare in base all'id. E' il metodo document.getElementById("id"). Tuttavia, può selezionare solo un elemento con un id specifico. Quindi, una volta trovato smette di cercare. Il metodo di jQuery, invece, può selezionare anche più elementi del documento.

jQuery analizza i suoi selettori CSS da destra a sinistra.

Poi restituisce un array contenente gli elementi del DOM che soddisfano la condizione di selezione.

Nota. In realtà, quello che JQuery restituisce non è un semplice array ma un oggetto vero e proprio con numerose proprietà e metodi (es. length, addClass, ecc.).

Quanto più il selettore è complesso, tanto più aumenta il tempo di esecuzione dello script.

Un esempio pratico

Ecco qualche esempio pratico di selettore di base in jQuery.

Esempio 1

Per leggere il contenuto del tag <title> di un documento html uso il seguente selettore

$("title")

Lo script cerca il primo tag <title> nella pagina web.

Allo stesso modo posso selezionare i tag <div> della pagina web

$("div")

oppure i tag <p>

$("p")

Esempio 2

Per leggere gli elementi associati alla classe .prova

$(".prova")

Esempio 3

Per leggere gli elementi associati all'id prova

$("#prova")

Nel caso della selezione per id jQuery seleziona solo un elemento.

Quindi, se ci sono due o più elementi con lo stesso id, jQuery smette di cercare dopo aver trovato il primo.

Nota. In un documento html non devono esserci elementi con lo stesso id. L'identificatore serve per etichettare singoli elementi. Viceversa, una classe può essere associata a più elementi.

Esempio 4

Per leggere gli elementi che hanno un attributo href.

$("[href]")

Esempio 5

Per selezionare tutti gli elementi del documento uso il carattere jolly * (asterisco).

$("[*]")

Esempio 6

Per selezionare tutti gli elementi <a> del documento che si trovano all'interno di una struttura <ul> a sua volta dentro una <div> scrivo

$("div>ul a")

oppure

$("div ul a")

Esempio 7

Per selezionare tutti gli elementi <a> del documento che si trovano all'interno di una struttura <ul> a sua volta dentro una <div> associata alla classe .prova scrivo

$("div.prova>ul a")

Esempio 8

Per selezionare tutti gli elementi <a> del documento che si trovano all'interno di una struttura <ul> a sua volta dentro una <div> con identificatore #prova scrivo

$("div#prova>ul a")

I metodi del selettore

Al selettore posso aggiungere un metodo per elaborare l'elemento e compiere azioni specifiche.

Esempio 1

Per nascondere i paragrafi della pagina web uso l'attributo hide()

$("p").hide()

Esempio 2

Per leggere il testo compreso tra il tag di apertura <title> e di chiusura </title> uso l'attributo text()

$("p").text()

In un altro appunto ho usato l'attributo text() per leggere il testo di un paragrafo <p>.

Ovviamente, oltre ai metodi hide() e text() sono soltanto due esempi. Ce ne sono molti altri.

L'importante è aver capito a cosa servono e come usarli.

Esempio 3

Il metodo length conta il numero delle occorrenze presenti nel documento.

Ad esempio, il selettore $("p").lenght conta e restituisce il numero di tag <p> nell documento

$("p").length;

Esempio 4

Il metodo addClass() associa una classe agli elementi selezionati.

$("p").addClass("prova");

Questo metodo aggiunge automaticamente la classe "prova" a tutti gli elementi selezionati.

Pertanto, non devo eseguire un ciclo per associare la classe a ogni elemento <p> della selezione.

Esempio 5

Per applicare la modifica solo a un elemento specifico della selezione posso usare il metodo eq()

Ad esempio, per applicare la modifica solo al primo elemento selezionato aggiungo il metodo eq(0)

$("p").eq(0).addClass("prova");

Per applicare la modifica solo al secondo elemento selezionato aggiungo il metodo eq(1)

$("p").eq(0).addClass("prova");

Esempio 6

Per semplificare il codice posso anche assegnare il selettore a una variabile di caching

Ad esempio, assegno il selettore $("p") alla variabile myVar.

myVar=$("p");
myVar.addClass("prova");

Poi utilizzo la variabile myVar come un oggetto per eseguire i metodi del selettore.

E così via.