Approfondimento su jQuery

Lezioni

Lezione 5: Esercitazione sui selettori di jQuery

14 apr , 2014  

In questa lezione faremo degli esercizi sull’uso dei selettori di jQuery, in modo tale da avere tutte le conoscenze necessarie per manipolare il DOM. Su questo, anche individualmente vi consiglio di fare un bel pò di esercizi. Sono reperibili diverse tabelle riepilogative e articoli di approfondimento.

A tal proposito ecco una tabella di riepilogo con i principali selettori utilizzati frequentemente:

Selettori jQuery
Selettore Esempio Seleziona
* $("*") Tutti gli elementi
#id $("#lastname") L’elemento con id lastname
.class $(".intro") Tutti gli elementi con classe intro
element $("p") Tutti gli elementi p
.class.class $(".intro.demo") Tutti gli elementi con le classi intro e demo
:first $("p:first") Il primo elemento p
:last $("p:last") L’ultimo elemento p
:even $("tr:even") Tutti gli elementi tr pari
:odd $("tr:odd") Tutti gli elementi tr dispari
:eq(index) $("ul li:eq(3)") Il quarto elemento nella lista (l’indice parte da 0)
:gt(no) $("ul li:gt(3)") Elementi della lista con indice superiore a 3
:lt(no) $("ul li:lt(3)") Elementi della lista con indice minore di 3
:not(selector) $("input:not(:empty)") Tutti gli input che non sono vuoti
:header $(":header") Tutte le intestazioni (h1, h2 ecc.)
:animated $(":animated") Tutti gli elementi animati
:contains(text) $(":contains('test')") Tutti gli elementi che contengono la stringa specificata
:empty $(":empty") Tutti gli elementi privi di nodi figlio
:hidden $("p:hidden") Tutti gli elementi p nascosti
:visible $("table:visible") Tutte le tabelle visibili
s1,s2,s3 $("th,td,.intro") Tutti gli elementi a cui corrispondono i rispettivi selettori
[attribute] $("a[href]") Tutti gli elementi a con un attributo href
[attribute=value] $("a[href='default.htm']") Tutti gli elementi a con attributo href uguale a default.htm
[attribute!=value] $("a[href!='default.htm']") Tutti gli elementi a con attributo href diverso da default.htm
[attribute$=value] $("img[src$='.jpg']") Tutti gli elementi img con attributo src che termina con .jpg
:input $(":input") Tutti gli elementi di input (input, textarea ecc.)
:text $(":text") <input type="text"/>
:password $(":password") <input type="password"/>
:radio $(":radio") <input type="radio"/>
:checkbox $(":checkbox") <input type="checkbox"/>
:submit $(":submit") <input type="submit"/>
:reset $(":reset") <input type="reset"/>
:button $(":button") <input type="button"/>
:image $(":image") <input type="image"/>
:file $(":file") <input type="file"/>
:enabled $(":enabled") Elementi di input attivi
:disabled $(":disabled") Elementi di input disabilitati
:selected $(":selected") Elementi di input selezionati
:checked $(":checked") Elementi di input spuntati (checkbox)

Contenuto riservato agli studenti del corso.

SEO Manager presso Condé Nast SpA


, , ,