jQuery From the Ground Up
Download as PPTX, PDF0 likes1,270 views
This document summarizes a presentation on jQuery from the ground up. It introduces jQuery as a JavaScript library for document traversal, event handling, animations and AJAX. It discusses how to get jQuery, set it up, use basic selectors and the ready method. It also provides an overview of jQuery UI and plugins, and invites questions.
jQuery From the Ground Up
- 1. jQuery From The Ground UpKevin Griffin
- 2. About MeKevin GriffinChesapeake, VAASPInsiderINETA Mentor for VirginiaLeader of the Hampton Roads .NET Users Grouphttp://www.kevgriffin.comTwitter: 1kevgriffEmail: [email protected]
- 3. Mid-Atlantic Developer’s Grouphttp://midatlanticdevs.groups.live.comMailing list for developers based in the Mid-Atlantic regionKeep up to date with what’s going on outside your groupAsk questionsPost jobsNetwork!
- 4. Before We BeginYou’re not tied to your chairCode camps are about getting the best experience possibleQuestionsAsk them, anytime.
- 5. AgendaWhat Is jQueryGetting jQuerySetting Up jQueryUsing jQueryjQuery UIPluginsDemos! Demos! Demos!
- 6. What Is jQuery?JavaScript libraryPowerful document traversalEvent handlingAnimationsAJAXMakes JavaScript not SUCK!
- 7. Document Transversal?Where do elements exist on the page?How quickly can we access them?
- 10. Who Use’s jQuery?GoogleNetflixDellBank of AmericaMajor League BaseballDiggNBCCBS
- 11. Browser CompatibilityInternet Explorer 6.0+Firefox 2.0 +Safari 3.0+Opera 9.0+Chrome
- 12. Getting jQuery
- 13. Production vs. DevelopmentProductionMinifiedQuick to downloadImpossible to read and debugDevelopmentCommentedFormattedLarge file
- 14. Deployment TipsDon’t host jQuery yourself!http://code.google.com/apis/ajaxlibs/documentation/Numerous website use the Google version.Possibly already cached on a person’s machine.Both production and development versions are available.
- 15. A note about jQuery documentationIt’s awesome!http://docs.jquery.comEasy to navigate and searchExamples on every topicTutorials, references, and FAQs
- 18. VS2008 Intellisensehttp://docs.jquery.com/Downloading_jQueryAdd the *-vsdoc.js file to your solutionEnjoy full jQueryIntellisense!
- 22. jQuery Syntax$(selector).function()$ or jQueryjQuery objectselectorreference to an element on the pageFunctionAny jQuery supported method or plugin.
- 23. What is a selector?Think CSS!jQuery has a built in DOM transversal engine.$(selector) returns a list of elements on the page that match the “selector”.Example: $(“input”) will return a list of ALL input elements on the page.
- 24. DemoSelectors
- 25. $(document).ready()Fixes problems based on window.onload as a way of handling events when page is loaded.Window.onload fires only after all HTML and images have been downloaded.$(document).ready() fires as soon as all markup has been downloaded.
- 26. DemoA Better Contact Form: Putting jQuery to Work
- 27. jQuery UIhttp://jqueryui.com/Several comment UI widgets and visual effects.Compatible with several browsers, including IE 6.0.
- 28. DemojQuery UI
- 29. 3rd Party PluginsHundreds of plugins availableDon’t re-invent the wheel!AJAX, Animation, Effects, Browser Tweaks, Drag and Drop, Forms, Layouts, Media, Menus, Navigation, Tables, UI, Widgets, etc…http://plugins.jquery.com