.png){kind=small}
jQuery, i selettori
Il selettore jQuery ti permette di trovare gli elementi DOM nella sua pagina web. La maggior parte delle volte inizierà con la funzione di selezione $() nella jQuery.
Sintassi:
$(espressione selettore, contesto)
Il parametro di espressione del selettore specifica uno schema che corrisponde agli elementi. La jQuery utilizza i modelli di selezione dei CSS. Il parametro del contesto è facoltativo. Esso specifica gli elementi in una gerarchia DOM da dove jQuery inizia la ricerca degli elementi corrispondenti.
Vediamo i selettori comunemente utilizzati in jQuery.
Selezionare gli elementi per nome
Il modello di selezione più comune è il nome dell'elemento. Specificando il nome di un elemento come stringa, ad esempio $('p') si restituisce un array di tutti gli elementi <p> di una pagina web.
Prova il codice html qui sotto.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
</script>
<script>
$(document).ready(function () {
$('p').append('Un paragrafo');
$('div').append('Un div');
});
</script>
<style>
div{
border: 1px solid;
}
p{
border: 1px dashed;
}
</style>
</head>
<body>
<div>
<p></p>
<p></p>
</div>
<p></p>
<div></div>
</body>
</html>
Il metodo jQuery append() inserisce il testo alla fine dell'elemento.
Seleziona gli elementi per Id
È possibile recuperare un elemento particolare utilizzando il metodo di selezione dell'id. Specifichi un id di un elemento per il quale vuoi ottenere il riferimento, iniziando con il simbolo #.
$('#par1').append('This element\'s id is "par1"');
$('#div2').append('This element\'s id is "div2"');
<div id="div1">
<p></p>
</div>
<p id="par1"></p>
<div id="div2">
</div>
Selezionare gli elementi per attributo
jQuery ti permette inoltre di trovare un elemento in base agli attributi impostati su di esso. Specificando il nome di un attributo tra parentesi quadre, ad esempio $('[class]') restituirà tutti gli elementi che hanno l'attributo di classe indipendentemente dal valore.
$('[class]').append('Questo elemento ha l'attributo class.');
<div id="div1">
<p></p>
</div>
<p id="par" class="grassetto"></p>
<div id="div2" class="sfondo-colorato">
</div>
Puoi anche specificare il nome della classe per selezionare una specifica classe.
$('[class="sfondo-colorato"]').append('Questo elemento ha l'attributo di classe sfondo-colorato.');
Modelli di selezione jQuery
jQuery offre diversi modi per selezionare uno o più elementi DOM specifici. La seguente tabella elenca i modelli più importanti.
<<<
>>>