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?
Who Use’s jQuery? Google Netflix Dell Bank of America Major League Baseball Digg NBC CBS
Browser Compatibility Internet Explorer 6.0+ Firefox 2.0 + Safari 3.0+ Opera 9.0+ Chrome
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
VS2008 Intellisense http://docs.jquery.com/Downloading_jQuery Add the *-vsdoc.js file to your solution Enjoy full jQueryIntellisense!
Demo Setting up jQuery
Setting Up jQuery
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.
Demo jQuery UI
3rd Party Plugins Hundreds of plugins available Don’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