Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

jQuery From the Ground Up

2,334 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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 />

×