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