JQuery/Selettori

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
$("#id_element");
// ho utilizzato jQuery

È evidente come il codice jQuery sia più agile e compatto.

La sintassi è la stessa dei selettori CSS, con in più alcuni selettori specifici.

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

$("p")

Ad esempio:

$(document).ready(function(){
   $("button").click(function(){
      $("p").hide();
    });
 });

quando l’utente clicca sul bottone tutti gli elementi paragrafo vengono nascosti.

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, perché 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:

$("#test")

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:

$("p.class1")

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

$("[href]")

È possibile selezionare elementi anche in base alla gerarchia degli elementi nella pagina (“selettori gerarchici”):

• elementi figli: sono quegli elementi contenuti in un altro
• elementi fratelli: sono quegli elementi che sono allo stesso livello di un altro

Per selezionare un elemento figlio si scrive:

$("elemento_genitore elemento_figlio")

Ad esempio:

$("ul#menu li");

seleziona tutte 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")

Per selezionare un elemento fratello si scrive:

$("elemento1 + elemento2")

Ad esempio:

$("label + input")

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")

Un primo gruppo di filtri può servire a selezionare elementi in base alla posizione rispetto all’elemento contenitore:

• first identifica il primo elemento figlio contenuto nell’elemento
• last identifica l’ultimo elemento figlio contenuto nell’elemento
• odd identifica gli elementi dispari tra quelli contenuti
• eq(n) identifica l’elemento n contenuto nell'elemento

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

$('elemento[attributo]')

o lo stesso valore di un attributo:

$('elemento[attributo="valore"]')

Un altro gruppo di filtri serve a selezionare elementi in base alla visibilità:

• hidden seleziona gli elementi nascosti

oppure in base a un’esclusione:

• 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")