3. 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.”
5. Filosofia dietro a jQueryTrova qualcosa in qualche modoEsegui qualcosa su questoIl focus principale riguarda l’interazione fra JavaScript e HTML
6. jQuery è:Solo una funzione!jQuery(): funzione principale$(): Alias di jQuery()jQuery.noConflict()Se si utilizzano librerie diverse che hanno funzioni che si chiamano $
7. 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>var j = jQuery.noConflict(); // Do something with jQueryj("div p").hide(); // Do something with another library's $() $("content").style.display = 'none';<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>
9. SelettoriCSS 2 e CSS3a[rel]a[rel="friend"]a[href^="http://"]ul#nav > lili#current ~ li (li siblings that follow #current)li:first-child, li:last-child, li:nth-child(3)
10. Altri tipi di selettoridiv:first, h3:last:header:hidden, :visible:animated:input, :text, :password, :radio, :submit...div:contains(Hello)
11. Collezioni di oggetti$('div.section') ritorna una collezioni di oggetti jQuery$('div.section').lenght() = “num. dielementi”$('div.section').each(function() { console.log(this);});$('div.section')[0]$('div.section')[1]$('div.section')[2]
12. 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');//Alcunimetodiritornano I valori del primo risultatoottenutodalfiltro.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();
15. Gestire gli eventi// OnLoad della pagina$(document).ready(function() {alert('The DOM is ready!');});// OnLoad della pagina$(function() { alert('The DOM is ready!');});$('a:first').click(function(ev) {ev.preventDefault();$(this).css({backgroundColor: 'orange'});});.........$('a:first').click();
16. Concatenamento dei MetodiLa 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. $('div.section').hide().addClass('gone');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()
17. Ajax con jQueryjQuery 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)
21. 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.
29. 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);};
![SelettoriCSS 2 e CSS3a[rel]a[rel="friend"]a[href^="http://"]ul#nav > lili#current ~ li (li siblings that follow #current)li:first-child, li:last-child, li:nth-child(3)](https://image.slidesharecdn.com/wtc10itjquery-101210035356-phpapp02/85/Advanced-JQuery-9-320.jpg)
![Collezioni di oggetti$('div.section') ritorna una collezioni di oggetti jQuery$('div.section').lenght() = “num. dielementi”$('div.section').each(function() { console.log(this);});$('div.section')[0]$('div.section')[1]$('div.section')[2]](https://image.slidesharecdn.com/wtc10itjquery-101210035356-phpapp02/85/Advanced-JQuery-11-320.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' );} };](https://image.slidesharecdn.com/wtc10itjquery-101210035356-phpapp02/85/Advanced-JQuery-31-320.jpg)
