About Me Kevin Griffin Chesapeake, VA ASPInsider INETA Mentor for Virginia Leader of the Hampton Roads .NET Users Group http://www.kevgriffin.com Twitter: 1kevgriff Email: firstname.lastname@example.org
Mid-Atlantic Developer’s Group http://midatlanticdevs.groups.live.com Mailing list for developers based in the Mid-Atlantic region Keep up to date with what’s going on outside your group Ask questions Post jobs Network!
Before We Begin You’re not tied to your chair Code camps are about getting the best experience possible Questions Ask them, anytime.
Agenda What Is jQuery Getting jQuery Setting Up jQuery Using jQuery jQuery UI Plugins Demos! Demos! Demos!
Document Transversal? Where do elements exist on the page? How quickly can we access them?
Production vs. Development Production Minified Quick to download Impossible to read and debug Development Commented Formatted Large file
Deployment Tips Don’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.
A note about jQuery documentation It’s awesome! http://docs.jquery.com Easy to navigate and search Examples on every topic Tutorials, references, and FAQs
jQuery Syntax $(selector).function() $ or jQuery jQuery object selector reference to an element on the page Function Any jQuery supported method or plugin.
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.
$(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.
Demo A Better Contact Form: Putting jQuery to Work
jQuery UI http://jqueryui.com/ Several comment UI widgets and visual effects. Compatible with several browsers, including IE 6.0.