jQuery From the Ground Up
Upcoming SlideShare
Loading in...5
×
 

jQuery From the Ground Up

on

  • 2,346 views

 

Statistics

Views

Total Views
2,346
Views on SlideShare
2,162
Embed Views
184

Actions

Likes
0
Downloads
31
Comments
0

2 Embeds 184

http://www.kevgriffin.com 181
http://www.linkedin.com 3

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

jQuery From the Ground Up jQuery From the Ground Up Presentation Transcript

  • 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!
    View slide
  • Before We Begin
    You’re not tied to your chair
    Code camps are about getting the best experience possible
    Questions
    Ask them, anytime.
    View slide
  • 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