In questa lezione jQuery, vediamo i diversi metodi per recuperare il contenuto degli attributi di un elemento, aggiungere un attributo, modificarlo o rimuoverlo.
I metodi per gli attributi
Ecco i diversi metodi jQuery che si possono utilizzare per gli attributi.
| Metodo | Descrizione |
.attr() | Recupera o aggiunge un attributo all'elemento specificato. |
.removeAttr() | Rimuove un attributo all'elemento specificato. |
.addClass() | Aggiunge la classe o le classi all'elemento specificato. |
.removeClass() | Rimuove la classe o le classi all'elemento specificato. |
Vediamo i metodi in dettaglio.
Il metodo .attr()
Il metodo .attr() è utilizzato per ottenere o impostare il valore di un attributo di un elemento o degli elementi HTML specificati.
Sintassi del metodo .attr():
$(selettore).attr(nome_attributo).$(selettore).attr(nome_attributo, valore).Vediamo un esempio con un'immagine HTML (non conosci le immagini? Vai alla lezione HTML specifica):
<img src="foto.jpg" height="100px">
<script>
// Ottenere il valore dell'attributo src dell'immagine
var src = $("img").attr("src");
alert("Valore dell'attributo src:" + src);
// Impostare il valore di larghezza (width)
$("img").attr("width", "100px");
</script>Il metodo .removeAttr()
Il metodo .removeAttr() rimuove un attributo selezionato da un elemento o dagli elementi HTML specificati.
Sintassi del metodo .removeAttr():
$(selettore).removeAttr(nome_attributo).Ecco un esempio con questo metodo:
<img src="foto.jpg" height="100px" alt="Un'immagine di fiori">
<script>
// Rimuovere l'attributo "alt" dall'immagine
$("img").removeAttr("alt");
</script>Il metodo .addClass()
Il metodo .addClass() aggiunge una o più classi all'elemento o agli elementi selezionati.
Sintassi del metodo .addClass():
$(selettore).addClass(classe1, classe2, ...).Vediamo un esempio con .addClass():
<p id="parola">Cagnolino</p>
<script>
// Aggiungere la classe "evidenziato" al testo #parola
$("#parola").addClass("evidenziato");
</script>Il metodo .removeClass()
Il metodo .removeClass() rimuove una o più classi dall'elemento o dagli elementi selezionati.
Sintassi del metodo .removeClass():
$(selettore).removeClass(classe1, classe2, ...).Ecco un esempio con questo metodo:
<p id="parola" class="testo evidenziato">Cagnolino</p>
<script>
// Rimuovere la classe "evidenziato" dal testo con id=parola
$("#parola").removeClass("evidenziato");
</script>