jQuery From The Ground UpKevin Griffin

About Me

0Kevin Griffin0Chesapeake, VA0ASPInsider0 INETA Mentor for Virginia0Leader of the Hampton Roads .NET Users Group

0http://www.kevgriffin.com0Twitter: 1kevgriff0Email: kevin@kevgriffin.com

Mid-Atlantic Developer’s Group

0http://midatlanticdevs.groups.live.com0Mailing list for developers based in the Mid-Atlantic

region0Keep up to date with what’s going on outside your

group0Ask questions0Post jobs0Network!

Before We Begin

0You’re not tied to your chair0 Code camps are about getting the best experience

possible0Questions

0 Ask them, anytime.

Agenda

0What Is jQuery0Getting jQuery0Setting Up jQuery0Using jQuery0 jQuery UI0Plugins0Demos! Demos! Demos!

What Is jQuery?

0 JavaScript library0Powerful document traversal0Event handling0Animations0AJAX0Makes JavaScript not SUCK!

Document Transversal?

0Where do elements exist on the page?0How quickly can we access them?

Who Use’s jQuery?

0Google0Netflix0Dell0Bank of America0Major League Baseball0Digg0NBC0CBS

Browser Compatibility

0 Internet Explorer 6.0+0Firefox 2.0 +0Safari 3.0+0Opera 9.0+0Chrome

Getting jQuery

Production vs. Development

0Production0 Minified0 Quick to download0 Impossible to read and debug

0Development0 Commented0 Formatted0 Large file

Deployment Tips

0Don’t host jQuery yourself!0 http://code.google.com/apis/ajaxlibs/documentation/

0 Numerous website use the Google version.0 Possibly already cached on a person’s machine.0 Both production and development versions are

available.

A note about jQuery documentation

0 It’s awesome!0http://docs.jquery.com0Easy to navigate and search0Examples on every topic0Tutorials, references, and FAQs

VS2008 Intellisense

0http://docs.jquery.com/Downloading_jQuery0Add the *-vsdoc.js file to your solution0Enjoy full jQuery Intellisense!

DemoSetting up jQuery

Setting Up jQuery

jQuery Syntax

0$(selector).function()0$ or jQuery

0 jQuery object0 selector

0 reference to an element on the page0Function

0 Any jQuery supported method or plugin.

What is a selector?

0Think CSS!0 jQuery has a built in DOM transversal engine.0$(selector) returns a list of elements on the page that

match the “selector”.0Example: $(“input”) will return a list of ALL input

elements on the page.

DemoSelectors

$(document).ready()

0Fixes problems based on window.onload as a way of handling events when page is loaded.

0Window.onload fires only after all HTML and images have been downloaded.

0$(document).ready() fires as soon as all markup has been downloaded.

DemoA Better Contact Form: Putting jQuery to Work

jQuery UI

0http://jqueryui.com/0Several comment UI widgets and visual effects.0Compatible with several browsers, including IE 6.0.

DemojQuery UI

3rd Party Plugins

0Hundreds of plugins available0Don’t re-invent the wheel!0AJAX, Animation, Effects, Browser Tweaks, Drag and

Drop, Forms, Layouts, Media, Menus, Navigation, Tables, UI, Widgets, etc…

0http://plugins.jquery.com

Questions?

0http://www.kevgriffin.com0Twitter: 1kevgriff0Email: kevin@kevgriffin.com