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

Más contenido relacionado

La actualidad más candente

Tworzenie wtyczek dla TinyMCE 4.* - WordUp Kraków
Tworzenie wtyczek dla TinyMCE 4.* - WordUp KrakówTworzenie wtyczek dla TinyMCE 4.* - WordUp Kraków
Tworzenie wtyczek dla TinyMCE 4.* - WordUp KrakówTomasz Dziuda
 
Drupal Theming Hans Rossel
Drupal Theming Hans RosselDrupal Theming Hans Rossel
Drupal Theming Hans RosselHans Rossel
 
jQuery & jQuery Mobile
jQuery & jQuery MobilejQuery & jQuery Mobile
jQuery & jQuery MobileMohammad Raju
 
Curso Symfony - Clase 5
Curso Symfony - Clase 5Curso Symfony - Clase 5
Curso Symfony - Clase 5Javier Eguiluz
 
Introdução ext js 4
Introdução ext js 4Introdução ext js 4
Introdução ext js 4Bruno Tavares
 
Як досвід компанії перетворився на фреймворк
Як досвід компанії перетворився на фреймворкЯк досвід компанії перетворився на фреймворк
Як досвід компанії перетворився на фреймворкShtrih Sruleg
 
スマホウェブの本命 jQueryMobile
スマホウェブの本命 jQueryMobileスマホウェブの本命 jQueryMobile
スマホウェブの本命 jQueryMobileManabu Uekusa
 
WordPress Customizer
WordPress CustomizerWordPress Customizer
WordPress Customizerslicejack
 
Pianist and composer Jeff Kowalkowski releases strong new trio album
Pianist and composer Jeff Kowalkowski releases strong new trio albumPianist and composer Jeff Kowalkowski releases strong new trio album
Pianist and composer Jeff Kowalkowski releases strong new trio albumirwinvifxcfesre
 
jQuery - Javascript para quem não sabe Javascript
jQuery - Javascript para quem não sabe JavascriptjQuery - Javascript para quem não sabe Javascript
jQuery - Javascript para quem não sabe JavascriptNando Vieira
 
Javascript and jQuery for Mobile
Javascript and jQuery for MobileJavascript and jQuery for Mobile
Javascript and jQuery for MobileIvano Malavolta
 

La actualidad más candente (20)

Introducción a Bolt
Introducción a BoltIntroducción a Bolt
Introducción a Bolt
 
Tworzenie wtyczek dla TinyMCE 4.* - WordUp Kraków
Tworzenie wtyczek dla TinyMCE 4.* - WordUp KrakówTworzenie wtyczek dla TinyMCE 4.* - WordUp Kraków
Tworzenie wtyczek dla TinyMCE 4.* - WordUp Kraków
 
Silex al límite
Silex al límiteSilex al límite
Silex al límite
 
Drupal Theming Hans Rossel
Drupal Theming Hans RosselDrupal Theming Hans Rossel
Drupal Theming Hans Rossel
 
Ajax With Yui
Ajax With YuiAjax With Yui
Ajax With Yui
 
jQuery & jQuery Mobile
jQuery & jQuery MobilejQuery & jQuery Mobile
jQuery & jQuery Mobile
 
Wek14 mysql 2
Wek14 mysql 2Wek14 mysql 2
Wek14 mysql 2
 
Curso Symfony - Clase 5
Curso Symfony - Clase 5Curso Symfony - Clase 5
Curso Symfony - Clase 5
 
Jquery ui, ajax
Jquery ui, ajaxJquery ui, ajax
Jquery ui, ajax
 
Add tag shortcode
Add tag shortcodeAdd tag shortcode
Add tag shortcode
 
SmartCSS
SmartCSSSmartCSS
SmartCSS
 
Introdução ext js 4
Introdução ext js 4Introdução ext js 4
Introdução ext js 4
 
Як досвід компанії перетворився на фреймворк
Як досвід компанії перетворився на фреймворкЯк досвід компанії перетворився на фреймворк
Як досвід компанії перетворився на фреймворк
 
スマホウェブの本命 jQueryMobile
スマホウェブの本命 jQueryMobileスマホウェブの本命 jQueryMobile
スマホウェブの本命 jQueryMobile
 
WordPress Customizer
WordPress CustomizerWordPress Customizer
WordPress Customizer
 
Poetry in the age of hip-hop
Poetry in the age of hip-hopPoetry in the age of hip-hop
Poetry in the age of hip-hop
 
Pianist and composer Jeff Kowalkowski releases strong new trio album
Pianist and composer Jeff Kowalkowski releases strong new trio albumPianist and composer Jeff Kowalkowski releases strong new trio album
Pianist and composer Jeff Kowalkowski releases strong new trio album
 
