jquery from the ground up
DESCRIPTION
TRANSCRIPT
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: [email protected]
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
