Advanced JQuery

3,353 views

Published on

1 Comment
2 Likes
Statistics
Notes
  • Latest version of gmap3 is available on http://gmap3.net

    it allows many neaw features (give data throught events, using clusters ...)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
3,353
On SlideShare
0
From Embeds
0
Number of Embeds
289
Actions
Shares
0
Downloads
128
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

Advanced JQuery

  1. 1. Advanced jQuery<br />DOM Manipulation, Ajax, PlugIn, andmore..<br />
  2. 2. Mi Presento<br />Fabio Franzini<br />Consulente, Sviluppatore e Trainer<br />blog: www.fabiofranzini.com<br />email: fabio@fabiofranzini.com<br />twitter: @franzinifabio<br />
  3. 3. Cos’è jQuery<br />“jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. <br />jQuery is designed to change the way that you write JavaScript.”<br />
  4. 4. Capiamo come usare jQuery senza avere sempre la pappa pronta!!<br />
  5. 5. Filosofia dietro a jQuery<br />Trova qualcosa in qualche modo<br />Esegui qualcosa su questo<br />Il focus principale riguarda l’interazione fra JavaScript e HTML<br />
  6. 6. jQuery è:<br />Solo una funzione!<br />jQuery(): funzione principale<br />$(): Alias di jQuery()<br />jQuery.noConflict()<br />Se si utilizzano librerie diverse che hanno funzioni che si chiamano $<br />
  7. 7. jQuery.noConflict()<br /><script type="text/javascript" src="other_lib.js"></script> <br /><script type="text/javascript" src="jquery.js"></script> <br /><script type="text/javascript"> <br />$.noConflict(); <br /> // Code that uses other library's $ can follow here. </script><br />var j = jQuery.noConflict(); <br />// Do something with jQuery<br />j("div p").hide(); <br />// Do something with another library's $() <br />$("content").style.display = 'none';<br /><script type="text/javascript" src="other_lib.js"></script> <br /><script type="text/javascript" src="jquery.js"></script> <br /><script type="text/javascript"> <br />$.noConflict(); <br /> jQuery(document).ready(function($) { <br /> // Code that uses jQuery's $ can follow here. <br /> }); <br /> // Code that uses other library's $ can follow here. <br /></script><br />
  8. 8. jQuery VS $<br />jQuery('#nav')<br />jQuery('div#intro h2')<br />jQuery('#nav li.current a')<br />$('#nav')<br />$('div#intro h2')<br />$('#nav li.current a')<br />
  9. 9. Selettori<br />CSS 2 e CSS3<br />a[rel]<br />a[rel="friend"]<br />a[href^="http://"]<br />ul#nav > li<br />li#current ~ li (li siblings that follow #current)<br />li:first-child, li:last-child, li:nth-child(3)<br />
  10. 10. Altri tipi di selettori<br />div:first, h3:last<br />:header<br />:hidden, :visible<br />:animated<br />:input, :text, :password, :radio, :submit...<br />div:contains(Hello)<br />
  11. 11. Collezioni di oggetti<br />$('div.section') ritorna una collezioni di oggetti jQuery<br />$('div.section').lenght() = “num. dielementi”<br />$('div.section').each(function() {<br /> console.log(this);<br />});<br />$('div.section')[0]<br />$('div.section')[1]<br />$('div.section')[2]<br />
  12. 12. Accedere ai dati<br />$('span#msg').text(‘Ciao Mondo!');<br />$('div#intro').html('<em> Ciao Mondo</em>');<br />$('a.nav').attr('href', 'http://flickr.com/');<br />$('a.nav').attr({<br /> 'href': 'http://flickr.com/',<br /> 'id': 'flickr'<br />});<br />$('#intro').removeAttr('id');<br />//Alcunimetodiritornano I valori del primo risultatoottenutodalfiltro.<br />var height = $('div#intro').height();<br />var src = $('img.photo').attr('src');<br />var lastP = $('p:last').html()<br />var hasFoo = $('p').hasClass('foo');<br />var email = $('input#email').val();<br />
  13. 13. Gestione dei CSS<br />$('#intro').addClass('highlighted');<br />$('#intro').removeClass('highlighted');<br />$('#intro').toggleClass('highlighted');<br />$('p').css('font-size', '20px');<br />$('p').css({'font-size': '20px', color: 'red'});<br />
  14. 14. Scorrere il DOM<br />$('div.section').parent()<br />$('div.section').next()<br />$('div.section').prev()<br />$('div.section').nextAll('div')<br />$('h1:first').parents()<br />
  15. 15. Gestire gli eventi<br />// OnLoad della pagina<br />$(document).ready(function() {<br />alert('The DOM is ready!');<br />});<br />// OnLoad della pagina<br />$(function() {<br /> alert('The DOM is ready!');<br />});<br />$('a:first').click(function(ev) {<br />ev.preventDefault();<br />$(this).css({backgroundColor: 'orange'});<br />});<br />...<br />...<br />...<br />$('a:first').click();<br />
  16. 16. Concatenamento dei Metodi<br />La maggior parte dei metodi di jQuery restituiscono un altro oggetto jQuery. <br />Solitamente un oggetto che rappresenta l'insieme stesso degli oggetti ritornati in base al filtro. <br />$('div.section').hide().addClass('gone');<br />Alcuni metodi restituiscono un insieme di oggetti diverso. <br />E’ possibile chiamare .end() per ripristinare la precedente collezione<br />$('#intro').css ('colore', '# CCCCCC').<br />Find('a').addClass('highlighted').end().<br />Find('em').CSS ('colore', ' red').end()<br />
  17. 17. Ajax con jQuery<br />jQuery offre un supporto eccellente a Ajax.<br />$('div#intro').load('/some/file.html');<br />Altri metodi:<br />$.get(url, params, callback)<br />$.post(url, params, callback)<br />$.getJSON(url, params, callback)<br />$.getScript(url, callback)<br />
  18. 18. Ajax<br />DEMO<br />
  19. 19. Animazioni<br />//Effetti built-in<br />$('h1').hide('slow');<br />$('h1').slideDown('fast');<br />$('h1').fadeOut(2000);<br />//Concatenazione<br />$('h1').fadeOut(1000).slideDown()<br />$("#block").animate({<br />width: "+=60px",<br />opacity: 0.4,<br />fontSize: "3em",<br />borderWidth: "10px"<br />}, 1500);<br />
  20. 20. Animazioni<br />DEMO<br />
  21. 21. Plugins<br />jQuery è estendibile grazie ai Plugins disponibili e che possiamo creare noi.<br />Il concetto dietro ai plugin non è altro che l’aggiunta di uno o più metodi all’oggetto jQuery.<br />Esistono un’infinità di Plugins già fatti per i più disparati usi.<br />
  22. 22. Esempio di PlugIn (gmap3) 1/2<br /><script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script><br /><script src="jquery.min.js" type="text/javascript"></script> <br /><script type="text/javascript" src="gmap3-1.0.min.js"></script><br />...<br />$('#Mappa').gmap3( { <br /> action: ':addMarker', <br /> args:{ <br /> address: "Piazza Bra, Verona", <br /> map:{ center: true, zoom: 20 } <br /> } <br />}, {action: 'enableScrollWheelZoom'} );<br />
  23. 23. Esempio di PlugIn (jNotify) 2/2<br /><script src="jquery.min.js" type="text/javascript"></script> <br /><script src="jquery.jnotify.js" type="text/javascript"></script><br />...<br />$(document).ready(function() { <br /> $('#StatusBar').jnotifyInizialize({ oneAtTime: true });<br />});<br />...<br />$('#addStatusBarError').click(function() { <br /> $('#StatusBar').jnotifyAddMessage({ <br /> text: 'This is a permanent error.', <br /> permanent: true, <br /> type: 'error' <br /> }); <br />});<br />
  24. 24. Creare PlugIn<br />Creare un file: jquery.nome-plugin.js<br />(function($) { <br />$.fn.nomePlugIn = function() { <br /> // Codice del Plugin<br />}<br />})(jQuery);<br />$.fn == jQuery.prototype <br />
  25. 25. highlightOnce<br />(function($) {<br /> $.fn.highlightOnce = function() {<br /> return this.each(function() {<br /> // Do something to each item<br /> $(this)<br /> .data('original-color', $(this)<br /> .css('background-color'))<br /> .css('background-color', '#fff47f')<br /> .one('mouseenter', function() {<br /> $(this).animate({<br /> 'background-color': $(this).data('original-color')<br /> }, 'fast');<br /> });<br /> });<br />}<br />})(jQuery);<br />
  26. 26. highlightOnce<br />DEMO<br />
  27. 27. Creare PlugIn paramerici<br />$.fn.nomePlugIn.defaults = { <br />param1: 'value1',<br /> param2: 'value2'<br />}; <br />$.fn.nomePlugIn = function(options) { <br />options = $.extend($.fn.nomePlugIn.defaults, options); <br /> ....<br /> ...<br />};<br />
  28. 28. highlightOnce parametrico<br />DEMO<br />
  29. 29. Plugin Callback<br />Usiamo come prima i parametri e quindi poi il metodo $.extend<br />$.fn.nomePlugIn.defaults = { <br />param1: 'value1',<br /> param2: 'value2‘,<br /> callback: null<br />}; <br />$.fn.nomePlugIn = function(options) { <br />options = $.extend($.fn.nomePlugIn.defaults, options); <br /> ....<br /> // Eseguire la callback (function.call() => http://bit.ly/a9mYvz)<br />$.isFunction(options.callback) && options.callback.call(this);<br />};<br />
  30. 30. highlightOnce Callback<br />DEMO<br />
  31. 31. Plugin Namespace 1/2<br />var methods = {<br /> init : function( options ) { … },<br /> show : function( ) { … },<br /> hide : function( ) { … },<br /> update : function( content ) { … }<br /> };<br /> $.fn.tooltip = function( method ) {<br /> if ( methods[method] ) {<br /> return methods[method].apply( this, Array.prototype.slice.call(arguments, 1));<br />} else if ( typeof method === 'object' || ! method ) {<br /> return methods.init.apply( this, arguments );<br />} else {<br /> $.error( 'Method ' + method + ' does not exist on jQuery.tooltip' );<br />}<br /> };<br />
  32. 32. Plugin Namespace 2/2<br />$('div').tooltip();<br />$('div').tooltip({ foo : 'bar' }); <br />$('div').tooltip('hide');<br />$('div').tooltip('update', 'Parametro');<br />Metodo ufficiale utilizzato dai Plugin per jQuery<br />
  33. 33. Siamo giunti alla fine..<br />Domande??Tutto chiaro??<br />
  34. 34. Alla prossima ragazzi!<br />Fabio Franzini<br />Consulente, Sviluppatore e Trainer<br />blog: www.fabiofranzini.com<br />email: fabio@fabiofranzini.com<br />twitter: @franzinifabio<br />

×