jQuery Introduction
1 like1,592 views
The document introduces the jQuery library, which is a popular JavaScript library that simplifies tasks like HTML document traversal, event handling, animating, and Ajax interactions. It notes that over 20% of websites use jQuery and outlines some of its main capabilities like selecting elements, hiding/showing elements, and loading remote HTML. Alternatives to jQuery are mentioned but it is positioned as standing alone in popularity based on Google search volumes.
jQuery Introduction
- 1. “The Write Less Do More” Javascript Library Arwid Bancewicz //arwid.ca March 2nd 2010 for ECE450H1S, University of Toronto
- 2. Introduction Learning jQuery Demo Alternatives Resources
- 3. Motivation Introduction Learning jQuery Demo Alternatives Resources JAVASCRIPT ISN’T EASY... “Most of the people writing in Javascript are not programmers” - Douglas Crockford “Programmers who attempt to use JavaScript for non-trivial tasks often find the process frustrating if they do not have a solid understanding of the language.” - David Flanagan
- 4. Motivation Introduction Learning jQuery Demo Alternatives Resources ...SO, MANY USE JQUERY 20% of all sites on the Internet use it * * from Sept 2009 jQuery Conference
- 5. Motivation Introduction Learning jQuery Demo Alternatives Resources WELL THEN, WHAT IS IT? A compact, easy to use Javascript library that simplifies... • HTML document traversing • Event handling to create Dynamic Content • Animating But, what Special Effects can Tabs all Calendars we DO withAuto-complete Drop Down Form Validation Menus this ??? • Ajax interactions Sorting Tables Dialogs It works on your browser... IE6+, FF 2+, Safari 3.0+, Opera 9.0+, Chrome
- 6. Motivation Introduction Learning jQuery Demo Alternatives Resources TO USE OR NOT TO USE... ...the tell tail signs that we should Licensing • MIT Licensed Resources • Numerous books / publications, conferences, well documented Lifespan • Corporate Adoption • Large Community (forums, plugins)
- 7. Learning jQuery $
- 8. Motivation Introduction Learning jQuery Demo Alternatives Resources THE BASICS Add jQuery to your code * Wait for HTML “document” to finish loading without jQuery with jQuery now or * see http://docs.jquery.com/Downloading_jQuery
- 9. Motivation Introduction Learning jQuery Demo Alternatives Resources SELECTING ELEMENTS What can you select? without jQuery with jQuery now “The DOM is a Mess” * CS3 compliant * Different across browsers What can you do? ➡ Hide/Show, Change html, Change attributes, Animate
- 10. Motivation Introduction Learning jQuery Demo Alternatives Resources DOING SOMETHING Hide/show/animate elements with jQuery * similarly for slideDown, fadeIn, fadeOut, fadeTo Add/Remove an HTML class CSS with jQuery * CS3 compliant more at http://api.jquery.com
- 11. Motivation Introduction Learning jQuery Demo Alternatives Resources PLAYING WITH CONTENT AJAX Load html from a remote url and inject it into DOM eg other ways... * type can be one of xml, html, script, json, jsonp or text eg
- 12. “Show Me the $”... The Demo
- 13. Motivation Introduction Learning jQuery Demo Alternatives Resources WAIT A SEC... DO WE EVEN NEED A DEMO? Dilbert doesn’t think so.
- 15. Motivation Introduction Learning jQuery Demo Alternatives Resources IT’S NOT ALONE... hundreds of Javascript frameworks available * * see http://en.wikipedia.org/wiki/List_of_Ajax_frameworks
- 16. Motivation Introduction Learning jQuery Demo Alternatives Resources ...YET, IT STANDS ALONE *based on google search results jQuery 14,200,000 Dojo 7,200,000 Mootools 2,100,000 GWT EXT-JS 3,860,000 1,210,000
- 17. Motivation Introduction Learning jQuery Demo Alternatives Resources WANT TO GET STARTED? Start at jQuery.com • Docs http://docs.jquery.com • Widgets http://jqueryui.com • Tutorials http://docs.jquery.com/Tutorials Other Notables • Javascript Playgrounds • http://jsbin.com • http://code.google.com/apis/ajax/playground (Refer to http://code.google.com/apis/ajaxlibs/) • Plugins • Star Ratings http://plugins.learningjquery.com/half-star-rating • Photo Gallery http://www.twospy.com/galleriffic/index.html • More @ http://plugins.jquery.com • Tutorials • Blog http://www.learningjquery.com • Form Validation http://yensdesign.com/2009/01/how-validate-forms-both-sides-using-php-jquery/