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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

jQuery From the Ground Up

1,838
views

Published on

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,838
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
32
Comments
0
Likes
0
Embeds 0
No embeds

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