Nelle lezioni precedenti della nostra guida a jQuery abbiamo visto come si selezionano gli elementi del DOM in base a differenti criteri di ricerca. Ora, finalmente, passiamo a vedere cosa fare con questi elementi una volta selezionati.
Il questa lezione affronteremo l’argomento della manipolazione del DOM, ovvero l’inserimento di nuovi elementi in determinati punti del documento, la modifica di quelli esistenti e tutto quello che riguarda la gestione di una pagina HTML e dei suoi componenti.
Partiamo subito con il mostrare come si gestisce il contenuto e gli attributi degli elementi della pagina.
Modificare il contenuto o gli attributi di elementi della pagina
.html() e .text()
Per prima cosa bisogna sapere che jQuery distingue (e gestisce diversamente) il codice HTML dal semplice testo. Il primo è il codice che otterremmo dalla funzione Javascript innerHTML(), il secondo invece è il contenuto depurato dall’HTML.
I metodi che consentono di recuperare, sotto forma di codice HTML o testo, il contenuto di un dato elemento della pagina sono .html() e .text().
Come accade spesso, jQuery utilizza lo stesso nome anche per i metodi di SET, ovvero i metodi che permettono di impostare un nuovo valore per l’elemento: questi metodi sono appunto .html(codice_html) e .text(stringa_di_testo).
Per farla semplice: se ai metodi .html() e .text() non viene passato nessun attributo allora la loro funzione è di GET (estraggono il contenuto dell’elemento specificato nel selettore), in caso contrario avranno la funzione di modificarne il contenuto.
Vediamo alcuni semplici esempi del loro utilizzo. Supponiamo di avere il seguente codice HTML:
<ul class="nomi">
<li>Giovanni</li>
<li>Luca</li>
<li>Claudio</li>
</ul>// recupero il contenuto dell'elenco con classe "nomi"
// il contenuto comprenderà i tag HTML
var codice = $("ul.nomi").html();
// recupero il contenuto depurato da tutti i tag HTML
// il contenuto sarà "Giovanni Luca Claudio"
var testo = $("ul.nomi").text();Vediamo ora come assegnare un nuovo contenuto HTML ad un elemento della pagina:
// assegno il codice HTML ad un DIV con classe "nuovo"
$("div.nuovo").html("<p>Questo è codice <b>HTML</b></p>");.attr()
Se invece del testo o del codice HTML vogliamo recuperare o impostare il valore di un attributo possiamo ricorrere al metodo .attr() mediante la sintassi attr(nome_attributo) (GET) o attr(nome_attributo, valore) (SET). Vediamo degli esempi:
// recupero il valore dell'attributo src dell'immagine con ID #foto
var fotourl = $("#foto").attr("src");
// imposto un nuovo valore per l'attributo alt della stessa immagine
$("#foto").attr("alt", "Una bella foto del tramonto!");
// imposto più attributi in un colpo solo
$("#foto").attr({
alt: "Una bella foto del tramonto!",
title: "foto di Mario Rossi"
});.val()
Per interagire con i valori degli elementi di un form (input, textarea, select,…) è presente il metodo .val() che permette all’utente sia di recuperare (GET) che di impostare (SET) tali valori in modo pressochè analogo a quanto visto con .text(). Di seguito degli esempi:
// recupero il valore selezionato nella selectbox con ID #provincia
$("#provincia").val();
// imposto una valore per la stessa selectbox
$("#provincia").val("Milano");
// imposto un valore per un campo input con ID #nome
$("#nome").val("Mario");.addClass()
Mediante questo metodo è possibile aggiungere una classe ad un dato elemento o set di elementi. Questo metodo è speculare a removeClass()> di cui parleremo più avanti in questa lezione. Vediamo un semplice esempio:
// aggiungo due classi a tutti i paragrafi del documento
$("p").addClass("testopiccolo testoevidenziato");Per adesso abbiamo solamente visto come lavorare con il contenuto degli elementi. Ora passiamo a vedere come si modifica realmente il DOM, ovvero come si effettuano operazioni di inserimento o di modifica degli elementi.
Modificare il DOM aggiungendo nuovi elementi
I metodi utili per questa operazione differiscono in base alla posizione in cui si vuole inserire il nuovo elemento, rispetto ad uno già esistente. Alcune delle possibili opzioni forniteci da jQuery sono le seguenti:
- before(): prima dell’elemento o degli elementi selezionati;
- after(): dopo l’elemento o gli elementi selezionati;
- prepend(): internamente al’inizio dell’elemento o degli elementi selezionati;
- append(): internamente alla fine dell’elemento o degli elementi selezionati.
Vediamo un esempio dell’utilizzo di before(). Questo è la parte di pagina prima dell’applicazione del metodo.
<div class="categorie">
<h1>Sport</h1>
<div class="sub_cat">Calcio</div>
<div class="sub_cat">Nuoto</div>
</div>Aggiungiamo un paragrafo con la scritta "Test"
$(".sub_cat").before("<h2>Intestazione Sottocategorie</h2>");Questo è il risultato ottenuto dopo l’esecuzione del nostro codice jQuery:
<div class="categorie">
<h1>Sport</h1>
<h2>Intestazione Sottocategorie</h2>
<div class="sub_cat">Calcio</div>
<h2>Intestazione Sottocategorie</h2>
<div class="sub_cat">Nuoto</div>
</div>Il funzionamento degli altri metodi citati è il medesimo di before(). Si noti che con .after() e .before(9 il contenuto viene aggiunto all’esterno dell’elemento selezionato, mentre con .append() e .prepend() al suo interno.
OLtre ai metodi citati, jQuery ne offre altri che sono insertBefore(), insertAfter(), appendTo e prependTo.
Questi metodi differiscono dai corrispettivi visti in precedenza in quanto l’elemento target è specificato non nel selettore ma nell’attributo del metodo, in quanto la funzione $() contiene il codice HTML che si desidera inserire nel DOM (come abbiamo già visto nella seconda lezione della nostra guida). Vediamo un esempio:
$('<p>testo</p>').appendTo('#target');Eliminare attributi, classi o un intero elemento
Oltre all’aggiunta, ovviamente, è possibile anche effettuare l’operazione di eliminazione di un elemento o di una delle sue caratteristiche. A tal proposito jQuery offre una serie di metodi che permettono, appunto, di rimuovere attributi, classi o anche tutto l’elemento selezionato.
- removeAttr(): rimuove un attributo dall’elemento o dagli elementi selezionati;
- removeClass(): rimuove una classe dall’elemento o dagli elementi selezionati;
- remove(): rimuove un elemento dal DOM.
Vediamo qualche semplice esempio:
// rimuovo l'attributo disabled da un campo input
$("input#nome").removeAttr("disabled");
// rimuovo una classe dall'elemento con ID #articolo
$("#articolo").removeClass("testopiccolo");
// spesso removeClass è utilizzata in combinazione con addClass
// ad esempio per effettuare qualche effetto su un bottone
$("#bottone").removeClasse("spento").addClass("attivo");
// rimuovo tutti gli elementi con classe .testo
$(".testo").remove();Tramite opportune combinazioni dei metodi visti in questa lezione è possibile effettuare qualsiasi tipo di operazione all’interno del DOM.
