Intro to jQuery

4,406 views

Published on

Presentation to BarCamp Buffalo 3/3/2009

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,406
On SlideShare
0
From Embeds
0
Number of Embeds
37
Actions
Shares
0
Downloads
172
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Intro to jQuery

  1. 1. Intro to jQuery Buffalo Barcamp - March 2009 Ralph Whitbeck (ralphwhitbeck.com)
  2. 2. What is jQuery? <ul><ul><li>An open source javascript library that simplifies the interaction between HTML and JavaScript. </li></ul></ul>
  3. 3. Focus of jQuery <ul><li>$(&quot;div&quot;).addclass(&quot;special&quot;); </li></ul><ul><ul><li>Initiate jQuery object - $ </li></ul></ul><ul><ul><li>Find some elements - (&quot;div&quot;) </li></ul></ul><ul><ul><li>Do something - .addclass(&quot;special&quot;) </li></ul></ul>
  4. 4. What can jQuery do? <ul><ul><li>Selectors  </li></ul></ul><ul><ul><ul><li>Sizzle </li></ul></ul></ul><ul><ul><li>Attributes  </li></ul></ul><ul><ul><ul><li>attr() </li></ul></ul></ul><ul><ul><ul><li>addClass()  </li></ul></ul></ul><ul><ul><ul><li>val(), html(), text() </li></ul></ul></ul>
  5. 5. What can jQuery do? <ul><ul><li>Traversing </li></ul></ul><ul><ul><ul><li>.eq(), .find() </li></ul></ul></ul><ul><ul><li>Manipulation </li></ul></ul><ul><ul><ul><li>.append(). appendTo(), .prepend() </li></ul></ul></ul><ul><ul><ul><li>.after(), .before()  </li></ul></ul></ul><ul><ul><ul><li>.wrap() </li></ul></ul></ul>
  6. 6. What can jQuery do? <ul><ul><li>CSS </li></ul></ul><ul><ul><ul><li>.css(), .width(), .height() </li></ul></ul></ul><ul><ul><li>Events </li></ul></ul><ul><ul><ul><li>.trigger(), .live() </li></ul></ul></ul><ul><ul><ul><li>.mouseup(), .mousedown()   </li></ul></ul></ul><ul><ul><li>Effects </li></ul></ul><ul><ul><ul><li>.show(), .hide() </li></ul></ul></ul><ul><ul><ul><li>.fadeIn(), .fadeOut() </li></ul></ul></ul>
  7. 7. What can jQuery do? <ul><ul><li>AJAX </li></ul></ul><ul><ul><ul><li>.ajax() </li></ul></ul></ul><ul><ul><li>Utilities </li></ul></ul><ul><ul><ul><li>.each() </li></ul></ul></ul>
  8. 8. jQuery is Extensible <ul><ul><li>Thousands of plugins </li></ul></ul><ul><li>  </li></ul><ul><ul><li>Plugin Repository </li></ul></ul><ul><ul><ul><li>http://plugins.jquery.com </li></ul></ul></ul><ul><li>  </li></ul>
  9. 9. jQuery UI <ul><ul><li>Official jQuery Project </li></ul></ul><ul><ul><li>Collection of UI plugins </li></ul></ul><ul><ul><ul><li>Interactions </li></ul></ul></ul><ul><ul><ul><ul><li>Draggable </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Droppable </li></ul></ul></ul></ul><ul><ul><ul><li>Widgets </li></ul></ul></ul><ul><ul><ul><ul><li>Accordian </li></ul></ul></ul></ul><ul><ul><ul><ul><li>DatePicker </li></ul></ul></ul></ul><ul><ul><ul><li>Effects </li></ul></ul></ul><ul><ul><ul><ul><li>Show/Hide </li></ul></ul></ul></ul><ul><li>  </li></ul><ul><li>  </li></ul>
  10. 10. jQuery Partners <ul><ul><li>Google </li></ul></ul><ul><ul><ul><li>AJAX API </li></ul></ul></ul><ul><ul><ul><li>Link to jQuery and reap the benefits in a CDN </li></ul></ul></ul><ul><ul><li>Microsoft </li></ul></ul><ul><ul><ul><li>Support for jQuery intellisense in Visual Studio 2008 </li></ul></ul></ul><ul><li>  </li></ul><ul><li>  </li></ul>
  11. 11. Demos  
  12. 12. How can you learn jQuery? <ul><li>Books </li></ul><ul><li>  </li></ul><ul><li>  </li></ul><ul><li>  </li></ul><ul><li>  </li></ul>jQuery in Action Learning jQuery 1.3
  13. 13. How can you learn jQuery? <ul><li>Blogs </li></ul><ul><li>  </li></ul><ul><ul><li>jQuery Blog ( http://blog.jquery.com ) </li></ul></ul><ul><ul><li>Learning jQuery ( http://www.learningjquery.com/ ) </li></ul></ul><ul><ul><li>John Resig ( http://ejohn.org )  </li></ul></ul><ul><ul><li>Ralph Whitbeck ( http://ralphwhitbeck.com ) </li></ul></ul>
  14. 14. How can you learn jQuery? <ul><li>Twitter </li></ul><ul><li>  </li></ul><ul><li>jQuery (@jquery) </li></ul><ul><li>jQuery UI (@jqueryui) </li></ul><ul><li>jQuery Sites (@jquerysites) </li></ul><ul><li>John Resig (@jeresig) </li></ul>Rey Bango (@reybango)   Jörn Zaefferer (@bassistance)   Karl Swedberg (@kswedberg)   Me (@RedWolves) Twitter Search &quot;jQuery&quot;
  15. 15. Questions <ul><li>You can find all the links I talked about tonight </li></ul><ul><li>in my BarCampBuffalo Delicious tag. </li></ul><ul><li>http://tinyurl.com/bcbRalph </li></ul><ul><li>  </li></ul>

×