jQuery - Javascript para quem não sabe Javascript
jQuery - Javascript para quem não sabe JavascriptjQuery - Javascript para quem não sabe Javascript
jQuery - Javascript para quem não sabe Javascript
 
Javascript and jQuery for Mobile
Javascript and jQuery for MobileJavascript and jQuery for Mobile
Javascript and jQuery for Mobile
 
Jquery2
Jquery2Jquery2
Jquery2
 

Destacado

Simple Cloud API: accesso semplificato al cloud computing
Simple Cloud API: accesso semplificato al cloud computingSimple Cloud API: accesso semplificato al cloud computing
Simple Cloud API: accesso semplificato al cloud computingFrancesca1980
 
Loosely Coupled Complexity - Unleash the power of your domain model
Loosely Coupled Complexity - Unleash the power of your domain modelLoosely Coupled Complexity - Unleash the power of your domain model
Loosely Coupled Complexity - Unleash the power of your domain modelFrancesca1980
 
Michelle Hathaway Mastery Timeline
Michelle Hathaway Mastery TimelineMichelle Hathaway Mastery Timeline
Michelle Hathaway Mastery TimelineMichelle Hathaway
 
Photo presentation
Photo presentationPhoto presentation
Photo presentationKalliopi1
 

Destacado (6)

Simple Cloud API: accesso semplificato al cloud computing
Simple Cloud API: accesso semplificato al cloud computingSimple Cloud API: accesso semplificato al cloud computing
Simple Cloud API: accesso semplificato al cloud computing
 
Loosely Coupled Complexity - Unleash the power of your domain model
Loosely Coupled Complexity - Unleash the power of your domain modelLoosely Coupled Complexity - Unleash the power of your domain model
Loosely Coupled Complexity - Unleash the power of your domain model
 
Java scriptpatterns
Java scriptpatternsJava scriptpatterns
Java scriptpatterns
 
Michelle Hathaway Mastery Timeline
Michelle Hathaway Mastery TimelineMichelle Hathaway Mastery Timeline
Michelle Hathaway Mastery Timeline
 
Finggggg
FingggggFinggggg
Finggggg
 
Photo presentation
Photo presentationPhoto presentation
Photo presentation
 

Más de Francesca1980

Event driven javascript
Event driven javascriptEvent driven javascript
Event driven javascriptFrancesca1980
 
Event driven javascript
Event driven javascriptEvent driven javascript
Event driven javascriptFrancesca1980
 
PhoneGap ovvero lo Sviluppo Mobile Nativo con HTML, CSS e JavaScript
PhoneGap ovvero lo Sviluppo Mobile Nativo con HTML, CSS e JavaScriptPhoneGap ovvero lo Sviluppo Mobile Nativo con HTML, CSS e JavaScript
PhoneGap ovvero lo Sviluppo Mobile Nativo con HTML, CSS e JavaScriptFrancesca1980
 
Writing cool web 2.0 apps with GWT and UI Bindings
Writing cool web 2.0 apps with GWT and UI BindingsWriting cool web 2.0 apps with GWT and UI Bindings
Writing cool web 2.0 apps with GWT and UI BindingsFrancesca1980
 
Programmazione web libera dai framework
Programmazione web libera dai frameworkProgrammazione web libera dai framework
Programmazione web libera dai frameworkFrancesca1980
 

Más de Francesca1980 (7)

Map meshup
Map meshupMap meshup
Map meshup
 
Java scriptpatterns
Java scriptpatternsJava scriptpatterns
Java scriptpatterns
 
Event driven javascript
Event driven javascriptEvent driven javascript
Event driven javascript
 
Event driven javascript
Event driven javascriptEvent driven javascript
Event driven javascript
 
PhoneGap ovvero lo Sviluppo Mobile Nativo con HTML, CSS e JavaScript
PhoneGap ovvero lo Sviluppo Mobile Nativo con HTML, CSS e JavaScriptPhoneGap ovvero lo Sviluppo Mobile Nativo con HTML, CSS e JavaScript
PhoneGap ovvero lo Sviluppo Mobile Nativo con HTML, CSS e JavaScript
 
Writing cool web 2.0 apps with GWT and UI Bindings
Writing cool web 2.0 apps with GWT and UI BindingsWriting cool web 2.0 apps with GWT and UI Bindings
Writing cool web 2.0 apps with GWT and UI Bindings
 
Programmazione web libera dai framework
Programmazione web libera dai frameworkProgrammazione web libera dai framework
Programmazione web libera dai framework
 

Advanced JQuery

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.