JQuery/Selettori: differenze tra le versioni

Contenuto cancellato Contenuto aggiunto
Pagina svuotata
Riga 1:
{{jQuery}}
 
==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:
<source lang=jquery>
document.getElementById("id_element");
// ho utilizzato Javascript
$("#id_element");
// ho utlilizzato jQuery</source>
E’ 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 è sufficente quindi usare come selettore il tag stesso
<source lang=jquery>
$("p")</source>
Ad esempio:
<source lang=jquery>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});</source>
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, 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 lang=jquery>
$("#test")
</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 lang=jquery>
$("p.class1")
</source>
Per selezionare elementi che hanno uno stesso attributo, si scrive l’attributo racchiuso da parentesi quadre:
<source lang=jquery>
$("[href]")
</source>
 
E’ possibile selezionare elementi anche in base alla gerarchia degli elementi nella pagina (“selettori gerarchici”):
* elementi figli: sono quegli elementi contenuti in un alto
* elementi fratelli: sono quegli elementi che sono allo stesso livello di un altro
Per selezionare un elemento figlio si scrive:
<source lang=jquery>
$("elemento_genitore elemento_figlio")
</source>
Ad esempio:
<source lang=jquery>
$("ul#menu li");
</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:
<source lang=jquery>
$("elemento1 > elemento2")
</source>
 
Per selezionare un elemento fratello si scrive:
<source lang=jquery>
$("elemento1 + elemento2")
</source>
Ad esempio:
<source lang=jquery>
$("label + input")
</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 è:
<source lang=jquery>
$("elemento:filtro")
</source>
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 conenuto 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:
<source lang=jquery>
$('elemento[attributo]')
</source>
o lo stesso valore di un attributo:
<source lang=jquery>
$('elemento[attributo="valore"]')
</source>
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:
<source lang="jquery">
$("input[type='text']") // è la versione completa del comando
$(":text") // è la versione abbreviata dello stesso comando
</source>
seleziona tutti gli elementi input di tipo text.
Per trovare tutte le scelte fatte da un utente sui checkbox della pagina si scrive:
<source lang="jquery">
$(":checked")
</source>
 
[[Categoria:jQuery|Selettori]]
{{Avanzamento|100%|20 ottobre 2012}}