Differenze tra le versioni di "JQuery/Selettori"

m
Update syntaxhighlight tags - remove use of deprecated <source> tags
(ortografia)
m (Update syntaxhighlight tags - remove use of deprecated <source> tags)
 
Vediamo come avverrebbe questo con Javascript e confrontiamolo con jQuery:
<sourcesyntaxhighlight lang=jquery>
document.getElementById("id_element");
// ho utilizzato Javascript
$("#id_element");
// ho utilizzato jQuery</sourcesyntaxhighlight>
È evidente come il codice jQuery sia più agile e compatto.
 
 
Per selezionare tutti gli elementi che hanno lo stesso tag è sufficiente quindi usare come selettore il tag stesso:
<sourcesyntaxhighlight lang=jquery>
$("p")</sourcesyntaxhighlight>
Ad esempio:
<sourcesyntaxhighlight lang="jquery">
$(document).ready(function(){
$("button").click(function(){
});
});
</syntaxhighlight>
</source>
quando l’utente clicca sul bottone tutti gli elementi paragrafo vengono nascosti.
 
 
Per selezionare un elemento con uno specifico id, si scrive il simbolo cancelletto # seguito dall’id dell’elemento:
<sourcesyntaxhighlight lang="jquery">
$("#test")
</syntaxhighlight>
</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:
<sourcesyntaxhighlight lang="jquery">
$("p.class1")
</syntaxhighlight>
</source>
 
Per selezionare elementi che hanno uno stesso attributo, si scrive l’attributo racchiuso da parentesi quadre:
<sourcesyntaxhighlight lang="jquery">
$("[href]")
</syntaxhighlight>
</source>
 
È possibile selezionare elementi anche in base alla gerarchia degli elementi nella pagina (“selettori gerarchici”):
* '''elementi fratelli''': sono quegli elementi che sono allo stesso livello di un altro
Per selezionare un elemento figlio si scrive:
<sourcesyntaxhighlight lang="jquery">
$("elemento_genitore elemento_figlio")
</syntaxhighlight>
</source>
Ad esempio:
<sourcesyntaxhighlight lang="jquery">
$("ul#menu li");
</syntaxhighlight>
</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:
<sourcesyntaxhighlight lang="jquery">
$("elemento1 > elemento2")
</syntaxhighlight>
</source>
 
Per selezionare un elemento fratello si scrive:
<sourcesyntaxhighlight lang="jquery">
$("elemento1 + elemento2")
</syntaxhighlight>
</source>
Ad esempio:
<sourcesyntaxhighlight lang="jquery">
$("label + input")
</syntaxhighlight>
</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 è:
<sourcesyntaxhighlight lang="jquery">
$("elemento:filtro")
</syntaxhighlight>
</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
 
I filtri basati sugli attributi selezionano gli elementi che hanno uno stesso attributo:
<sourcesyntaxhighlight lang="jquery">
$('elemento[attributo]')
</syntaxhighlight>
</source>
o lo stesso valore di un attributo:
<sourcesyntaxhighlight lang="jquery">
$('elemento[attributo="valore"]')
</syntaxhighlight>
</source>
 
Un altro gruppo di filtri serve a selezionare elementi in base alla visibilità:
 
Un particolare gruppo di filtri è dedicato ai form. In questo caso i comandi sono ancora più sintetici. Ad esempio:
<sourcesyntaxhighlight lang="jquery">
$("input[type='text']") // è la versione completa del comando
$(":text") // è la versione abbreviata dello stesso comando
</syntaxhighlight>
</source>
seleziona tutti gli elementi input di tipo text.
Per trovare tutte le scelte fatte da un utente sui checkbox della pagina si scrive:
<sourcesyntaxhighlight lang="jquery">
$(":checked")
</syntaxhighlight>
</source>
 
[[Categoria:jQuery|Selettori]]
266

contributi