jQuery e i suoi plugin
•Download as PPTX, PDF•
0 likes•676 views
Una rassegna sul framework per lo sviluppo in Javascript jQuery ed alcuni suoi plugin sviluppati da Microsoft: Template e Datalink http://www.pasqualepuzio.it
![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=/slideshow/jquery-e-i-suoi-plugin/8127136/‘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 °¿±··¡â€™D·¡²Ñ°¿$(‘#»å±ð³¾´Ç’).²õ³ó´Ç·É()
- 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_siºÝºÝߣ e materiale del seminario:http://www.pasqualepuzio.it/seminari/jquery-bologna
- 30. RISORSE