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.

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: kevin@kevgriffin.com

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!

19. DemoSetting up jQuery

21. Setting Up jQuery

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

30. Questions?http://www.kevgriffin.comTwitter: 1kevgriffEmail: kevin@kevgriffin.com