JQuery/Selettori: differenze tra le versioni

==I selettori ==

I selettori permettono di selezionare e manipolare gli elementi HTML. Gli elementi possono essere identificati attraverso l’id, la classe, gli attributi, i valori degli attributi e altro ancora. Vediamo come avverrebbe questo con Javascript e confrontiamolo con jQuery:

document.getElementById("id_element");

// ho utilizzato Javascript

 

Per selezionare tutti gli elementi che hanno lo stesso tag è sufficente quindi usare come selettore il tag stesso

Ad esempio:

$(document).ready(function(){

$("button").click(function(){

Il selettore #id usa l’attributo id di un tag HTML per trovare uno specifico elemento, infatti l’id dovrebbe essere unico all’interno di una pagina HTML. Se si è dato a più elementi lo stesso id, viene preso solo il primo, infatti questo selettore ritorna sempre un unico elemento.

Per selezionare un elemento con uno specifico id, si scrive il simbolo cancelletto # seguito dall’id dell’elemento.

</source>

Per selezionare gli elementi in base alla classe, si scrive il nome della classe preceduto da un punto.

Come per i CSS è possibile combinare i selettori, per ottenere ad esempio tutti i paragrafi che hanno la stessa classe:

</source>

Per selezionare elementi che hanno uno stesso attributo, si scrive l’attributo racchiuso da parentesi quadre:

</source>

 

* elementi fratelli: sono quegli elementi che sono allo stesso livello di un altro

Per selezionare un elemento figlio si scrive:

$(“elemento_genitore elemento_figlio”)

</source>

Ad esempio:

</source>

seleziona tutti le voci dell’elenco con id menu.

 

Per selezionare tutti gli elementi direttamente discendenti da un elemento padre, e non anche quelli annidati, si scrive:

$("elemento1 > elemento2")

</source>

 

Per selezionare un elemento fratello si scrive:

$(“elemento1 + elemento2”)

</source>

Ad esempio:

</source>

seleziona tutti gli elementi input preceduti direttamente da un elemento label.

== I filtri di selezione ==

I '''filtri di selezione''', che assomigliano agli pseudo-elementi nei CSS, servono a raffinare la selezione andando a prendere elementi specifici o gruppi di elementi che non sono identificati da tag, e vanno sempre applicati ai selettori visti in precedenza. La sintassi è:

$(“elemento:filtro”)

</source>

*'''eq(n)''' identifica l’elemento n contenuto nell'elemento

I filtri basati sugli attributi selezionano gli elementi che hanno uno stesso attributo:

$('elemento[attributo]')

</source>

o lo stesso valore di un attributo:

$(‘elemento[attributo=”valore”]’)

</source>

*'''not(elemento)''' identifica tutti gli elementi tranne quelli indicati tra parentesi

Un particolare gruppo di filtri è dedicato ai form. In questo caso i comandi sono ancora più sintetici. Ad esempio:

$("input[type='text']") // è la versione completa del comando

$(":text") // è la versione abbreviata dello stesso comando

seleziona tutti gli elementi input di tipo text.

Per trovare tutte le scelte fatte da un utente sui checkbox della pagina si scrive:

$(":checked")

</source>