jQuery From the Ground Up


Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

jQuery From the Ground Up

  1. 1. jQuery From The Ground Up<br />Kevin Griffin<br />
  2. 2. About Me<br />Kevin Griffin<br />Chesapeake, VA<br />ASPInsider<br />INETA Mentor for Virginia<br />Leader of the Hampton Roads .NET Users Group<br />http://www.kevgriffin.com<br />Twitter: 1kevgriff<br />Email: kevin@kevgriffin.com<br />
  3. 3. Mid-Atlantic Developer’s Group<br />http://midatlanticdevs.groups.live.com<br />Mailing list for developers based in the Mid-Atlantic region<br />Keep up to date with what’s going on outside your group<br />Ask questions<br />Post jobs<br />Network!<br />
  4. 4. Before We Begin<br />You’re not tied to your chair<br />Code camps are about getting the best experience possible<br />Questions<br />Ask them, anytime.<br />
  5. 5. Agenda<br />What Is jQuery<br />Getting jQuery<br />Setting Up jQuery<br />Using jQuery<br />jQuery UI<br />Plugins<br />Demos! Demos! Demos!<br />
  6. 6. What Is jQuery?<br />JavaScript library<br />Powerful document traversal<br />Event handling<br />Animations<br />AJAX<br />Makes JavaScript not SUCK!<br />
  7. 7. Document Transversal?<br />Where do elements exist on the page?<br />How quickly can we access them?<br />
  8. 8.
  9. 9.
  10. 10. Who Use’s jQuery?<br />Google<br />Netflix<br />Dell<br />Bank of America<br />Major League Baseball<br />Digg<br />NBC<br />CBS<br />
  11. 11. Browser Compatibility<br />Internet Explorer 6.0+<br />Firefox 2.0 +<br />Safari 3.0+<br />Opera 9.0+<br />Chrome<br />
  12. 12. Getting jQuery<br />
  13. 13. Production vs. Development<br />Production<br />Minified<br />Quick to download<br />Impossible to read and debug<br />Development<br />Commented<br />Formatted<br />Large file<br />
  14. 14. Deployment Tips<br />Don’t host jQuery yourself!<br />http://code.google.com/apis/ajaxlibs/documentation/<br />Numerous website use the Google version.<br />Possibly already cached on a person’s machine.<br />Both production and development versions are available.<br />
  15. 15. A note about jQuery documentation<br />It’s awesome!<br />http://docs.jquery.com<br />Easy to navigate and search<br />Examples on every topic<br />Tutorials, references, and FAQs<br />
  16. 16.
  17. 17.
  18. 18. VS2008 Intellisense<br />http://docs.jquery.com/Downloading_jQuery<br />Add the *-vsdoc.js file to your solution<br />Enjoy full jQueryIntellisense!<br />
  19. 19. Demo<br />Setting up jQuery<br />
  20. 20.
  21. 21. Setting Up jQuery<br />
  22. 22. jQuery Syntax<br />$(selector).function()<br />$ or jQuery<br />jQuery object<br />selector<br />reference to an element on the page<br />Function<br />Any jQuery supported method or plugin.<br />
  23. 23. What is a selector?<br />Think CSS!<br />jQuery has a built in DOM transversal engine.<br />$(selector) returns a list of elements on the page that match the “selector”.<br />Example: $(“input”) will return a list of ALL input elements on the page.<br />
  24. 24. Demo<br />Selectors<br />
  25. 25. $(document).ready()<br />Fixes problems based on window.onload as a way of handling events when page is loaded.<br />Window.onload fires only after all HTML and images have been downloaded.<br />$(document).ready() fires as soon as all markup has been downloaded.<br />
  26. 26. Demo<br />A Better Contact Form: Putting jQuery to Work<br />
  27. 27. jQuery UI<br />http://jqueryui.com/<br />Several comment UI widgets and visual effects.<br />Compatible with several browsers, including IE 6.0.<br />
  28. 28. Demo<br />jQuery UI<br />
  29. 29. 3rd Party Plugins<br />Hundreds of plugins available<br />Don’t re-invent the wheel!<br />AJAX, Animation, Effects, Browser Tweaks, Drag and Drop, Forms, Layouts, Media, Menus, Navigation, Tables, UI, Widgets, etc…<br />http://plugins.jquery.com<br />
  30. 30. Questions?<br />http://www.kevgriffin.com<br />Twitter: 1kevgriff<br />Email: kevin@kevgriffin.com<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.