View
218
Download
0
Category
Preview:
Citation preview
Introduzione a jQuery
Complemen4 di Tecnologie Web, A.A. 2011-‐2012 -‐ M. Franceschet, V. Della Mea, I. ScagneHo 1
Cos’è?
• jQuery (hHp://jquery.com/) è una libreria di classi e funzioni Javascript che permeHe al programmatore di compiere in modo facile quanto segue: – Navigazione nel documento HTML, – ges4one degli even4, – animazioni, – funzionalità AJAX.
Complemen4 di Tecnologie Web, A.A. 2011-‐2012 -‐ M. Franceschet, V. Della Mea, I. ScagneHo 2
Perché è u4le
• Consente di scrivere codice in modo più compaHo e ad alto livello.
• Funge da “normalizzatore”, fornendo dei costru^ conformi agli standard del W3C, indipendentemente dal browser su cui gira.
Complemen4 di Tecnologie Web, A.A. 2011-‐2012 -‐ M. Franceschet, V. Della Mea, I. ScagneHo 3
Download
• Scaricare la libreria da hHp://docs.jquery.com/Downloading_jQuery
• Due release: – compressa (per si4 in “produzione”) (hHp://code.jquery.com/jquery-‐1.7.1.min.js), – non compressa (per sviluppo) (hHp://code.jquery.com/jquery-‐1.7.1.js).
Complemen4 di Tecnologie Web, A.A. 2011-‐2012 -‐ M. Franceschet, V. Della Mea, I. ScagneHo 4
Includere jQuery nelle proprie pagine
• Inclusione remota: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
• Inclusione locale (supponendo di aver scaricato il file in una soHodirectory js): <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
Complemen4 di Tecnologie Web, A.A. 2011-‐2012 -‐ M. Franceschet, V. Della Mea, I. ScagneHo 5
Un semplice file di test <!DOCTYPE html> <html> <head>
<title>Testing jQuery</title> </head> <body> <p>Ciao, mondo!</p> <p class="foo">Un altro paragrafo, ma questo ha una classe.</p> <p><span>Questo è un elemento span all'interno di un paragrafo.</span></p> <p id="bar">Paragrafo con un id.
<span class="foo">Questa frase si trova all'interno di un elemento span.</span> </p> <!--<script src="js/jquery-1.7.1.min.js"></script>--> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> </body> </html> Complemen4 di Tecnologie Web, A.A. 2011-‐2012 -‐ M. Franceschet, V. Della Mea, I. ScagneHo 6
Form • Aggiungiamo anche un form: <form action="#" method="post"> <fieldset><legend>Form di iscrizione</legend> <label for="name">Nome</label><br /> <input name="name" id="name" type="text" /><br /> <label for="password">Password</label><br /> <input name="password" id="password" type="password" /><br /><br /> <label><input name="loc" type="radio" />
Mi trovo di fronte al mio computer </label><br /> <label><input name="loc" type="radio" checked="checked" /> Mi trovo di fronte ad un computer condiviso </label><br /><br /> <input type="submit" value="Log in" /><br />
<label><input name="notify" type="checkbox" disabled="true" /> Ricordami su questo computer </label><br /> </fieldset> </form> Complemen4 di Tecnologie Web, A.A. 2011-‐2012 -‐ M. Franceschet, V. Della Mea, I. ScagneHo 7
Firebug
• Per comodità esiste un add-‐on di Firefox che permeHe un semplice, ma efficace debugging di Javascript e di jQuery.
• E’ scaricabile liberamente da hHp://gekirebug.com/
Complemen4 di Tecnologie Web, A.A. 2011-‐2012 -‐ M. Franceschet, V. Della Mea, I. ScagneHo 8
L’oggeHo principale di jQuery
• In Javascript una variabile è iden4ficata tramite una sequenza di leHere (a-z,A-Z), cifre (0-9), il caraHere $ ed il caraHere _ e deve iniziare con una leHera, $ o _.
• Quindi $ è un iden4ficatore lecito per una variabile in Javascript.
• jQuery usa proprio il $ per iden4ficare il suo oggeHo principale.
• In par4colare abbiamo: – window.jQuery = window.$ = jQuery = function( selector, context );
Complemen4 di Tecnologie Web, A.A. 2011-‐2012 -‐ M. Franceschet, V. Della Mea, I. ScagneHo 9
Selezione di elemen4 del DOM • In jQuery quasi tuHo ruota aHorno ad un potente motore di selezione degli elemen4 del DOM, che fa uso della stessa sintassi dei CSS.
• In par4colare abbiamo a disposizione: – SeleHori di base, – SeleHori gerarchici, – Filtri:
• Filtri di contenuto, • Filtri di visibilità, • Filtri di aHribu4, • Filtri di nodi figli, • Filtri di form. Complemen4 di Tecnologie Web, A.A. 2011-‐2012 -‐ M. Franceschet, V. Della Mea, I. ScagneHo 10
SeleHori di base • Selezione degli elemen4 mediante 4po del tag:
– $("p"); // seleziona tutti i paragrafi <p>
• Selezione mediante il nome della classe: – $(".foo"); /* seleziona tutti gli elementi con
classe foo */
• Selezione mediante id: – $("#bar"); /* seleziona tutti gli elementi con id
bar */
• Selezione combinata: – $("p.foo"); /* seleziona solo i paragrafi con
classe foo */ – $("p.foo,#bar"); /* seleziona gli elementi che
soddisfano almeno uno dei due selettori */
Complemen4 di Tecnologie Web, A.A. 2011-‐2012 -‐ M. Franceschet, V. Della Mea, I. ScagneHo 11
SeleHori gerarchici • Per selezionare gli elemen4 discenden4 di un tag è sufficiente far seguire a
quest’ul4mo il nome del tag discendente dopo uno spazio: – $("body span"); /* seleziona tutti i tag span
contenuti all’interno del tag body. */
• Selezione dei figli: – $("body>span"); /* seleziona soltanto i tag span
figli (i.e., discendenti di primo livello) del tag body. */
• Selezione del prossimo elemento: – $(".foo+p"); /* seleziona il prossimo paragrafo dopo
il tag di classe foo. */
• Selezione di elemen4 “fratelli”: – $(".foo~p"); /* seleziona tutti i prossimi paragrafi
allo stesso livello dopo il tag di classe foo. */
Complemen4 di Tecnologie Web, A.A. 2011-‐2012 -‐ M. Franceschet, V. Della Mea, I. ScagneHo 12
Filtri (1)
• I filtri consentono di selezionare elemen4 del DOM in base alla loro posizione, al loro stato o in base ad altre variabili.
• La sintassi di base prevede l’uso dei due pun4 (:) segui4 dal nome del filtro (:filtro).
• Alcuni filtri possono ricevere un parametro (:filtro(parametro)).
Complemen4 di Tecnologie Web, A.A. 2011-‐2012 -‐ M. Franceschet, V. Della Mea, I. ScagneHo 13
Filtri (2)
• Primo o ul4mo elemento: – $("p:first"); // oppure $("p:last");
• Elemen4 che non corrispondono ad un seleHore: – $("p:not(.foo)");
• Elemen4 pari o dispari: – $("p:odd"); // oppure $("p:even");
• Elemen4 seleziona4 tramite indici: – $("p:eq(2)");
Complemen4 di Tecnologie Web, A.A. 2011-‐2012 -‐ M. Franceschet, V. Della Mea, I. ScagneHo 14
Filtri di contenuto
• Elemen4 che contengono del testo: – $("p:contains(testo)");
• Elemen4 che contengono un determinato elemento: – $("p:has(span)");
• Elemen4 vuo4: – $("p:empty");
• Elemen4 con figli: – $("p:parent");
Complemen4 di Tecnologie Web, A.A. 2011-‐2012 -‐ M. Franceschet, V. Della Mea, I. ScagneHo 15
Filtri di visibilità
• Questo 4po di filtri seleziona gli elemen4 visibili (:visible) e nascos4 (:hidden), rispe^vamente: – $("p:visible"); – $("p:hidden");
Complemen4 di Tecnologie Web, A.A. 2011-‐2012 -‐ M. Franceschet, V. Della Mea, I. ScagneHo 16
Filtri di aHribu4
• Selezionare elemen4 che hanno un aHributo impostato ad uno specifico valore ([attributo=valore]): – $("[class=foo]");
• Selezionare elemen4 che non hanno un aHributo impostato ad uno specifico valore ([attributo!=valore]): – $("[class!=foo]");
Complemen4 di Tecnologie Web, A.A. 2011-‐2012 -‐ M. Franceschet, V. Della Mea, I. ScagneHo 17
Filtri di nodi figli
• Ennesimo figlio: – $("p:nth-child(2)"); /* il conteggio parte da 1 */
• Primo o ul4mo figlio: – $("p span:first-child"); – $("p span:last-child");
Complemen4 di Tecnologie Web, A.A. 2011-‐2012 -‐ M. Franceschet, V. Della Mea, I. ScagneHo 18
Filtri di form
• Selezione tramite il 4po dell’elemento di input: – $("input:radio"); – Altri filtri: :button, :checkbox, :file, :image,
:password, :submit, :text
• Selezione degli elemen4 abilita4/disabilita4: – $(":enabled"); – $(":disabled");
• Selezione degli elemen4 seleziona4: – $(":checked"); – $(":selected");
Complemen4 di Tecnologie Web, A.A. 2011-‐2012 -‐ M. Franceschet, V. Della Mea, I. ScagneHo 19
Comportamento degli script jQuery • Il vantaggio di jQuery è che quasi tu^ i suoi metodi sono applicabili in cascata.
• Ciò è possibile in quanto ogni metodo res4tuisce l’oggeHo jQuery modificato.
• Ne risulta una semplificazione nei seguen4 compi4: – navigazione e modifica del DOM; – ges4one con una sintassi semplice degli even4 del browser;
– accesso e modifica di tu^ gli aHribu4 degli elemen4; – animazioni ed altri effe^ visivi; – accesso ad AJAX facilitato.
Complemen4 di Tecnologie Web, A.A. 2011-‐2012 -‐ M. Franceschet, V. Della Mea, I. ScagneHo 20
Creare ed inserire elemen4 nel DOM
Complemen4 di Tecnologie Web, A.A. 2011-‐2012 -‐ M. Franceschet, V. Della Mea, I. ScagneHo 21
Creare nuovi elemen4 • Creare un nuovo paragrafo (notare la presenza delle parentesi angolate):
– $("<p>"); • A questo punto possiamo aggiungere aHribu4 e testo al nuovo paragrafo:
– $('<p class="bat">Questo è un nuovo paragrafo!</p>');
• Sintassi alterna4va: – $("<p>", { "class":"bat",
"text":"Questo è un nuovo paragrafo!" }); Si no4 che il nuovo elemento non è ancora visibile perché non è stato ancora inserito nel DOM.
Complemen4 di Tecnologie Web, A.A. 2011-‐2012 -‐ M. Franceschet, V. Della Mea, I. ScagneHo 22
Inserire elemen4 nel DOM (1)
• append() e prepend() aggiungono, in coda ed in testa rispe^vamente, gli elemen4 passa4 come argomen4 internamente all’elemento a cui vengono concatena4. – var paragrafo = $("<p>", { "css":{"background":"yellow"},
"text":"Questo è un nuovo paragrafo!" }); $("body").prepend(paragrafo);
Complemen4 di Tecnologie Web, A.A. 2011-‐2012 -‐ M. Franceschet, V. Della Mea, I. ScagneHo 23
Inserire elemen4 nel DOM (2)
• appendTo() e prependTo(): – $("<p>", {
"css":{"background":"yellow"}, "text":"Questo è un nuovo paragrafo!" }).prependTo("body");
• after() e before(): come append() e prepend(), ma aggiungono il contenuto fuori dall’elemento a cui vengono concatena4.
• insertAfter() e insertBefore() stanno a after() e before() come appendTo() e prependTo() stanno a append() e prepend().
Complemen4 di Tecnologie Web, A.A. 2011-‐2012 -‐ M. Franceschet, V. Della Mea, I. ScagneHo 24
Inserire elemen4 nel DOM (3)
• wrap()serve a racchiudere elemen4 esisten4 con nuovi elemen4: – $("span").wrap("<strong />");
• unwrap(): rimuove i tag che racchiudono l’elemento a cui viene concatenato.
• wrapAll(): svolge la stessa azione di wrap(), ma applicata a più elemen4 contemporaneamente.
• wrapInner(): racchiude il contenuto di un elemento, ma non I suoi tag.
Complemen4 di Tecnologie Web, A.A. 2011-‐2012 -‐ M. Franceschet, V. Della Mea, I. ScagneHo 25
Rimuovere elemen4 dal DOM
• Il metodo remove() consente di rimuovere gli elemen4 seleziona4 dal DOM: – $("p").remove(".foo"); Il codice precedente rimuove dal documento tu^ i paragrafi con classe foo.
Complemen4 di Tecnologie Web, A.A. 2011-‐2012 -‐ M. Franceschet, V. Della Mea, I. ScagneHo 26
Animazioni ed altri effe^ visivi
Complemen4 di Tecnologie Web, A.A. 2011-‐2012 -‐ M. Franceschet, V. Della Mea, I. ScagneHo 27
Show / Hide • Per nascondere il paragrafo con id bar:
– $("#bar").hide(); • L’elemento rimane tuHavia presente nel DOM e per tornare a visualizzarlo
è sufficiente eseguire: – $("#bar").show();
• Esempio più complesso: – $("#bar")
.css({ "background":"yellow", "border":"1px solid black" }) .hide(2000, function() { console.log("Animazione completata!"); });
Complemen4 di Tecnologie Web, A.A. 2011-‐2012 -‐ M. Franceschet, V. Della Mea, I. ScagneHo 28
Fade in, fade out, fade to (1)
• Ques4 metodi consentono di sfruHare e ges4re il livello di trasparenza degli elemen4:
$("form") .fadeOut(1000, function(){
console.log("Faded out!"); }) .fadeIn(1000, function(){ console.log("Faded in!"); });
Complemen4 di Tecnologie Web, A.A. 2011-‐2012 -‐ M. Franceschet, V. Della Mea, I. ScagneHo 29
Fade in, fade out, fade to (2)
• fadeTo permeHe di specificare anche il livello di trasparenza finale dell’elemento:
$("form") .fadeTo(1000, 0.5, function(){
console.log("Faded to 50%!"); });
Complemen4 di Tecnologie Web, A.A. 2011-‐2012 -‐ M. Franceschet, V. Della Mea, I. ScagneHo 30
Slide up, slide down, toggle (1)
• Metodi alterna4vi per nascondere/mostrare un elemento:
$("p.foo") .slideUp(1000, function(){
console.log("Nascosto!"); }) .slideDown(1000, function(){ console.log("Visibile!"); });
Complemen4 di Tecnologie Web, A.A. 2011-‐2012 -‐ M. Franceschet, V. Della Mea, I. ScagneHo 31
Slide up, slide down, toggle (2)
• slideToggle è abbastanza “intelligente” da capire se un elemento è nascosto/visibile e da compiere l’azione duale:
$("p.foo") .slideToggle(1000, function(){
console.log("Invertito!"); });
Complemen4 di Tecnologie Web, A.A. 2011-‐2012 -‐ M. Franceschet, V. Della Mea, I. ScagneHo 32
Animate
• Le funzioni preceden4 sono casi speciali basa4 su animate():
$("#bar") .css({ "background":"yellow", "border":"1px solid black" })
.animate({ "width":"500px", "height":"100px"
}, 5000, "swing",
function(){ console.log("Animazione completata!"); });
Complemen4 di Tecnologie Web, A.A. 2011-‐2012 -‐ M. Franceschet, V. Della Mea, I. ScagneHo 33
Altre funzioni u4li
• delay(): prende come argomento il numero di millisecondi della pausa da effeHuare, prima di riprendere l’esecuzione dei metodi.
• stop(): prende due argomen4 booleani: – il primo specifica se la coda delle animazioni debba essere svuotata;
– il secondo specifica se l’animazione fermata debba “saltare” alla configurazione finale.
Complemen4 di Tecnologie Web, A.A. 2011-‐2012 -‐ M. Franceschet, V. Della Mea, I. ScagneHo 34
Recommended