Nozioni di base di jQuery

Indice

$(document).ready()
⤽
Non si può interagire di forma sicura con il contenuto di una pagina fino a quando il documento non è pronto per la manipolazione. jQuery permette rilevare questo stato attaverso la dichiarazione $(document).ready() in modo che il blocco viene eseguito solo una volta che la pagina sia disponibile.
3.1: Il blocco $(document).ready()
⤽
[code lang=”javascript”] $(document).ready(function() {
console.log(‘il ocumento è pronto!’);
});
[/code]
C’è una scorciatoia per $(document).ready() che potete trovare a volte, ma si consiglia di non utilizzare se si scrive codice per le persone che non conoscono jQuery.
3.2: Forma abbreviata per $(document).ready()
⤽
[code lang=”javascript”] $(function() {
console.log(‘il ocumento è pronto!’);
});
[/code]
E’ anche possibile passare a $(document).ready() il nome di una funzione al posto di una anonima.:
3.3: Passare il nome di una funzione al posto di una funzione anonima
⤽
[code lang=”javascript”] function readyFn() {
// codice da eseguire quando il documento è pronto
}

$(document).ready(readyFn);
[/code]

Selezione di elementi
⤽
Il concetto di base di jQuery è quello di “selezionare alcuni elementi ed eseguire azioni su di essi.” La libreria supporta la maggior parte dei selettori CSS3 e molti non standardizzati. In http://api.jquery.com/category/selectors/ può trovare un riferimento completo sui selettori della libreria.

Di seguito sono elencate alcune tecniche comuni per la selezione degli elementi:
3.4: Selezione di elementi in base al loro ID

