La funzione attr() di jQuery
Una delle funzionalità più utili di jQuery è la possibilità di leggere il valore degli attributi negli elementi html tramite il metodo attr().
elemento.attr('attributo')
La funzione attr() verifica se esiste un attributo specifico nell'elemento indicato ( tag ) e ne preleva il valore.
Mi permette così di leggere ed eventualmente assegnare il valore dell'attributo in una variabile.
Un esempio pratico
In questo documento html ho inserito un elemento <img> per visualizzare un'immagine.
<html>
<body>
<img src="/test.gif" alt="prova">
</body>
</html>
L'elemento <img> ha due attributi.
- src=nome del file
- alt=testo alternativo da visualizzare se l'immagine non è caricata
Ora leggo il contenuto dell'attributo ALT tramite la funzione attr() di jQuery.
$(document).ready(function() {
x=$('img').attr('alt');
);
La funzione attr() cerca un elemento 'img' nel documento html.
Quando lo trova verifica se esiste l'attributo 'alt' al suo interno.
Quindi legge il valore dell'attributo 'alt' e lo memorizza nella variabile x.
x='prova'
Al termine dell'elaborazione il contenuto della variabile x è il valore 'prova' ossia il valore dell'attributo alt dell'elemento img.
Cosa accade se ci sono più elementi uguali nel documento html
Il linguaggio jQuery verifica soltanto la prima occorrenza che trova.
Quindi, se ci sono più elementi img nel documento, i successivi sono ignorati.
Esempio
In questo documento html ci sono due elementi img.
<html>
<body>
<img src="/test1.gif" alt="prova 1">
<img src="/test2.gif" alt="prova 2">
</body>
</html>
Se provo a leggere il contenuto dell'attributo alt dell'elemento img, jQuery verifica solo il primo elemento.
$(document).ready(function() {
x=$('img').attr('alt');
);
Quindi il risultato assegnato alla variabile x è
x='prova 1'
Il secondo elemento è ignorato.
Come leggere gli attributi di un tag html specifico
Per leggere un elemento specifico del documento html, devo specificare la classe (class) o l'identificativo (id).
Esempio
In questo documento ho assegnato un id al secondo elemento <img>
<html>
<body>
<img src="/test1.gif" alt="prova 1">
<img id="due" src="/test2.gif" alt="prova 2">
</body>
</html>
Per leggere il valore dell'attributo alt sul secondo elemento specifico il suo id nel metodo attr().
$(document).ready(function() {
x=$('#due').attr('alt');
);
La funzione attr() cerca un elemento con l'id #due.
Lo trova nel secondo elemento <img>, ne preleva il valore alt e lo assegna alla variabile x.
x='prova 2'
In questo modo riesco a leggere l'attributo di un elemento <img> specifico nel documento html anche se ce ne sono diversi.
Come modificare un attributo html con jQuery
La funzione attr() mi permette anche di cambiare il valore di un attributo in un elemento specifico.
Esempio
Nel documento html ho un tag <img> con due attributi: src e alt.
<img src="/foto1.gif" alt="benvenuto">
L'attributo src indica il file dell'immagine mentre l'attributo alt contiene il testo alternativo.
Posso usare jQuery per modificare i due attributi.
$('img').attr({src:'/foto2.gif', alt:'arrivederci' });
Questo script modifica tutti i tag <img> nel documento e li imposta con i nuovi valori.
Dopo l'esecuzione dello script il tag diventa
<img src="/foto2.gif" alt="arrivederci">
Ovviamente, se voglio modificare una determinata immagine, devo selezionarla in modo più specifico, ad esempio tramite classe o id.
Ad esempio, per cambiare soltanto il tag <img> con l'attributo src='/foto1.gif' posso scrivere.
oldSrc='/foto1.gif';
$('img[src="' + oldSrc + '"]').attr('alt', 'arrivederci');
Quest'ultimo script cambia soltanto un tag <img> specifico e lascia immutati tutti gli altri.
E così via.
