Come abbiamo visto finora jQuery offre un gran numero di funzioni per modificare il contenuto della pagina web.
JQuery però non è in grado soltanto di modificare, ma è anche in grado di replicare, copiare o avvolgere (il “wrapping” della pagina) il contenuto.
Vediamo nella tabella qui sotto quali sono le funzioni che jQuery mette a nostra disposizione a tale scopo.
Metodo |
Scopo |
| wrap(html) | Avvolge gli elementi corrispondenti con l’HTML specificato. |
| wrap(elemento) | Avvolge ogni elemento specificato con l’elemento specificato |
| wrapAll(html) | avvolge tutti gli elementi corrispondenti nel set specificato nella contenuto HTML specificato. |
| wrapAll(elemento) | avvolge tutti gli elementi specificati in un singolo elemento di wrapping |
| wrapInner(html) | avvolge tutti gli elementi figli degli elementi specificati con una struttura di tipo HTML. |
| wrapInner(elemento) | avvolge tutti gli elementi di tuo figlio contenuti in ogni elemento corrispondente in una struttura di tipo DOM |
| replaceWith(contenuto) | replica tutti gli elementi corrispondenti con elementi di tipo HTML oppure DOM. |
| replaceAll(selettore) | replica gli elementi corrispondenti con il selettore specificato degli elementi corrispondenti. |
| empty() | rimuove tutti i nodi di tipo figlio specificati dal set di elementi corrispondenti |
| remove() | rimuovere gli elementi corrispondenti dal DOM |
| clone() | Clona gli elementi DOM corrispondenti e seleziona i cloni. |
| clone(bool) |
Come al solito penso di non essere stato molto chiaro con questa tabella, ma recupero con dagli esempi che seguono.
Prendiamo il solito codice HTML, il primo esempio che andiamo a vedere riguarda la funzione di wrap.
$("p").wrap("<div style='border: 3px solid black' />");
l’effetto che produciamo in questo caso è quello che ogni elemento di tipo paragrafo viene contornato da un bordo nero alto tre pixel.
Avremmo però potuto avere la necessità di prendere tutti quanti gli elementi di tipo paragrafo, per avvolgerli all’interno di un unico blocco contenitore di tipo DIV.
Per farlo dobbiamo utilizzare il wrapAll. Ecco come:
$("p").wrapAll("<div style='border: 3px solid black' />");
L’effetto che si produce è quello di avere un unico blocco DIV che contiene tutti quanti gli elementi di tipo paragrafo.
Vediamo adesso come si comporta la funzione empty.
In questo caso ce la prendiamo con la lista con questo semplice codice:
$("ul").empty();
La lista scompare dal browser.