jQuery e i suoi plugin
Download as PPTX, PDF0 likes679 views
Il documento descrive jQuery, una libreria open-source per JavaScript che semplifica la programmazione, migliorando la compatibilità tra diversi browser e utilizzando selettori CSS per manipolare il DOM. Vengono presentati vari metodi per gestire eventi, animazioni e AJAX, insieme alla facilità di utilizzo e integrazione di plugin. Infine, si offrono risorse per avviare lo sviluppo con jQuery, inclusi strumenti IDE consigliati.
![DOM & CSS (Selettori)$("#ID") // id $("div") // div tag name $('[name*="value"]') // name contains $('[name^="value"]') // name start $(".myCssClass") // css class name $("form input") // descendant(s) $("#main > div") // child(s) $("#main ~ div") // sibling(s) $("input[name='radio']:checked") // radio checked $("td:first-child a") //<a> in first td $("input:disabled") // disabled inputa[href^="http://"] // external links](https://image.slidesharecdn.com/jqueryeisuoiplugin-110527113530-phpapp01/85/jQuery-e-i-suoi-plugin-11-320.jpg)
![Ajax e Gestione degli eventi$(‘div#sidebar’).load(‘sidebar.php’);// metodi Ajax$.get(url, [data], callback);$.post(url, [data], callback);$.getJSON(url, params, callback);$.getScript(url, callback);](https://image.slidesharecdn.com/jqueryeisuoiplugin-110527113530-phpapp01/85/jQuery-e-i-suoi-plugin-15-320.jpg)
jQuery e i suoi plugin
- 1. jQuery e i suoi pluginPasquale Puzio26 Maggio 2011, Bologna
- 2. AgendaFondamenti di jQueryjQueryDOM & CSSAjax & GestionedeglieventiAnimazioniPluginRICH Internet (Web) ApplicationDEMO ‘All in one’
- 3. Fondamenti di jQueryjQuery è unalibreria/framework open-source per Javascriptconcepita per semplificarenotevolmente e cambiareradicalmenteilmodo di programmare in Javascript
- 4. Perché scegliere jQueryGRATISSemplicitàPiena compatibilità Cross-Browser:IE 6+, FireFox 2+, Safari 3+, Opera 9+, ChromeDocumentazioneCommunity di supportoQuantità enorme di pluginIntegrazione con i principali IDE tra cui Visual Studio
- 5. Perché scegliere jQueryPerché è meglio di questo:function assegnaXMLHttpRequest() {var XHR = null;browserUtente= navigator.userAgent.toUpperCase();If (typeof(XMLHttpRequest) === "function" || typeof(XMLHttpRequest) === "object") XHR = new XMLHttpRequest();else if( window.ActiveXObject&& browserUtente.indexOf("MSIE 4") < 0 ) {If (browserUtente.indexOf("MSIE 5") < 0) XHR = new ActiveXObject("Msxml2.XMLHTTP");else XHR = new ActiveXObject("Microsoft.XMLHTTP");}return XHR;}
- 9. Filosofia di jQueryPer accedere agli elementi del DOM si utilizzano i selettori CSSI selettori restituiscono un’istanza di jQuery sulla quale è possibile eseguire alcune azioni (manipolazione del DOM, CSS, gestione degli eventi, chiamate Ajax, ecc.)
- 10. Filosofia di jQueryFunzione principale: jQuery()Alias: $()SelezioneAzione
- 11. DOM & CSS (Selettori)$("#ID") // id $("div") // div tag name $('[name*="value"]') // name contains $('[name^="value"]') // name start $(".myCssClass") // css class name $("form input") // descendant(s) $("#main > div") // child(s) $("#main ~ div") // sibling(s) $("input[name='radio']:checked") // radio checked $("td:first-child a") //<a> in first td $("input:disabled") // disabled inputa[href^="http://"] // external links
- 12. DOM & CSS (Manipolazione DOM)$(‘div#content’).html(‘<p>Contenuto</p>’);$(‘div#content’).append(‘<a>Link</a>’);$(‘div#content’).addClass(‘red’);$(‘div#content’).toggleClass(‘yellow’);$(‘div#contenta’).attr(‘href’,’http://www.jquery.org’);$(‘div#contenta’).css(‘font-weight’,’bold’);$(‘div#content p’).parent();$(‘div#content p’).after();$(‘div#contenta’).before();
- 13. DOM & CSSDEMO
- 14. Ajax e Gestione degli eventi$(document).ready(function() {alert(‘DOM is ready!’);});$(‘a#button’).click(function() { $(this).css(‘color’,’green’);});
- 15. Ajax e Gestione degli eventi$(‘div#sidebar’).load(‘sidebar.php’);// metodi Ajax$.get(url, [data], callback);$.post(url, [data], callback);$.getJSON(url, params, callback);$.getScript(url, callback);
- 16. Ajax e Gestione degli eventiDEMO
- 18. AnimazioniDEMO
- 19. PluginInnumerevoli plugin per qualsiasi esigenzaAnimazioni (slideshow, carousel, ecc.)User InterfaceRich Internet (Web) ApplicationE’ facile sviluppare un pluginE’ facile utilizzare un plugin<script src=‘jquery.js’ type=‘text/javascript’></script><script src=‘myplugin.js’ type=‘text/javascript’></script>
- 20. Plugin (Template)Sviluppato da MicrosoftPermette a partire da strutture dati Javascript di generare codice HTML mediante l’uso di Template
- 22. jQuery (Data Link)Anch’esso sviluppato da MicrosoftPermette di creare un bind tra gli elementi di un form e un oggetto Javascript
- 24. DEMO ‘ALL IN ONE’DEMO$(‘#demo’).show()
- 26. Per iniziarea sviluppareVisual Studio Express 2010 o Visual Studio 2010 Professional (MSDN Academic Alliance): http://www.microsoft.com/express/Web/Eclipse + plugin Aptana: http://www.aptana.com/
- 28. RiferimentijQuery (UI):http://www.jquery.com http://www.jqueryui.comMSDN Academic Alliance Unibo:http://msdn60.e-academy.com/elms/Storefront/Home.aspx?campus=dsdi_siSlide e materiale del seminario:http://www.pasqualepuzio.it/seminari/jquery-bologna
- 30. RISORSE