ݺߣ

ݺߣShare a Scribd company logo

Write less do more...with jQuery

•
•
X
XeDotNet

jQuery è un framework javascript che permette di semplificare la scrittura di codice javascript, facilitando l'iterazione con gli elementi della pagina (controlli, stili, eventi, animazioni, ...), e permettendo di aumentare la user experience delle applicazioni, riducendone al tempo stesso la complessità di scrittura. Vista la sua diffusione e potenza, è stato anche incluso nei project templete di Visual Studio. In questa sessione vedremo cos'è jQuery, e scopriremo le potenzialità e funzionalità che offre, verificando se il motto "write less do more" sia vero o meno.

1 of 30
Write less do more...with jQueryAndrea Dottor – Microsoft MVP ASP/ASP.NET
05/03/2010www.xedotnet.org2Cos’è jQueryCosa può farejQueryjQuery UI – jQuery ToolsCome usare jQuery da ASP.NETConclusione
05/03/2010www.xedotnet.org3Progetto nato nel 2006 da John ResigFramework JavaScriptManipolazione dei CSSManipolazione del HTML della paginaEffetti graficiChiamate AJAXCos’è jQuery
05/03/2010www.xedotnet.org4È Cross-browserHa pienosupportodeiselettori CSS 1-3Solamente 24KB di peso (minimizzata e compressa)Può essere usato con altre libreriejQuery.noConflict()Può essere esteso realizzando nuove funzionalità (plugin)Ha una grande community che ha già realizzato innumerevoli plugin, di ogni genereSintassi sintetica ed efficienteWrite less, do morePerchè usare jQuery
05/03/2010www.xedotnet.org5Download da http://jquery.com/Per utilizzarla, inserire lo script nella paginaPossibilità di download da Microsoft CDNCome usare jQuery// Script presente in una cartella del sito<script type="text/javascript" src=/slideshow/jquery-3363126/3363126/"jquery-1.4.2.min.js" />// Script presente nella Microsoft CDN<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"/>// Script presente nel network google<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" />
05/03/2010www.xedotnet.org6jQuery si basa sull’uso dell’oggetto $ che è l’abbreviazione/alias di jQueryPermette di scrivere script più brevi e leggibiliFacciamo un confronto:Alla base di Jquery$("#content"); jQuery("#content"):// <a id="mioLink" href="http://www.xedotnet.org">link</a>document.getElementById("mioLink").href; // JavaScript nativo$get("mioLink").href; // ASP.NET AJAX$("mioLink").readAttribute("href"); // Prototype$("#mioLink").attr("href"); // jQuery
05/03/2010www.xedotnet.org7Il selettore di jQuery si basa (anche) sulle stesse regole dei selettori utilizzati per i fogli di stile.Si può:Selezionare un elemento con un preciso IDSelezionare elementi aventi la stessa CssClassE’ possibile applicare più regole di selezione contemporaneamenteSi può applicare un selettore partendo da un elemento conosciutoSelettori$("#id");$(".cssClass");
05/03/2010www.xedotnet.org8Possibilità di eseguire dei selettori gerarchiciPossibilità di applicare regole particolariSelezione di un elemento contiguo, adiacente, successivo...Possibilità di ricercare gli elementi verificando il valore degli attributiElementi che hanno un attributo valorizzatoElementi che hanno un attributo che “inizia per”, “contiene”, “finisce per”, ...Selettori gerarchici
05/03/2010www.xedotnet.org9Gli elementi recuperati possono venire ulteriormente filtrati applicando maggiori dettagli nel selettore:Rispetto alla posizione Rispetto alla loro visibilitàRispetto ai contenutiRispetto al tipo di elementoFiltrare la selezione$("#content:input");
05/03/2010www.xedotnet.org10Se si recupera una collezione di oggetti, può essere utile navigare i suoi figliCercando al loro internoRecuperando i figli di primo livelloSpostandosi tra gli elementiTraversing$("#menu").find("li");$("#menu").children("li");$("#start").next("li"); $("#start").prev("li");$("#start").nextAll("li");$("#start").siblings("li");
05/03/2010www.xedotnet.org11Con jQuery si possono gestire le CssClass degli elementi recuperati, utilizzando i metodi:. Si possono manipolare direttamente gli stili, utilizzando i metodi:DOM e CSS.hasClass().addClass().removeClass().toggleClass().css().attr()
05/03/2010www.xedotnet.org12Oltre alla manipolazione dei CSS, si può agire direttamente nel DOM della paginaRecuperando il contenuto di un elementoOppure andandolo ad impostareDOM e CSS$("p").text(); $("p").html(); $("p").text("Nuovo testo");$("p").html("Nuovo testo con <strong>HTML</strong>");
05/03/2010www.xedotnet.org13Oltre alla manipolazione dei CSS, si può agire direttamente nel DOM della paginaInserendo/spostando elementiInserire elementi contigui (after e before)Avvolgendo elementi (wrap, wrapAll e wrapInner)DOM e CSS$("#menu").append("<li>lista</li>");$("<li>lista</li>").appendTo("#menu"); $("#menu2 li").appendTo("#menu");$("#menu").after("<ul id='menu2'></ul>");$("<ul id='menu2'></ul>").insertAfter("#menu");$("p").wrap("<div></div>");$("p").wrapInner("<span></span>");
www.xedotnet.org14DEMO
05/03/2010www.xedotnet.org15Per gestire gli eventi in jQuery si fa uso del metodo .bind()Per sganciare l’associazione all’evento si deve utilizzare .unbind()Utilizzato per togliere l’handler di uno specifico eventoToglie tutti gli handler associati all’elementoEventi$("#btnSend").bind("click",function (event) { alert('ciao!'); });$("#btnSend").unbind("click");$("#btnSend").unbind();
05/03/2010www.xedotnet.org16Oltre al metodo bind() per la gestione degli eventi, esistono alcuni metodi particolari:.one() – esegue la funzione solo una volta.hover() – accetta due funzioni, una per il mouse hover e una per i lmouse leave.toggle() – accetta una o più funzioni, che vengono lanciate in sequenza ad ogni clickEventi$("td").hover( function () { $(this).addClass("hover"); }, function () { $(this).removeClass("hover"); } );$('#foo').one('click', function() { alert('This will be displayed only once.'); });
05/03/2010www.xedotnet.org17In jQuery tutte le animazioni vengono gestite in una coda ("fx") che è possibile interrogare tramite i metodi .queue() - aggiunge elementi alla coda.dequeue() – fa riprendere la coda dall’animazione successivaPer svuotare una coda:Usare .stop() per fermare un’animazioneAnimazioni$("div").queue("fx",[]);$("div").stop(); // ferma la coda$("div").stop(true); // ferma e cancella la coda
05/03/2010www.xedotnet.org18Effetti di base.show() – visualizza l’elemento.hide() – nasconde l’elemento.toggle() – alterna hide e showTutti i metodi accettano un valore relativo alla durata dell’animazione che può essere slow, normal, fast oppure un valore in millisecondiAnimazionislow, normal, fast$("#elementoNascosto").show("slow",function () { alert("Animazione conclusa!");});
05/03/2010www.xedotnet.org19Effetti specificijQuery mette a disposizione metodi che ripropongono animazioni spesso usate.slideDown().slideUp().slideToggle().fadeIn().fadeOut().fadeTo()Animazioni
05/03/2010www.xedotnet.org20Si possono eseguire animazioni personalizzate facendo uso del metodo .animate()Animazioni$("#box").animate({ "borderWidth" : "4px", //bordo a 4 pixel "width" : "+=20px" //aumenta la larghezza }, "slow", //animazione lenta "linear", //andamento lineare function () { //funzione di callback alert("Animazione conclusa!"); });
www.xedotnet.org21DEMO
05/03/2010www.xedotnet.org22jQuery mette a disposizione dei metodi per poter eseguire e gestire chiamate asincrone.ajax() .post(), .get()AJAX$.ajax({    url : "pagina.aspx",    success : function (data,state) {        $("#result").html(data);        $("#state").text(state);    },    error : function (request,state,errors) {        alert("E' evvenuto un errore. Stato chiamata: "+stato);    }});
05/03/2010www.xedotnet.org23Parametri opzionali del metodo .ajax()async – indica se la chiamata viene fatta in asincronocache – forza il server a ricaricare i daticontentType – tipo di contenuto inviato al serverdata – dati da inviare al serverdataType – tipo di dati restituito dal serverusername – username se richiesto dal serverpassword – password se richiesta dal servertimeout – timeout della chiamata verso il servertype – tipo della richiesta, GET o POST AJAX
05/03/2010www.xedotnet.org24Per creare delle proprie funzioni, si deve far uso della funzione $.fn.extend()Dovrà avere la seguente strutturaCreare funzioni$.fn.extend({ nomeplugin : function () { return this.each( function () { //this è l'elemento }); } });$.fn.extend({ changeBackground : function () { return this.each(function () {$(this).css("backgroundColor","yellow");}); } });$("p").changeBackground();
www.xedotnet.org25DEMO
05/03/2010www.xedotnet.org26jQuery UI - http://jqueryui.com/Libreria di controlli, animazioni, effettiAccordionAutocompleteButtonDatepickerDialogProgressbarݺߣrTabsPossibilitò di scelta tra vari temi già realizzatiCss + immaginiCompletamente personalizzabili in modo da adattarli alla grafica della propria applicazionejQuery UI
05/03/2010www.xedotnet.org27jQuery Tools - http://flowplayer.org/tools/Libreria di terze parti contenenti diversi controlliTabsTooltipScrollableOverlayExposeIntegrano alcuni controlli mancanti in jQuery UIjQuery Tools
05/03/2010www.xedotnet.org28Come usare jQuery con ASP.NET?Facile quasi quanto usare ASP.NET AJAX LibraryManca solamente l’integrazione con i server controlRecuperare l’id di un server control: <%= txtDescription.ClientID %>Registrazione di script da eseguire lato clientScriptManager.RegisterStartupScript()Passaggio di dati complessi utilizzando jsonEs: Libreria .NET Newtonsoft.Json http://www.codeplex.com/JsonCome usare jQuery con ASP.NET
www.xedotnet.org29DEMO
Link05/03/2010www.xedotnet.org30blog.dottor.netandrea@dottor.net www.dottor.nettwitter.com/dottor

More Related Content

Write less do more...with jQuery

  • 1. Write less do more...with jQueryAndrea Dottor – Microsoft MVP ASP/ASP.NET
  • 2. 05/03/2010www.xedotnet.org2Cos’è jQueryCosa può farejQueryjQuery UI – jQuery ToolsCome usare jQuery da ASP.NETConclusione
  • 3. 05/03/2010www.xedotnet.org3Progetto nato nel 2006 da John ResigFramework JavaScriptManipolazione dei CSSManipolazione del HTML della paginaEffetti graficiChiamate AJAXCos’è jQuery
  • 4. 05/03/2010www.xedotnet.org4È Cross-browserHa pienosupportodeiselettori CSS 1-3Solamente 24KB di peso (minimizzata e compressa)Può essere usato con altre libreriejQuery.noConflict()Può essere esteso realizzando nuove funzionalità (plugin)Ha una grande community che ha già realizzato innumerevoli plugin, di ogni genereSintassi sintetica ed efficienteWrite less, do morePerchè usare jQuery
  • 5. 05/03/2010www.xedotnet.org5Download da http://jquery.com/Per utilizzarla, inserire lo script nella paginaPossibilità di download da Microsoft CDNCome usare jQuery// Script presente in una cartella del sito<script type="text/javascript" src=/slideshow/jquery-3363126/3363126/"jquery-1.4.2.min.js" />// Script presente nella Microsoft CDN<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"/>// Script presente nel network google<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" />
  • 6. 05/03/2010www.xedotnet.org6jQuery si basa sull’uso dell’oggetto $ che è l’abbreviazione/alias di jQueryPermette di scrivere script più brevi e leggibiliFacciamo un confronto:Alla base di Jquery$("#content"); jQuery("#content"):// <a id="mioLink" href="http://www.xedotnet.org">link</a>document.getElementById("mioLink").href; // JavaScript nativo$get("mioLink").href; // ASP.NET AJAX$("mioLink").readAttribute("href"); // Prototype$("#mioLink").attr("href"); // jQuery
  • 7. 05/03/2010www.xedotnet.org7Il selettore di jQuery si basa (anche) sulle stesse regole dei selettori utilizzati per i fogli di stile.Si può:Selezionare un elemento con un preciso IDSelezionare elementi aventi la stessa CssClassE’ possibile applicare più regole di selezione contemporaneamenteSi può applicare un selettore partendo da un elemento conosciutoSelettori$("#id");$(".cssClass");
  • 8. 05/03/2010www.xedotnet.org8Possibilità di eseguire dei selettori gerarchiciPossibilità di applicare regole particolariSelezione di un elemento contiguo, adiacente, successivo...Possibilità di ricercare gli elementi verificando il valore degli attributiElementi che hanno un attributo valorizzatoElementi che hanno un attributo che “inizia per”, “contiene”, “finisce per”, ...Selettori gerarchici
  • 9. 05/03/2010www.xedotnet.org9Gli elementi recuperati possono venire ulteriormente filtrati applicando maggiori dettagli nel selettore:Rispetto alla posizione Rispetto alla loro visibilitàRispetto ai contenutiRispetto al tipo di elementoFiltrare la selezione$("#content:input");
  • 10. 05/03/2010www.xedotnet.org10Se si recupera una collezione di oggetti, può essere utile navigare i suoi figliCercando al loro internoRecuperando i figli di primo livelloSpostandosi tra gli elementiTraversing$("#menu").find("li");$("#menu").children("li");$("#start").next("li"); $("#start").prev("li");$("#start").nextAll("li");$("#start").siblings("li");
  • 11. 05/03/2010www.xedotnet.org11Con jQuery si possono gestire le CssClass degli elementi recuperati, utilizzando i metodi:. Si possono manipolare direttamente gli stili, utilizzando i metodi:DOM e CSS.hasClass().addClass().removeClass().toggleClass().css().attr()
  • 12. 05/03/2010www.xedotnet.org12Oltre alla manipolazione dei CSS, si può agire direttamente nel DOM della paginaRecuperando il contenuto di un elementoOppure andandolo ad impostareDOM e CSS$("p").text(); $("p").html(); $("p").text("Nuovo testo");$("p").html("Nuovo testo con <strong>HTML</strong>");
  • 13. 05/03/2010www.xedotnet.org13Oltre alla manipolazione dei CSS, si può agire direttamente nel DOM della paginaInserendo/spostando elementiInserire elementi contigui (after e before)Avvolgendo elementi (wrap, wrapAll e wrapInner)DOM e CSS$("#menu").append("<li>lista</li>");$("<li>lista</li>").appendTo("#menu"); $("#menu2 li").appendTo("#menu");$("#menu").after("<ul id='menu2'></ul>");$("<ul id='menu2'></ul>").insertAfter("#menu");$("p").wrap("<div></div>");$("p").wrapInner("<span></span>");
  • 15. 05/03/2010www.xedotnet.org15Per gestire gli eventi in jQuery si fa uso del metodo .bind()Per sganciare l’associazione all’evento si deve utilizzare .unbind()Utilizzato per togliere l’handler di uno specifico eventoToglie tutti gli handler associati all’elementoEventi$("#btnSend").bind("click",function (event) { alert('ciao!'); });$("#btnSend").unbind("click");$("#btnSend").unbind();
  • 16. 05/03/2010www.xedotnet.org16Oltre al metodo bind() per la gestione degli eventi, esistono alcuni metodi particolari:.one() – esegue la funzione solo una volta.hover() – accetta due funzioni, una per il mouse hover e una per i lmouse leave.toggle() – accetta una o più funzioni, che vengono lanciate in sequenza ad ogni clickEventi$("td").hover( function () { $(this).addClass("hover"); }, function () { $(this).removeClass("hover"); } );$('#foo').one('click', function() { alert('This will be displayed only once.'); });
  • 17. 05/03/2010www.xedotnet.org17In jQuery tutte le animazioni vengono gestite in una coda ("fx") che è possibile interrogare tramite i metodi .queue() - aggiunge elementi alla coda.dequeue() – fa riprendere la coda dall’animazione successivaPer svuotare una coda:Usare .stop() per fermare un’animazioneAnimazioni$("div").queue("fx",[]);$("div").stop(); // ferma la coda$("div").stop(true); // ferma e cancella la coda
  • 18. 05/03/2010www.xedotnet.org18Effetti di base.show() – visualizza l’elemento.hide() – nasconde l’elemento.toggle() – alterna hide e showTutti i metodi accettano un valore relativo alla durata dell’animazione che può essere slow, normal, fast oppure un valore in millisecondiAnimazionislow, normal, fast$("#elementoNascosto").show("slow",function () { alert("Animazione conclusa!");});
  • 19. 05/03/2010www.xedotnet.org19Effetti specificijQuery mette a disposizione metodi che ripropongono animazioni spesso usate.slideDown().slideUp().slideToggle().fadeIn().fadeOut().fadeTo()Animazioni
  • 20. 05/03/2010www.xedotnet.org20Si possono eseguire animazioni personalizzate facendo uso del metodo .animate()Animazioni$("#box").animate({ "borderWidth" : "4px", //bordo a 4 pixel "width" : "+=20px" //aumenta la larghezza }, "slow", //animazione lenta "linear", //andamento lineare function () { //funzione di callback alert("Animazione conclusa!"); });
  • 22. 05/03/2010www.xedotnet.org22jQuery mette a disposizione dei metodi per poter eseguire e gestire chiamate asincrone.ajax() .post(), .get()AJAX$.ajax({    url : "pagina.aspx",    success : function (data,state) {        $("#result").html(data);        $("#state").text(state);    },    error : function (request,state,errors) {        alert("E' evvenuto un errore. Stato chiamata: "+stato);    }});
  • 23. 05/03/2010www.xedotnet.org23Parametri opzionali del metodo .ajax()async – indica se la chiamata viene fatta in asincronocache – forza il server a ricaricare i daticontentType – tipo di contenuto inviato al serverdata – dati da inviare al serverdataType – tipo di dati restituito dal serverusername – username se richiesto dal serverpassword – password se richiesta dal servertimeout – timeout della chiamata verso il servertype – tipo della richiesta, GET o POST AJAX
  • 24. 05/03/2010www.xedotnet.org24Per creare delle proprie funzioni, si deve far uso della funzione $.fn.extend()Dovrà avere la seguente strutturaCreare funzioni$.fn.extend({ nomeplugin : function () { return this.each( function () { //this è l'elemento }); } });$.fn.extend({ changeBackground : function () { return this.each(function () {$(this).css("backgroundColor","yellow");}); } });$("p").changeBackground();
  • 26. 05/03/2010www.xedotnet.org26jQuery UI - http://jqueryui.com/Libreria di controlli, animazioni, effettiAccordionAutocompleteButtonDatepickerDialogProgressbarݺߣrTabsPossibilitò di scelta tra vari temi già realizzatiCss + immaginiCompletamente personalizzabili in modo da adattarli alla grafica della propria applicazionejQuery UI
  • 27. 05/03/2010www.xedotnet.org27jQuery Tools - http://flowplayer.org/tools/Libreria di terze parti contenenti diversi controlliTabsTooltipScrollableOverlayExposeIntegrano alcuni controlli mancanti in jQuery UIjQuery Tools
  • 28. 05/03/2010www.xedotnet.org28Come usare jQuery con ASP.NET?Facile quasi quanto usare ASP.NET AJAX LibraryManca solamente l’integrazione con i server controlRecuperare l’id di un server control: <%= txtDescription.ClientID %>Registrazione di script da eseguire lato clientScriptManager.RegisterStartupScript()Passaggio di dati complessi utilizzando jsonEs: Libreria .NET Newtonsoft.Json http://www.codeplex.com/JsonCome usare jQuery con ASP.NET