Manipolare gli attributi delle pagine web con jQuery

Per ispezionare o cambiare il valore degli attributi che gli elementi all’interno della pagina web hanno, jQuery mette a disposizione una serie di funzioni denominate attr.

All’interno della tabella vediamo quali sono le principali e qual’è il loro scopo.

Metodo	Scopo
attr(nome)	Questa funzione accede al primo elemento corrispondente. Questo metodo è rende semplice recuperare il valore dal primo elemento, nel caso in cui non riesci a trovare nessun elemento con il nome specificato, la funzione restituisce undefined.
attr(proprietà)	Attraverso questo metodo è possibile specificare per una determinata tipologia di elementi una serie di proprietà uguali per tutti gli oggetti. Ad esempio possiamo specificare per tutte le ancore l’apertura di un nuovo collegamento all’interno di una nuova finestra.
attr(chiave,valore)	Specificando la coppia chiave e valore, andiamo ad impostare una singola proprietà a tutti gli elementi corrispondenti che jQuery trova all’interno della pagina.
attr(chiave,funzione)	A tutti quanti gli elementi della pagina, viene impostata una certa proprietà in base ad una funzione specificata. Se ad esempio ci troviamo all’interno di un loop, possiamo distinguere l’ordine degli attributi.
removeAttr(nome)	Esattamente come possiamo impostare nuovi attributi, jQuery ci permette anche di rimuoverli.

Andiamo a vedere adesso qualche esempio.

Creiamo una semplice pagina html con un’immagine che ha un collegamento ipertestuale verso se stessa.

<a href="img/foto.jpg"><img src="img/foto.jpg" alt="image" /></a>

Nella sezione head del documento ho inserito questo piccolo codice CSS, il quale mi ridimensiona la foto in una maniera tale che quando ci faccio click ed apro il collegamento vedo l’immagine nel browser ingrandita:

<style type="text/css">img
{
margin:20px;
width:400px;
height:400px;
}
</style>

in questo caso il collegamento ipertestuale apre l’immagine nella stessa finestra nella quale troviamo. Attraverso jQuery invece modificheremo questo comportamento e faremo aprire l’immagine in una nuova finestra. Vedremo quanto questa operazione è semplice.

$("a").attr("target", "_blank");

Possiamo anche rimuovere un attributo, proviamo quindi a rimuovere il collegamento ipertestuale, tanto per rimanere all’interno dello stesso esempio di prima.

$("a").removeAttr("href");

vediamo un ultimo esempio nel quale ad un elemento andiamo settare delle proprietà.
Prendiamo questa volta l’immagine, e vediamo come possiamo modificarne il src oppure la proprietà alt con la stessa semplicità.

$("a").Attr( {src:"img/foto2.jpg", alt:"foto2" });