Introduzione+ajQuery+ - users.dimi.uniud.itivan.scagnetto/lato_server/jQuery.pdf · •...

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.


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.


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).


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>


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 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/


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 );


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 */


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. */


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)).


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)");


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");


Filtri di visibilità

•  Questo 4po di filtri seleziona gli elemen4 visibili (:visible) e nascos4 (:hidden), rispe^vamente: – $("p:visible"); – $("p:hidden");


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]");


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");


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");


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.


Creare ed inserire elemen4 nel DOM


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.


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);



•  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().



•  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.


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.


Animazioni ed altri effe^ visivi


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!"); });


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!"); });


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%!"); });


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!"); });


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!"); });


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!"); });


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.


Introduzione+ajQuery+ - users.dimi.uniud.itivan.scagnetto/lato_server/jQuery.pdf · •...

Documents

Transcript of Introduzione+ajQuery+ - users.dimi.uniud.itivan.scagnetto/lato_server/jQuery.pdf · •...