Selettori jQuery

I selettori ti permettono di operare su gruppi di elementi o su elementi singoli.

Selettori jQuery

Nelle sezioni precedenti, abbiamo mostrato alcuni esempi su come selezionare elementi HTML.

Il punto chiave è imparare come i selettori jQuery selezionano accuratamente gli elementi HTML ai quali applicare l'effetto desiderato.

I selettori di elemento jQuery e i selettori di attributo permettono di selezionare gli elementi HTML tramite nome di tag, nome di attributo o contenuto.

I selettori permettono di eseguire operazioni su gruppi di elementi HTML o su un singolo elemento.

In termini di HTML DOM:

I selettori permettono di eseguire operazioni su gruppi di elementi DOM o su un singolo nodo DOM.

Selezionatori di elemento jQuery

jQuery utilizza i selettori CSS per selezionare gli elementi HTML.

$("p") seleziona gli elementi <p>.

$("p.intro") seleziona tutti gli elementi <p> con class="intro".

$("p#demo") seleziona tutti gli elementi <p> con id="demo".

Selezionatori di attributo jQuery

jQuery utilizza espressioni XPath per selezionare gli elementi con un attributo specifico.

$("[href]") seleziona tutti gli elementi con attributo href.

$("[href='#']") seleziona tutti gli elementi con valore href uguale a "#".

$("[href!='#']") seleziona tutti gli elementi con valore href diverso da "#".

$("[href$='.jpg']") seleziona tutti gli elementi con valore href che termina con ".jpg".

Selezionatori CSS jQuery

I selezionatori CSS jQuery possono essere utilizzati per modificare le proprietà CSS degli elementi HTML.

Esempio seguente: tutti gli elementi <p> hanno il colore di sfondo cambiato in rosso:

Esempio

$("p").css("background-color","red");

Prova tu stesso

Più esempi di selezionatori

Sintassi Descrizione
$(this) l'elemento HTML corrente
$("p") tutti gli elementi <p>
$("p.intro") tutti gli elementi <p> con class="intro"
$(".intro") tutti gli elementi con class="intro"
$("#intro") l'elemento con id="intro"
$("ul li:first") il primo elemento <li> di ogni <ul>
$("[href$='.jpg']") tutti gli attributi href che terminano con ".jpg"
$("div#intro .head") tutti gli elementi con class="head" dell'elemento <div> con id="intro"

Per una guida completa, visitate il nostro Manuale di selezionatori jQuery.