⤽
[code lang=”javascript”] $(‘#myId’); // si noti che l’ID deve essere univoco per ogni pagina
[/code]
3.5: Selezione di elementi in base al nome della classe
⤽
[code lang=”javascript”] $(‘div.myClass’); // se si specifica il tipo di elemento,
// si migliora le prestazioni della selezione
[/code]
3.6: Selezione di elementi per il suo attributo
⤽
[code lang=”javascript”] $(‘input[name=first_name]’); // attenzione, che può essere molto lento
[/code]
3.7: Selezione di elementi in forma di selettore CSS
⤽
[code lang=”javascript”] $(‘#contents ul.people li’);
[/code]
3.8: Pseudo-selettori
⤽
[code lang=”javascript”] $(‘a.external:first’); // il primo elemento <a> con la classe ‘external’
$(‘tr:odd’); // gli elementi <tr> dispari di una tabella
$(‘#myForm :input’); // gli elementi del tipo input
$(‘div:visible’); // gli elementi <div> visibili
$(‘div:gt(2)’); // gli elementi <div> tranne i primi tre
$(‘div:animated’); // gli elementi <div> attualmente animati
[/code]
Quando si utilizzano i pseudo-selettori: :visible e :hidden, jQuery verifica la corrente visibilità del elemento; ma non se questi sono già stati assegnati con gli stili CSS visibility o display – in altre parole, verifica se l’altezza e la larghezza fisica dell’elemento è maggiore di zero. Tuttavia, questo controllo non funziona con gli elementi

; in questo caso, jQuery verifica se si sta’ applicando lo stile display e prenderà in considerazione l’elemento come nascosto se è stato assegnato il valore none. Inoltre, gli elementi che non sono ancora state aggiunte al DOM saranno trattati come nascosti, anche se hanno stili applicati come visibili (nella sezione sulla manipolazione di questo manuale si spiega come creare e aggiungere elementi al DOM)

Per avere un riferimento, il seguente è il frammento di codice che utilizza jQuery per determinare quando un elemento è visibile o meno. I commenti sono stati inseriti per rendere più chiara la sua comprensione:

[code lang=”javascript”] jQuery.expr.filters.hidden = function( elem ) {
var width = elem.offsetWidth, height = elem.offsetHeight,
skip = elem.nodeName.toLowerCase() === "tr";

// Scelta di Selettori ha 0 di altezza,
// 0 di larghezza e non è <tr>?
return width === 0 && height === 0 && !skip ?

// allora deve essere nascosto (hidden)
true :

// ma se ha larghezza e l’altezza e non è un <tr>
width > 0 && height > 0 && !skip ?

// allora deve essere visibile
false :

// se siamo qui è perché l’elemento ha larghezza
// e altezza, ma è anche un <tr>, quindi verifica
// il valore dello stile display applicato attraverso
// i CSS per decidere se è nascosto o meno
jQuery.curCSS(elem, "display") === "none";
};

jQuery.expr.filters.visible = function( elem ) {
return !jQuery.expr.filters.hidden( elem );
};
[/code]

Scelta di Selettori
⤽
La scelta di buoni selettori è un punto importante quando si desidera migliorare le prestazioni del codice. Un po’ di specificità – per esempio includere il tipo di elemento (ad esempio, div)(come div), quando viene effettuata una selezione dal nome della classe – può aiutare molto. Pertanto, si consiglia di dare alcuni “suggerimenti” a jQuery su dove si può trovare nel documento ciò che si desidera selezionare. D’altra parte, la troppa specificità può essere dannosa. Un selettore come #miaTabella thead tr th.especiale è un eccesso, sarebbe meglio usare #miaTabella th.especiale.

jQuery fornisce molti selettori basati sugli attributi che consentono di fare delle selezioni in base ai contenuti degli attributi utilizzando semplificazioni con delle espressioni regolari.

[code lang=”javascript”] // trovare tutti gli <a> cui attributi finiscono in "thinger"
$("a[rel$=’thinger’]");
[/code]
Questi tipi di selettori possono essere utili ma sono anche molto lenti. Quando possibile, si dovrebbe fare la selezione utilizzando gli ID, i nomi delle classi e nomi dei tag.

Per saperne di più su questo argomento, Paul Irish ha fatto una grande presentazione sui miglioramenti delle prestazioni Javascript (in inglese), diverse diapositive centrate sui selettori.

Verificare Selezioni
⤽
Una volta realizzata la selezione degli elementi, si vorrà sapere se detta selezione ha dato alcuni risultati. Per fare questo, si può scrivere qualcosa del genere:
[code lang=”javascript”] if ($(‘div.foo’)) { … }
[/code]
Tuttavia questo non funzionerà. Quando viene effettuata una selezione con $(), restituisce sempre un oggetto, e se essa viene valutata, ritornerrà sempre true. Anche se la selezione non contiene alcun elemento, il codice all’interno del blocco if viene eseguito.

Invece di utilizzare il codice di prima, la cosa da fare è chiedere il numero di elementi che ha la selezione che è stata eseguita. E’ possibile fare usando la proprietà JavaScript, length. Se la risposta è 0, la condizione restituisce false, altrimenti (più di 0 elementi), la condizione è vera.
3.9: Valutare se una selezione ha degli elementi

⤽
[code lang=”javascript”] if ($(‘div.foo’).length) { … }
[/code]
Salvare Selezioni
⤽
Ogni volta che viene effettuata una selezione, un sacco di codice viene eseguito. jQuery non salva il risultato da se, quindi se si effettua una selezione che poi si farà di nuovo, è necessario salvare la selezione in una variabile.
3.10: Salvare le selezioni su una variabile
⤽
[code lang=”javascript”] var $divs = $(‘div’);
[/code]
Nell’esempio “Salvare le selezioni su una variabile”, la variabile inizia con il simbolo del dollaro. A differenza di altri linguaggi di programmazione, in JavaScript, questo segno non ha un significato speciale – è solo un altro carattere. Ma qui è usato per indicare che la variabile è un oggetto jQuery.Questa pratica – una sorta di notazione ungherese – è solo una convenzione e non obbligatoria.

Una volta che la selezione è memorizzata nella variabile, può essere utilizzato in combinazione con i metodi di jQuery e il risultato sarà lo stesso se si utilizza la selezione originale.

La selezione prende solo gli elementi che sono sulla pagina quando tale azione ha avuto luogo. Se poi si aggiungono elementi al documento, sarà necessario ripetere la selezione o aggiungere nuovi elementi alla selezione memorizzata nella variabile. In altre parole, le selezioni salvate non vengono aggiornati “magicamente” quando cambia il DOM.
Affinamento e Filtro delle Selezioni
⤽
A volte si può ottenere una selezione che contiene più del necessario, in questo caso, è necessario affinare la selezione. jQuery fornisce diversi modi per ottenere esattamente quello che si desidera.
3.11: Affinamento delle selezioni
⤽
[code lang=”javascript”] $(‘div.foo’).has(‘p’); // l’elemento div.foo contiene elementi <p>
$(‘h1’).not(‘.bar’); // l’elemento h1 non possiede la clase ‘bar’
$(‘ul li’).filter(‘.current’);// un item di una lista non ordinata che
// possiede la classe ‘current’
$(‘ul li’).first(); // il primo item de una lista non ordinata
$(‘ul li’).eq(5); // el sesto item de una lista non ordinata
[/code]
Selezione di elementi di un Form
⤽
jQuery fornisce diverse pseudo-selettori per aiutare a trovare gli elementi nei forms; questi sono particolarmente utili perché a seconda degli stati di ogni elemento o tipo, possono essere difficili distinguergli utilizzando i normali selettori CSS.

  • :button Seleziona elementi <button> e con l’attributo type=”button”
  • :checkbox Seleziona elementi <input> con l’attributotype=”checkbox”
  • :checked Seleziona elementi <input> del tipo checkbox selezionati
  • :disabled Seleziona elementi del form che sono disabilitati
  • :enabled Seleziona elementi del form che sono abilitati
  • :file Seleziona elementi <input> con l’attributo type=”file”
  • :image Seleziona elementi <input> con l’attributo type=”image”
  • :input Seleziona elementi <input>, <textarea> e <select>
  • :password Seleziona elementi <input> con el atributo type=”password”
  • :radio Seleziona elementi <input> con l’attributo type=”radio”
  • :reset Seleziona elementi <input> con l’attributo type=”reset”
  • :selected Seleziona elementi <options> che sono selezionati
  • :submit Seleziona elementi <input> con l’attributo type=”submit”
  • :text Seleziona elementi <input> con l’attributo type=”text”
3.12: Utilizzando pseudo-selettori sugli elementi dei forms
⤽
[code lang=”javascript”] $(‘#myForm :input’); // ottiene tutti gli elementi input nel form #myForm
[/code]
Lavorare con le selezioni
⤽
Una volta realizzata la selezione di elementi, è possibile utilizzareliin in combinazione con diversi metodi. Sono generalmente di due tipi: gli ottenetori (in inglese getters) e gli stabilitori (setters in inglese). I metodi Getter restituiscono una proprietà metodi del elemento selezionato, mentre i metodi Setter fissano una proprietà a tutti gli elementi selezionati.
Concatenazione
⤽
Se in una selezione viene effettuata una chiamata a un metodo e restituisce un oggetto jQuery, è possibile seguire un metodo “incatenato” nell’oggetto.
3.13: Concatenando
⤽
[code lang=”javascript”] $(‘#content’).find(‘h3’).eq(2).html(‘testo per il terzo elemento h3!’);
[/code]
D’altra parte, se si sta scrivendo una serie di metodi che includono molti passi, e possibile scriverli linea per linea, rendendo l’aspetto del codice più piacevole da leggere.
3.14: Formattazione del codice incatenato
⤽
[code lang=”javascript”] $(‘#content’)
.find(‘h3’)
.eq(2)
.html(‘testo per il terzo elemento h3!’);
[/code]
Per tornare alla selezione originale in mezzo alla concatenazione, jQuery fornisce il metodo $.fn.end per farlo.
3.15: Ripristinare la selezione originale utilizzando il metodo $.fn.end
⤽
[code lang=”javascript”] $(‘#content’)
.find(‘h3’)
.eq(2)
.html(‘testo per il terzo elemento h3!’)
.end() // ripristina tutti gli elementi h3 in #content
.eq(0)
.html(‘testo per il primo elemento h3!’);
[/code]
La concatenazione è molto potente ed è una caratteristica che molte librerria JavaScript hanno adottato da che jQuery è diventato popolare. Tuttavia, dovrebbe essere usato con cautela. Una concatenazione di metodi estensivi può rendere il codice molto difficile da modificare e depurare. Non c’è una regola che indichi quanto lungo o corto dovrebbe essere la concatenazione – ma si dovrebbe prendere in considerazione questo consiglio.
Ottenitori (Getters) & Impostatori (Setters)
⤽
jQuery “sovraccarica” i suoi metodi, in altre parole, il metodo per impostare un valore ha lo stesso nome del metodo per ottenere un valore. Quando un metodo viene utilizzato per impostare un valore, il metodo viene chiamato impostatori (setter inglese). Tuttavia, quando un metodo viene utilizzato per ottenere (o leggere) un valore si chiama ottenitori (getter in inglese).
3.16: Il metodo $.fn.html utilizzato come impostatore
⤽
[code lang=”javascript”] $(‘h1’).html(‘ciao mondo’);
[/code]
3.17: Il metodo html utilizzato come ottenitore
⤽
[code lang=”javascript”] $(‘h1’).html();
[/code]
I metodi impostatori restituiscono un oggetto jQuery, che consente di continuare la chiamata sui più metodi nella stessa selezione, mentre i metodi ottenitori restituisce il valore che è stato consultato, ma non possono continuare ad invocare altri metodi su quel valore.
CSS, Stili & Dimensioni
⤽
jQuery include un modo utile per ottenere e impostare le proprietà CSS agli elementi.

Le proprietà CSS che includono un trattino in mezzo come separatore, in JavaScript deve essere trasformato nel suo stile CamelCase. Per Esempio quando la proprietà è usata come un metodo, lo stile CSS font-size dovrà essere espressa come fontSize. Tuttavia, questa regola non viene applicata quando si passa il nome della proprietà CSS al metodo $.fn.css. – In questo caso, i due formati (in CamelCase o con il trattino in mezzo) funzionano.
3.18: Ottenendo le proprietà CSS
⤽
[code lang=”javascript”] $(‘h1’).css(‘fontSize’); // restituisce una stringa come "19px"
$(‘h1’).css(‘font-size’); // funziona lo stesso
[/code]
3.19: Impostando le proprietà CSS
⤽
[code lang=”javascript”] // imposta una proprietà singola CSS
$(‘h1’).css(‘fontSize’, ‘100px’);
// imposta molteplici proprietà CSS
$(‘h1’).css({ ‘fontSize’ : ‘100px’, ‘color’ : ‘red’ });
[/code]
Si noti che lo stile dell’argomento utilizzato nella quarta linea dell’esempio – è un oggetto che contiene più proprietà. Questo è un modo comune per passare argomenti a una funzione, e molti metodi impostatori della libreria accettano oggetti per fissare varie proprietà in una sola volta.
Utilizzare Classi per applicare Stili CSS
⤽
Per ottenere i valori degli stili applicati a un elemento, il metodo $. $.fn.css è molto utile, tuttavia il suo uso come metodo impostatore (setter) deve essere evitato (giacché, per applicare degli stili a un elemento, si può fare direttamente da CSS ). Al suo posto, l’ideale sarebbe quello di scrivere le regole CSS da applicare alle classi che descriverebbero i vari stati visuali degli elementi e quindi modificare la classe degli elementi per applicare lo stile che si desidera visualizzare.
3.20: Lavorare con le classi
⤽
[code lang=”javascript”] var $h1 = $(‘h1’);

$h1.addClass(‘big’);
$h1.removeClass(‘big’);
$h1.toggleClass(‘big’);

if ($h1.hasClass(‘big’)) { … }
[/code]

Le classi possono anche essere utile per salvare qualche informazione di stato, per esempio, per indicare che un elemento è stato selezionato.
Dimensioni
⤽
jQuery offre una varietà di metodi per ottenere e impostare valori di dimensioni e posizione di un elemento.

Il codice riportato nell’esempio “Dimensioni – Metodi di base” è solo un breve riassunto delle funzionalità sui rapporti dimensionali di jQuery, tutti i dettagli possono essere trovati http://api.jquery.com/category/dimensions/.
3.21: Dimensioni - Metodi di base

⤽
[code lang=”javascript”] $(‘h1′).width(’50px’); // imposta la larghezza di tutti gli elementi H1
$(‘h1’).width(); // ottiene la larghezza del primo elemento H1

$(‘h1′).height(’50px’);// imposta l’altezza di tutti gli elementi H1
$(‘h1’).height(); // Ottiene l’altezza del primo elemento H1

$(‘h1’).position(); // Restituisce un oggetto che contiene informazioni
// circa la posizione del primo elemento relativo a
// "offset" (posizione) dal suo elemento genitore
[/code]

Attributi
⤽
Gli attributi degli elementi HTML che costituiscono un’applicazione può contenere informazioni utili, quindi è importante potere impostare e ottenere queste informazioni.

Il metodo $.fn.attr funge sia da metodo getter che da metodo setter. Inoltre, come metodo di $.fn.css, se usato come metodo setter può accettare una serie di parole chiave-valore o un oggetto che contiene più serie.
3.22: Impostare attributi

⤽
[code lang=”javascript”] $(‘a’).attr(‘href’, ‘allMyHrefsAreTheSameNow.html’);
$(‘a’).attr({
‘title’ : ‘con i titoli è la stessa cosa!’,
‘href’ : ‘somethingNew.html’
});
[/code]
Nell’esempio, l’oggetto passato come argomento è scritto in diverse linee. Come spiegato in precedenza, gli spazi non contano in JavaScript, quindi si è liberi di usarli per rendere il codice più leggibile. In ambienti di produzione, è possibile utilizzare strumenti di minimizzazione, che elimina gli spazi in bianco (tra le altre cose) e comprimere il file di output.
3.23: Ottenere attributi
⤽
[code lang=”javascript”] $(‘a’).attr(‘href’); // restituisce il primo valore dell’attributo href
// appartenente al elemento <a> del documento
[/code]
Attraversare il DOM
⤽
Una volta ottenuta la selezione, è possibile trovare altri oggetti utilizzando la stessa selezione.

In http://api.jquery.com/category/traversing/ può trovare una documentazione completa sui metodi di attraversamento del DOM (in inglese traversing) che ha jQuery.

Si deve fare attenzione nel percorrere lunghe distanze in un documento — percorsi complessi richiedono che la struttura del documento sia sempre la stessa, cosa che è difficile da garantire. Uno – o due – step per il giro va bene, ma generalmente bisogna evitare di attraversare da un contenitore all’altro.
3.24: Muoversi attraverso il DOM usando metodi di attraversamento
⤽
[code lang=”javascript”] $(‘h1’).next(‘p’); // seleziona l’elemento successivo <p>
// immediatamente dopo <h1>
$(‘div:visible’).parent(); // seleziona il contenitore padre
// di un elemento <div> visibile
$(‘input[name=first_name]’).closest(‘form’); // seleziona dal più
// vicino <form> un input
$(‘#myList’).children(); // seleziona tutti gli elementi figlio
// di #myList
$(‘li.selected’).siblings(); // seleziona tutti gli elementi fratelli
// del elemento <li>
[/code]
È possibile interagire con la selezione utilizzando il metodo $.fn.each. Questo metodo interagisce con tutti gli elementi ottenuti nella selezione ed esegue una funzione per ciascuno. La funzione prende come argomento l’indice dell’elemento corrente e lo stesso elemento. Per impostazione predefinita, all’interno della funzione, è possibile fare riferimento all’elemento DOM attraverso la dichiarazione this.
3.25: Interagire in una selezione
⤽
[code lang=”javascript”] $(‘#myList li’).each(function(idx, el) {
console.log(
‘L\’elemento ‘ + idx +
‘ha il seguente html: ‘ +
$(el).html()
);
});
[/code]
Manipolazione di Elementi
⤽
Una volta realizzata la selezione degli elementi che si desidera utilizzare, “inizia il divertimento”. È possibile modificare, spostare, rimuovere e duplicare. Anche crearne di nuovi attraverso una sintassi semplice.

La documentazione completa sui metodi di manipolazione può essere trovata in http://api.jquery.com/category/manipulation/.
Ottenre e Impostare Informazioni negli Elementi

⤽
Ci sono molti modi in cui è possibile modificare un elemento. Tra le operazioni più comuni ci sono quelle per cambiare l’HTML all’interno o qualche suo attributo. Per questi compiti, jQuery fornisce metodi semplici e funzionali in tutti i browser moderni. E’ anche possibile ottenere informazioni sugli elementi utilizzando gli stessi metodi, ma nel loro metodo come ottenitore getter.

Apportare modifiche agli elementi, è un lavoro banale, ma ricordate che la modifica interesserà tutti gli elementi nella selezione, quindi se si vuole cambiare un singolo elemento, è necessario assicurarsi di specificarlo nella selezione prima di chiamare il metodo impostatore setter.
Quando i metodi agiscono come ottenitori getter, solitamente lavorano solo con il primo elemento della selezione. Inoltre non restituiscono nessun oggetto jQuery, quindi non è possibile concatenare più metodi su di esso. Un’eccezione è il metodo $.fn.text, che consente di ottenere il testo degli elementi della selezione.
  • $.fn.html Ottiene o imposta il contenuto HTML di un elemento.
  • $.fn.text Ottiene o imposta il contenuto in texto piano dell’elemento; nel caso di pasarli come argomento del codice HTML, questo sarà ripulito dai sui tag.
  • $.fn.attr Ottiene o imposta il valore di un determinato attributo.
  • $.fn.width Ottiene o imposta la larghezza in pixels del primo elemento della selezione come un intero.
  • $.fn.height Ottiene o imposta l’altezza in pixeles del primo elemento della selezione come un intero.
  • $.fn.position Ottiene un oggetto con informazioni sulla posizione del primo elemento della selezione relativa al primo elemento genitore posizionato. Questo metodo è solo ottenitore (getter).
  • $.fn.val Ottiene o imposta il valore (value) negli elementi dei forms.
3.26: Modificare il codice HTML di un elemento
⤽
[code lang=”javascript”] $(‘#myDiv p:first’)
.html(‘Nuovo <strong>primo</strong> parragrafo!’);
[/code]
Spostare, copiare e rimuovere Element
⤽
Ci sono diversi modi per spostare gli elementi attraverso del DOM, i quali si possono suddividere in due approcci:

  • Volere mettere il/gli elementi selezionati rispetto ad altri elementi
  • Volere mettere un elemento rispetto ad altri elementi selezionati.

Per esempio, jQuery fornisce metodi $.fn.insertAfter e $.fn.after. Il metodo $.fn.insertAfter colloca il/gli elementi selezionati dopo l’elemento che è stato passato come argomento, mentre il metodo $.fn.after colloca l’elemento passato come argomento dopo l’elemento selezionato. Altri metodi seguono anche questo modello:

  • $.fn.insertBefore e $.fn.before;
  • $.fn.appendTo e $.fn.append;
  • e $.fn.prependTo e $.fn.prepend.

L’uso di uno o un altro metodo dipende dagli elementi che hanno selezionato e il tipo di riferimento che si desidera salvare rispetto all’elemento che si sta muovendo.
3.27: Spostare oggetti con differenti approcci

⤽
[code lang=”javascript”] // fare il che primo elemento della lista sia l’ultimo
var $li = $(‘#myList li:first’).appendTo(‘#myList’);

// un altro approccio allo stesso problema
$(‘#myList’).append($(‘#myList li:first’));

// Va notato che non c’è modo di accedere
// alla lista degli items che è stata spostata,
// giacché restituisce la lista stessa
[/code]

Clonare Elementi
⤽
Quando si utilizza un metodo come $.fn.appendTo, ciò che si sta facendo è spostare all’elemento, ma a volte, anziché questo, si vuole spostare un duplicato dell’elemento. In questo caso, è possibile utilizzare il metodo $.fn.clone.
3.28: Ottenere una copia del elemento
⤽
[code lang=”javascript”] // copiare il primo elemento della lista
// e spostarlo alla fine dello stesso
$(‘#myList li:first’).clone().appendTo(‘#myList’);
[/code]
Se avete bisogno di copiare le informazioni e gli eventi legati al elemento, si deve passare true come argomento di $.fn.clone.
Rimuovere Elementi
⤽
Ci sono due modi per rimuovere gli elementi di una pagina: Utilizzando $.fn.remove ó $.fn.detach. Quando si desidera rimuovere l’elemento in modo permanente, utilizzare il metodo $.fn.remove.

D’altra parte, il $.Fn.detach rimuove anche l’elemento, ma conserva le informazioni e gli eventi associati ad esso, essendo utile in caso di necessità di reinserire l’elemento nel documento.

Il metodo $.fn.detach è molto utile quando si manipola fortemente un elemento, giacché è possibile eliminare l’elemento, lavorarlo nel codice e quindi ripristinarlo nuovamente sulla pagina. Questa forma ha il vantaggio di non toccare il DOM mentre si sta modificando delle informazioni e gli eventi dell’elemento.

D’altra parte, se si desidera mantenere l’elemento, ma si ha bisogno di rimuovere i uso contenuto, è possibile utilizzare il metodo $.fn.empty, il quale “svuoterà” il contenuto HTML dell’elemento.

Creare nuovi Elementi
⤽
jQuery fornisce un modo semplice ed elegante per creare nuovi oggetti utilizzando lo stesso metodo di $() che viene utilizzato per effettuare selezioni.
3.29: Creare nuovi elementi
⤽
[code lang=”javascript”] $(‘<p>Questo è un nuovo paragrafo</p>’);
$(‘<li class="nuovo">nuovo item della lista</li>’);
[/code]
3.30: Creare un nuovo elemento con attributi utilizzando un oggetto
⤽
[code lang=”javascript”] $(‘<a/>’, {
html : ‘Questo è un <strong>nuovo</strong> link’,
‘class’ : ‘nuovo’,
href : ‘foo.html’
});
[/code]
Si noti che nell’oggetto che si passa come argomento, la proprietà class è tra virgolette, mentre la proprietà href e html non lo sono. In generale, i nomi delle proprietà non dovrebbero essere tra virgolette, ad eccezione dei nomi che vengono usati come una parola riservata (come nel caso della classe).

Quando si crea un elemento, non è immediatamente aggiunto alla pagina, ma se deve farlo in combinazione con un metodo.
3.31: Creare un nuovo elemento nella pagina

⤽
[code lang=”javascript”] var $myNewElement = $(‘<p>Nuovo elemento</p>’);
$myNewElement.appendTo(‘#content’);

$myNewElement.insertAfter(‘ul:last’);
// eleminerà l’elemento <p> esistente in #content!
$(‘ul’).last().after($myNewElement.clone());
// clonare l’elemento <p> per avere due versioni
[/code]

A rigor di termini, non è necessario salvare l’elemento creato in una variabile – è possibile chiamare il metodo per aggiungere l’elemento direttamente subito dopo il $().

Tuttavia, la maggior parte delle volte si desidererà fare riferimento all’elemento aggiunto, e quindi, se si salva in una variabile non c’è bisogno di selezionarlo più tardi.
3.32: Creare e aggiungere allo stesso tempo un elemento alla pagina

⤽
[code lang=”javascript”] $(‘ul’).append(‘<li>item della lista</li>’);
[/code]
La sintassi per aggiungere nuovi elementi alla pagina è molto facile da usare, ma si è tentati di dimenticare che esiste un enorme costo in termini di prestazioni mentre si aggiunge degli elementi al DOM ripetutamente. Se si sta aggiungendo molti elementi allo stesso contenitore, piuttosto che aggiungere ogni elemento uno per volta, il migliore sistema è quella di concatenare tutto l’HTML in una singola catena di stringhe e poi allegarla al contenitore. Una possibile soluzione è quella di utilizzare un array che contenga tutti gli elementi e poi unirli usando join per finalmente allegarla.
[code lang=”javascript”] var myItems = [], $myList = $(‘#myList’);

for (var i=0; i<100; i++) {
myItems.push(‘<li>item ‘ + i + ‘</li>’);
}

$myList.append(myItems.join(”));
[/code]

Manipolazione di Attributi
⤽
Le capacità per la gestione degli attributi che offre la libreria jQuery sono ampie. L’esecuzione di modifiche di base sono semplici, ma il metodo $.fn.attr consente manipolazioni complesse.
3.33: Manipolazione di un singolo attributo
⤽
[code lang=”javascript”] $(‘#myDiv a:first’).attr(‘href’, ‘newDestination.html’);
[/code]
3.34: Manipolazione di più attributi
⤽
[code lang=”javascript”] $(‘#myDiv a:first’).attr({
href : ‘newDestination.html’,
rel : ‘super-special’
});
[/code]
3.35: Utilizzare una funzione per determinare il valore del nuovo attributo
⤽
[code lang=”javascript”] $(‘#myDiv a:first’).attr({
rel : ‘super-special’,
href : function(idx, href) {
return ‘/new/’ + href;
}
});

$(‘#myDiv a:first’).attr(‘href’, function(idx, href) {
return ‘/new/’ + href;
});
[/code]

Esercizi
⤽
Selezioni
⤽
Aprire il file /exercises/index.html nel tuo browser. Eseguire l’esercizio utilizzando il file /exercises/js/sandbox.js o lavorare direttamente con Firebug per compiere i seguenti punti:

  • Selezionare tutti gli elementi div che hanno classe “module”.
  • Specificare tre selezioni che possono selezionare il terzo item della lista non ordinata #myList. Qual è il migliore da usare e perché?
  • Selezionare l’elemento label dell’elemento input mediante un selettore di attributo.
  • Verificare quanti elementi della pagina sono nascosti (suggerimento:. .length)
  • Verificare quante immagini sulla pagina hanno l’attributo alt.
  • Selezionare tutte le righe dispari del corpo della tabella.
Percorrere il DOM
⤽
Aprire il file /exercises/index.html nel tuo browser. Eseguire l’esercizio utilizzando il file /exercises/js/sandbox.js o lavorare direttamente con Firebug per compiere i seguenti punti:

  • Selezionare tutte le immagini sulla pagina, registrare nella console l’attributo alt di ogni immagine.
  • Selezionare l’elemento di input, poi andare al form e aggiungere una classe ad esso.
  • Selezionare l’item che ha la classe di “current” nella lista #myList e rimuovere la classe, poi aggiungere la classe “current” al successivo item della lista.
  • Selezionare l’elemento select all’interno di #special; per poi dirigersi verso il pulsante submit.
  • Selezionare il primo item della lista nell’elenemto #slideshow; aggiungere la classe “current” ad esso e poi aggiungere la classe “disabled” agli elementi fratelli.
Manipolazione
⤽
Aprire il file /exercises/index.html nel tuo browser. Eseguire l’esercizio utilizzando il file /exercises/js/sandbox.js o lavorare direttamente con Firebug per compiere i seguenti punti:

  • Aggiungere 5 nuovi elementi alla fine della lista non ordinata # myList. Suggerimento:
    [code lang=”javascript”] for (var i = 0; i<5; i++) { … }
    [/code]
  • Rimuovere gli elementi dispari dalla lista.
  • Aggiungere un altro elemento h2 e un altro paragrafo all’ultimo div.module.
  • Aggiungere un’altra opzione all’elemento select, danno all’opzione aggiunta il valore “Wednesday”.
  • Aggiungere un nuovo div.module alla pagina dopo l’ultima pagina; e quindi aggiungere una copia di una delle immagini esistenti nel nuovo div.