jQuery Ecosystem
•Download as PPTX, PDF•
2 likes•653 views
This document discusses jQuery, a popular JavaScript library. It provides an overview of jQuery, describing how it works, its main features like DOM manipulation and AJAX capabilities. It also discusses jQuery UI and several tools for testing jQuery code, including QUnit, jQuery Lint and TestSwarm. The presentation concludes by mentioning an upcoming demo on performance analysis and a future spot on additional related technologies.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to jQuery Ecosystem
Similar to jQuery Ecosystem (20)
More from Andrea Balducci
More from Andrea Balducci (17)
Recently uploaded
Recently uploaded (20)
jQuery Ecosystem
- 1. andreabalducci {ecosystem} V UGI ALT.NetConference Milano :: 23 Gennaio 2010
- 2. andreabalducci Chi è costui? Andrea Balducci Job: Sviluppatore per passione (da un quarto di secolo…) Mercato: Applicazioni client / server in c++ per la PMI Asp.Net: Catasto Termico, MES http://www.dotnetmarche.org/blogs/andreabalducci mtb.snowboard@gmail.com
- 3. Agenda jQuery intro jQuery UI QUnit jQuery Lint TestSwarm Profiling
- 4. jQuery jQuery è unalibreria JavaScript http://www.gracesmith.co.uk/86-jquery-resources-to-spice-up-your-website/
- 5. jQuery Creatada John Resignel 2006 http://ejohn.org
- 6. jQuery
- 7. jQuery
- 8. jQuery jQuery è presente nel 37% dei siti web che utilizzano Javascript http://trends.builtwith.com/javascript
- 10. jQuery Cross browser Suite di 3060 test (Safari 3.2, Safari 4, Firefox 2, Firefox 3, Firefox 3.5, IE 6, IE 7, IE 8, Opera 10.10 and Chrome).50 browser su 11 piattaforme. Modello ad eventi .click() .mouseenter() .keydown() etc.. Leggera Solo 23kb per la versione minified (gzipped).Disponibile sulle CDN Google e Microsoft
- 11. jQuery Centinaia di plug-in già pronti Forms, validation, autocomplete, grid, jQuery.UI, gameshttp://plugins.jquery.com/ Documentata http://api.jquery.com/<method>http://forum.jquery.com/ Visual jQuery http://visualjquery.com/ Deliciousbookmarks 1.123k+ http://delicious.com/tag/jquery
- 12. jQuery Google ha 12.900.000 risultati per il termine “jQuery” 10 volte più famosa della D’Addario e del Lettone di Putin
- 13. Come funziona? $(document).ready(function() { $(‘li’).css(‘color’, ‘red’); )};
- 14. Come funziona? $(document).ready(function() { $(‘li’).css(‘color’, ‘red’); )}; jQuery
- 15. Come funziona? $(document).ready(function() { $(‘li’).css(‘color’, ‘red’); )}; jQuery findthings
- 16. Come funziona? $(document).ready(function() { $(‘li’).css(‘color’, ‘red’); )}; jQuery findthings do stuff
- 17. Categorie Selettori Eventi Manipolazione del DOM Ajax Data Navigazione del DOM
- 18. jQuery(document).ready(..); L’entry point di jQuery Vieneeseguitoappenail DOM è completo e prima cheilcontenutodellapaginasiacaricato. E’ possibileregistrarel’evento $(document).ready() più volte Versionebreve: $(..);
- 19. Selettori Attribute :: Basic :: Basic Filter :: Child Filter :: Content FilterForm :: Hierarchy:: Visibility Filter Live test: http://codylindley.com/jqueryselectors/ http://api.jquery.com/category/selectors/
- 20. Eventi jQuery introduce il modello ad eventi in modo non intrusivo; il binding degli eventi avviene fuori dal markup dell’elemento. <html> <head><title>Modello ad eventi - click</title> <script src="jquery-1.4.min.js" type="text/javascript"> </script> <script type="text/javascript"> $(document).ready(function() { $('#clickme').click(function(){ $(this).remove(); }); }); </script> </head> <body> <a id="clickme" href="#">click me</a> </body> </html> http://api.jquery.com/category/events/
- 21. Manipolazione DOM Attributi $(‘.clickMe’).addClass(‘clicked’); $(‘.clickMe’).attr(‘id’, ‘theone’); Struttura $(‘<div>’) $(‘.clickMe’).remove(); $(‘.clickMe’).clone(); $(‘<div>’).appendTo($(‘#box’)); Stile $(‘.clickMe’).css(‘color’, ‘red’); Lettura / scrittura $(‘#title’).text(‘jQuery @Ugi.Alt’); var title = $(‘#title’).text(); http://api.jquery.com/category/manipulation/
- 22. $.ajax() Low level jQuery.ajax( settings ) // http://api.jquery.com/jQuery.ajax/ ShorthandMethods jQuery.get() esegue una richiesta tramite HTTP GET jQuery.getJSON() esegue una richiesta di dati in formato JSON tramite HTTP GET jQuery.getScript() carica uno script tramite una GET e lo esegue .load() esegue la richiesta al server e inserire la risposta nell’elemento jQuery.post() esegue la richiesta tramite una POST http://api.jquery.com/category/ajax/
- 23. .data() .data() permette di associare dei valori agli elementi del DOM senza sporcare il markup. .data(key, value) $(‘#contact-1’).data(‘name’, ‘Andrea’); $(‘#contact-1’).data(‘age’, 35); .data(key) varname = $(‘#contact-1’).data(‘name’); .data() varcontact = $(‘#contact-1’).data(); // { name: ‘Andrea’, age: 35} http://api.jquery.com/data/
- 25. Navigazione del DOM .add() .andSelf() .children() .closest() .contents() .end() .eq() .filter() .find() .first() .has() .is() .last() .map() .next() .nextAll() .nextUntil() .not() .offsetParent() .parent() .parents() .parentsUntil() .prev() .prevAll() .prevUntil() .siblings() .slice() http://api.jquery.com/category/traversing/
- 27. “jQuery UI provides a comprehensive set ofcoreinteraction plugins, UI widgets and visualeffectsthatuse a jQuery-style, event-drivenarchitecture and a focus on web standards, accessiblity, flexible styling, and user-friendly design.All plugins are testedforcompatibility in IE 6.0+, FF 2+, Safari 3.1+, Opera 9.0+, and Google Chrome.”
- 28. In fase di rilascio la versione 1.8
- 29. Interactions Draggable Droppable Resizable Selectable Sortable Widgets Accordion Autocomplete Button Datepicker Dialog Progressbar Slider Tabs Effects Addclass Removeclass Switchclass Toggleclass Show Hide Toggle Animate Effect Roadmap su http://wiki.jqueryui.com/
- 30. {demo}
- 31. Case Study – Catasto termico SostiuzionediAsp.Net AJAX Control Toolkit Aumentatal’interattivitàlato client Dimezzatoil peso dellepagine
- 33. ThemeRoller ThemeRoller permette di configurare a proprio piacimento i temi di jQuery.ui jQuery.UI = js + css http://jqueryui.com/themeroller/
- 34. QUnit “QUnit is a powerful, easy-to-use, JavaScript test suite. It's used by the jQuery project to test its code and plugins but is capable of testing any generic JavaScript code” http://docs.jquery.com/QUnit
- 36. jQuery.Lint “jQuery Lint is a simple script you can download and use with jQuery. It works over the top of jQuery and diligently reports errors and any incorrect usage of jQuery. It will also, to some extent, offer guidance on best practices and performance concerns”. http://github.com/jamespadolsey/jQuery-Lint
- 38. TestSwarm “The primary goal of TestSwarm is to take the complicated, and time-consuming, process of running JavaScript test suites in multiple browsers and to grossly simplify it. It achieves this goal by providing all the tools necessary for creating a continuous integration workflow for your JavaScript project.” http://testswarm.com/
- 39. I Want U
- 40. Performance Analysis {demo} http://developer.yahoo.com/yui/theater/video.php?v=resig-testing
- 41. {spot :: comingsoon} Dexter, jQuery, Castle Windsor, Asp.Net MVC, NHibernate & co…