jQuery From the Ground Up

jQuery From The Ground Up
Kevin Griffin

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

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!

What Is jQuery?
JavaScript library
Powerful document traversal
Event handling
Animations
AJAX
Makes JavaScript not SUCK!

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

Getting jQuery

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.

Demo
Selectors

$(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

Questions?
http://www.kevgriffin.com
Twitter: 1kevgriff
Email: kevin@kevgriffin.com

jQuery From the Ground Up

by Kevin Griffin on Jun 22, 2010

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 156

Statistics

jQuery From the Ground Up — Presentation Transcript