Vediamo adesso come è possibile attraverso le funzionalità che offre jQuery, manipolare il contenuto della pagina.
Fino ad oggi abbiamo utilizzato selettori e filtri i quali c’hanno consentito di trovare il contenuto della pagina, e di manipolarlo.
Alcune volte potrebbe essere necessario andare a creare qualcosa di dinamico da inserire all’interno della pagina.
È per questo motivo che jQuery ha funzioni per creare, copiare, cancellare e addirittura muovere il contenuto della pagina.
Inoltre jQuery è in grado di manipolare il CSS, con delle funzioni cross-browser, che includono posizionamento e dimensionamento degli elementi.
Per creare nuovo contenuto HTML è sufficiente passare una stringa HTML alla funzione $:
var nuovaTestata = $("<h1>contenuto di testata</h1>");
var Stringa = "<h1>contenuto di testata</h1>");
var nuovaTestata = $(Stringa);
in aggiunta questo sistema, è possibile utilizzare i metodi html() e text() per recuperare e reimpostare il contenuto.
Nella tabella qui sotto vediamo i principali quattro metodi che jQuery mette a nostra disposizione.
|
Proprietà |
Scopo |
| html() | Restituisce l’HTML del primo elemento corrispondente che trova. |
| html(nuovoContenuto) | Setta il contenuto HTML di ogni elemento corrispondente. |
| text() | Restituisce il testo del primo elemento corrispondente. |
| text(nuovoTesto) | Imposta il testo per tutti gli elementi corrispondenti. |
La differenza tra le proprietà html() e text() sta nel fatto che se andiamo a recuperare un contenuto formattato in HTML attraverso la funzione text() quest’ultima convertirà automaticamente La formattazione tipica del HTML in un testo. A questo punto non ci rimane che andare a vedere un po’ di codice, che chiarirà quanto ho scritto finora.
In questo esempio riprendiamo ancora una volta il contenuto HTML che abbiamo praticamente visto in tutte le lezioni, fatta eccezione per la quarta.
Per prima cosa andiamo a provare la funzione html() e vediamo cosa fa.
andiamo scrivere quindi questo codice:
alert($("#lista").html());
Cosa andiamo a fare: andiamo a recuperare l’HTML contenuto all’interno di “lista”, e lo visualizziamo all’interno di un messaggio di avviso.
come abbiamo detto possiamo per mezzo della proprietà html() andare ad impostare direttamente il codice HTML all’interno della pagina web in maniera dinamica. Vediamo come.
$("#lista").html("<li>Questo contenuto è impostato con jQuery</li>");
nel momento in cui andate ad aprire la pagina web vediamo che i quattro elementi della nostra lista pur essendo presenti all’interno dell’HTML del nostro sorgente, sono stati sostituiti da un’altra stringa, che abbiamo impostato noi per mezzo di jQuery.
Possiamo però andare a creare direttamente nuovo contenuto.
Ad esempio possiamo creare un nuovo paragrafo.
var nuovoPar = $("<p>questo è un paragrafo del tutto nuovo</p>");
$("#para1").html(nuovoPar.html());
come risultato vediamo che il paragrafo che è stato contrassegnato dall’ID “#para1” ha cambiato contenuto, ed ora il nostro secondo paragrafo contiene la stringa “questo paragrafo del tutto nuovo”.
Ora andiamo a provare i metodi che riguardano il testo: text():
$("p:last").text("Questo sarà scritto nell'ultima riga");