# JQuery/Modificare il DOM

jQuery
Copertina Tutti i moduli · Sviluppo
* IntroduzioneJQuery/Introduzione
* SelettoriJQuery/Selettori
* Le actionsJQuery/Le actions
* Gestire gli eventiJQuery/Gestire gli eventi
* EffettiJQuery/Effetti
* Modificare il DOMJQuery/Modificare il DOM
* jQuery per AJAXJQuery/jQuery per AJAX
* CreditiJQuery/Crediti
Modifica il sommario
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:
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 è:
Ad esempio:
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:
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.
Questo metodo utilizza gli stessi nomi delle proprietà CSS dei fogli di stile.
Ad esempio:
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:
imposta le dimensioni dell'elemento selezionato.