Selettori jQuery: come funzionano
Una delle funzionalità più potenti di jQuery è la possivbilità di selezionare praticamente qualsiasi elemento all'interno del codice con precisione e senza problemi, senza dover scrivere lunghe righe di codice javascript temendo l'effetto su browser diversi.
il selettore jquery è praticamente l'elemento di base di tutta l'architettura di questo framework. Tramite il selettore si riceve in risposta un oggetto jquery sul quale possiamo eseguire numerose operazioni come animazioni o simili.
Il funzionamento più semplice del selettore è largamente usato: si possono selezionare elementi della pagina html in base al loro nome, alla loro classe e all'identificativo (id):
$("*") |
seleziona tutti gli elementi |
$("p") |
seleziona tutti gli elementi <p> della pagina |
$(".nomeclasse") |
seleziona tutti gli elementi che hanno la classe "nomeclasse" |
$("a.class") |
seleziona tutti gli elementi <a> che hanno la classe "nomeclasse" |
$("#identificativo") |
seleziona l'elemento che ha l'id "identificativo" |
$("input [type='password']") |
seleziona tutti gli <input> che hanno il type "password" |
$("input [name*='radio']") |
seleziona tutti gli <input> che hanno il name che contiene "radio", ad esempio "radio_button", "button_radio", "button_radio_pre" |
$("input [name^='utente']") |
seleziona tutti i tag input con name che comincia con "utente" ad esempio "utente_nome", "utentenome" ma non "nome_utente" |
$("a [hreflang|='en']") |
seleziona tutti i tag a con hreflang che comincia con il prefisso "en" o è uguale ad "en", ad esempio "en" o "en-uk" ma non "english" |
$("input [name$='utente']") |
seleziona tutti i tag input con name che finisce con "utente", ad esempio "nome_utente" e "nomeutente" ma non "utente_nome" |
$("input [type!='password']") |
seleziona tutti i tag input che non sono di tipo password |
$("img [alt]") |
/seleziona tutte le immagini con l'attributo alt esplicito, se il codice della pagina è scritto correttamente dovrebbe prendere tutte le immagini |
$("input:checked") |
seleziona tutte le checkbox spuntate |
$("option:selected") |
seleziona tutte le option selezionate in una select |
$("p:contains('pippo')") |
seleziona tutti i p che contengono il testo specificato (pippo) |
$("div:empty"); |
seleziona gli elementi div vuoti |
("div:eq(2)") |
seleziona il terzo div della pagina (contando da 0 è il numero 2) |
$("div:lt(3)") |
seleziona i primi tre div della pagina (contando da 0) |
$("div:gt(3)") |
seleziona tutti i div che vengono dopo il quarto(contando da 0) |
$("div:last") |
seleziona l'ultimo div della pagina |
$("div:first") o $("div:eq(0)") |
seleziona il primo div della pagina |
$("table tr:even") |
seleziona le righe pari della tabella (anche queste contando da 0) |
$("table tr:odd") |
seleziona le righe dispari della tabella (anche queste contando da 0) |
$("div:hidden") |
seleziona i div nascosti |
$("div:visible") |
seleziona i div visibili |
$("div:animated") |
seleziona i div che hanno un animazione in corso |
$(elemento1 elemento2) |
seleziona l'elemento 2 all'interno dell'elemento 1 |
$("elemento1 + elemento2") |
seleziona l'elementi 2 preceduto dall'elemento 1 |
$("elemento1 ~ elemento2") |
seeziona tutti gli elementi 2 adiacenti all'elemento 1 |
$("elemento1 > elemento2") |
seleziona tutti gli elementi 2 figli dell'elemento 1 |
$("elemento1, elemento2, elementoN ") |
seleziona tutti gli elementi elencati |
è naturalmente possibile anche sepere se e quanti elementi sono stati selezionati:
if ($(elemento).length>0){}
e
$(elemento).length/code>