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>