jQuery: trasformazione e controllo del DOM
jQuery ci permette di trasformare strutture DOM semplici in strutture complesse con estrema facilità.
Uno dei motivi per cui jQuery è forse la libreria JavaScript più popolare sul web sta nella sua capacità di dare allo sviluppatore la facoltà di trasformare e manipolare il DOM a suo piacimento. In altre parole, jQuery ci da un controllo totale sul DOM, permettendoci di creare strutture complesse a partire da strutture semplici. In questo articolo vedremo appunto come trasformare una struttura lineare in una struttura annidata.
Partiamo dalla seguente struttura semplice:
|
1 2 3 4 5 6 7 8 |
<div id="content">
<h2>...</h2>
<p>...</p>
<!--serie di paragrafi-->
<h2>...</h2>
<p>...</p>
<!--serie di paragrafi-->
</div> |
Vogliamo arrivare ad avere la seguente struttura:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div id="content">
<div class="post">
<div class="author">
<strong>...</strong> <a>...</a>
<form class="contact">...</form>
</div>
<h2>...</h2>
<div class="date">
<span class="day-month">...</span>
<span class="year">...</span>
</div>
<p>...</p>
<!--serie di paragrafi-->
</div>
<!--altri elementi con classe post-->
</div> |
Partiamo subito col suddividere la struttura di partenza in elementi con classe post:
|
1 2 3 4 5 6 |
$('h2', '#content').each(function() {
var $h2 = $(this);
$h2.nextUntil('h2').andSelf().wrapAll('<div class="post"></div>');
}); |
Abbiamo usato i seguenti metodi:
nextUntil(): seleziona gli elementi successivi fino all’elemento specificato (non incluso)andSelf(): include l’elemento di partenza nella selezionewrapAll(): racchiude tutti gli elementi specificati in un elemento HTML definito come stringa
Quindi passiamo ad aggiungere gli elementi date e author:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
var date = new Date(document.lastModified);
var month = date.getMonth()+1;
var day = date.getDate();
var year = date.getFullYear();
$('div.post', '#content').each(function() {
var dt = $('<div class="date"/>').html('<span class="day-month">' + day + ' ' + month +
'</span>' + '<span class="year">' + year + '</span></div>');
var $h2 = $('h2', $(this));
dt.insertAfter($h2);
var author = $('<div class="author"/>').html('<strong>Autore:</strong>' +
'<a href="mailto:gabriele.romanato@gmail.com">Gabriele Romanato</a>');
author.insertBefore($h2);
}); |
Abbiamo usato i seguenti metodi:
html(): crea il contenuto HTML di un elemento usando la stringa passata come argomentoinsertBefore(): inserisce un elemento prima di un altroinsertAfter(): inserisce un elemento dopo un altro elemento
Non ci resta quindi che inserire il form con classe contact:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
$('div.author', '#content').each(function() {
var $author = $(this);
var form = $('<form/>', {
action: '#',
method: 'post',
'class': 'contact'
}).html('<div>' +
'<label for="nome">Nome</label>' +
'<input type="text" name="nome"/>' +
'<label for="email">E-mail</label>' +
'<input type="text" name="email"/>' +
'<label for="oggetto">Oggetto</label>' +
'<input type="text" name="oggetto"/>' +
'<label for="messaggio">Messaggio</label>' +
'<textarea name="messaggio" rows="15" cols="15"/>' +
'<p><input type="submit" name="invia" value="Invia" /></p>'+
'</div>');
form.appendTo($author);
}); |
Abbiamo usato il metodo appendTo(), che aggiunge un elemento all’elemento di destinazione.
Sintassi del wrapper $()
Come avrete notato, il wrapper $() può accettare come secondo argomento un oggetto letterale contenente gli attributi e i metodi dell’elemento creato nel primo argomento. In realtà avremmo anche potuto usare il metodo html() all’interno di tale oggetto letterale.
Potete visionare l’esempio finale in questa pagina.
Nessun commento
Trackback
I commenti sono chiusi.