JQuery/Modificare il DOM

Una potente caratteristica di jQuery (e quindi anche di Javascript) è quella di fornire numerosi metodi per modificare, dal lato client, gli elementi HTML, i loro attributi e la struttura stessa del document.

Le modifiche inserite nel codice jQuery vengono eseguite quando l'utente attiva un elemento al quale è legato un gestore di eventi, così le pagine vengono rese dinamiche senza interazione con il server.

Manipolare il contenuto dei tag

Per recuperare e impostare il contenuto di tag HTML si usano i metodi:

text() recupera e imposta il contenuto testuale dell'elemento selezionato
html() recupera e imposta il contenuto dell'elemento compresi i tag HTML
val() recupera e imposta i valori inseriti nei campi dei form

Come si può vedere in questo caso, jQuery spesso utilizza la stessa sintassi sia per recuperare il contenuto di un elemento che per settarlo.

Ad esempio:

$("#bottone").click(function(){
    alert("Value: " + $("#input1").val());
  });

mostra un alert con il testo inserito nel campo con id input1 quando l'utente invia il form.

Modificare gli attributi

Per modificare gli attributi dei tag HTML si usa il metodo:

attr() recupera e imposta uno o più attributi dell'elemento selezionato

La sintassi è:

attr(attributo : valore)

Ad esempio:

$("button").click(function(){
    $("#link1").attr({
       "href" : "http://it.wikibooks.org/wiki/JQuery",
       "title" : "Wikibooks jQuery Tutorial"
     });
  });

imposta un nuovo valore per gli attributi href e title del link con id link1.

Per rimuovere un attributo dall'elemento selezionato si usa removeAttr().

Aggiungere elementi al DOM

Prima abbiamo visto metodi che sostituiscono per intero il contenuto dei tag. Ora vedremo alcuni metodi che permettono di aggiungere contenuto in una determinata posizione:

append() inserisce contenuto alla fine dell’elemento selezionato
prepend() inserisce contenuto all’inizio dell’elemento
after() inserisce contenuto dopo l’elemento
before() inserisce contenuto prima dell’elemento
wrap() avvolge l'elemento selezionato con gli elementi passati come parametro

Questi metodi possono essere usati sia per inserire del semplice testo, ma anche per aggiungere elementi al DOM, attraverso tag HTML, codice jQuery, o Javascript.

Ad esempio:

function afterText()  {
   var txt1="<b>I </b>";   // elemento creato con HTML
   var txt2=$("<i></i>").text("love ");   // con jQuery
   var txt3=document.createElement("big");  // con Javascript
   txt3.innerHTML="jQuery!";   // con DOM
   $("img").after(txt1,txt2,txt3);
   // inserisce nuovi elementi dopo img
}

la funzione afterText() crea un blocco HTML e poi lo inserisce con after() dopo l’immagine.

Per rimuovere elementi invece si usano i metodi:

remove() rimuove l'elemento selezionato e i suoi elementi figli. remove() accetta come parametro un selettore per filtrare ulteriormente la selezione
empty() rimuove gli elementi figli dell'elemento selezionato
unwrap() rimuove l'elemento genitore dell'elemento selezionato

Manipolare le proprietà CSS degli elementi

jQuery fornisce molti metodi per modificare le proprietà CSS associate agli elementi HTML. Il metodo fondamentale è css(), che recupera e imposta gli attributi di stile dell'elemento selezionato.

css("proprietà_css", "valore")

Questo metodo utilizza gli stessi nomi delle proprietà CSS dei fogli di stile.

Ad esempio:

$("p").css({"background-color":"green","font-size":"150%"});

Esistono anche metodi per proprietà specifiche.

offset() recupera e imposta la posizione di un elemento rispetto al document, specificando le coordinate dall'alto e da sinistra
position() recupera e imposta le distanze dall'alto e da sinistra rispetto all'elemento selezionato: $(selettore).position()

Altri metodi servono per modificare le dimensioni degli elementi.

Dimensioni degli elementi e della window

Le dimensioni di un elemento del DOM sono deteriminate dalla sua width/height, più il padding, i bordi e il margine. I seguenti metodi agiscono su queste specifiche proprietà:

width() recupera e imposta la lunghezza di un elemento
height() agisce sulla proprietà css height
innerWidth() e innerHeight() agiscono sulla lunghezza/altezza interna includendo il padding
outerWidth() e outerHeight() agiscono sulle dimensioni esterne, comprendendo quindi anche padding, bordi e margini

Ad esempio:

$("bottone").click(function(){
  $("#div1").width(700).height(400);
});

imposta le dimensioni dell'elemento selezionato.