JQuery/Selettori: differenze tra le versioni
Contenuto cancellato Contenuto aggiunto
Nessun oggetto della modifica |
mNessun oggetto della modifica |
||
Riga 2:
==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");
Line 12 ⟶ 14:
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 <code>#id</code> usa l’attributo <code>id</code> di un tag HTML per trovare uno specifico 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
* '''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>
Line 53 ⟶ 59:
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>
Line 69 ⟶ 75:
== 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>
Line 77 ⟶ 83:
*'''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">
|