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

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
2,422
On Slideshare
2,238
From Embeds
184
Number of Embeds
2

Actions

Shares
Downloads
31
Comments
0
Likes
0

Embeds 184

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

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. jQuery From The Ground Up
    Kevin Griffin
  • 2. 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
  • 3. 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!
  • 4. Before We Begin
    You’re not tied to your chair
    Code camps are about getting the best experience possible
    Questions
    Ask them, anytime.
  • 5. Agenda
    What Is jQuery
    Getting jQuery
    Setting Up jQuery
    Using jQuery
    jQuery UI
    Plugins
    Demos! Demos! Demos!
  • 6. What Is jQuery?
    JavaScript library
    Powerful document traversal
    Event handling
    Animations
    AJAX
    Makes JavaScript not SUCK!
  • 7. Document Transversal?
    Where do elements exist on the page?
    How quickly can we access them?
  • 8.
  • 9.
  • 10. Who Use’s jQuery?
    Google
    Netflix
    Dell
    Bank of America
    Major League Baseball
    Digg
    NBC
    CBS
  • 11. Browser Compatibility
    Internet Explorer 6.0+
    Firefox 2.0 +
    Safari 3.0+
    Opera 9.0+
    Chrome
  • 12. Getting jQuery
  • 13. Production vs. Development
    Production
    Minified
    Quick to download
    Impossible to read and debug
    Development
    Commented
    Formatted
    Large file
  • 14. 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.
  • 15. 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
  • 16.
  • 17.
  • 18. VS2008 Intellisense
    http://docs.jquery.com/Downloading_jQuery
    Add the *-vsdoc.js file to your solution
    Enjoy full jQueryIntellisense!
  • 19. Demo
    Setting up jQuery
  • 20.
  • 21. Setting Up jQuery
  • 22. jQuery Syntax
    $(selector).function()
    $ or jQuery
    jQuery object
    selector
    reference to an element on the page
    Function
    Any jQuery supported method or plugin.
  • 23. 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.
  • 24. Demo
    Selectors
  • 25. $(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.
  • 26. Demo
    A Better Contact Form: Putting jQuery to Work
  • 27. jQuery UI
    http://jqueryui.com/
    Several comment UI widgets and visual effects.
    Compatible with several browsers, including IE 6.0.
  • 28. Demo
    jQuery UI
  • 29. 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
  • 30. Questions?
    http://www.kevgriffin.com
    Twitter: 1kevgriff
    Email: kevin@kevgriffin.com