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,. infattiInfatti l’id dovrebbe essere unico all’interno di una pagina HTML.; Sese si è dato a più elementi lo stesso id, viene preso solo il primo, infattiperchè 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 altoaltro
* '''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">