Your SlideShare is downloading. ×
0
Intro to jQuery Presented by Brad Vernon [email_address] Tulsa.rb Group  Oct. 1, 2007
Intro to jQuery <ul><li>JavaScript library/framework </li></ul><ul><li>Very small footprint </li></ul><ul><ul><li>26k mini...
Intro to jQuery <ul><li>Built with plug-in architecture </li></ul><ul><li>Incredibly easy to learn / use </li></ul><ul><li...
Intro to jQuery <ul><li>Digg </li></ul><ul><li>MSNBC </li></ul><ul><li>Wordpress.com and stand-alone app </li></ul><ul><li...
Intro to jQuery <ul><li>Magical functions allow for this: </li></ul><ul><ul><li>(function($) {  // $ is a reference to jQu...
Intro to jQuery <ul><li>click() / dblclick() </li></ul><ul><li>ajax()  </li></ul><ul><ul><li>GET or POST  </li></ul></ul><...
Intro to jQuery <ul><li>find() – find all of what on page </li></ul><ul><li>filter() – ignore what </li></ul><ul><li>each(...
Intro to jQuery <ul><li>Some effects built in: </li></ul><ul><ul><li>hide/show </li></ul></ul><ul><ul><li>fadeIn/fadeOut <...
Intro to jQuery <ul><li>Built in form serializer </li></ul><ul><li>Browser detector </li></ul><ul><li>noconflict() </li></...
Intro to jQuery <ul><li>Add event to any link on page </li></ul><ul><li>(function($) {  </li></ul><ul><li>$(&quot;a&quot;)...
Intro to jQuery <ul><li>How about chaining? </li></ul><ul><ul><li>$(&quot;.testing&quot;).click(function() { </li></ul></u...
Intro to jQuery <ul><li>How about some Ajax? </li></ul><ul><ul><li>$.ajax({ </li></ul></ul><ul><ul><li>type: &quot;POST&qu...
Intro to jQuery <ul><li>Currently over 180 plug-ins </li></ul><ul><li>Range from effects to Flash detectors to DOM manipul...
Intro to jQuery <ul><li>Moved many plug-ins into one core supported by core contributors </li></ul><ul><li>Includes (curre...
Intro to jQuery <ul><li>http://www.digg.com </li></ul><ul><li>http://ui.jquery.com/  </li></ul>How about an example or two...
Intro to jQuery <ul><li>www.jquery.com </li></ul><ul><li>www.jquery.com/api/ </li></ul><ul><li>http://groups.google.com/gr...
Questions? [email_address] Intro to jQuery
Upcoming SlideShare
Loading in...5
×

Intro to jQuery - Tulsa Ruby Group

2,637

Published on

Intro to jQuery Presented at Tulsa.rb Group, Oct 1, 2007

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

No Downloads
Views
Total Views
2,637
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
148
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Transcript of "Intro to jQuery - Tulsa Ruby Group"

  1. 1. Intro to jQuery Presented by Brad Vernon [email_address] Tulsa.rb Group Oct. 1, 2007
  2. 2. Intro to jQuery <ul><li>JavaScript library/framework </li></ul><ul><li>Very small footprint </li></ul><ul><ul><li>26k minified </li></ul></ul><ul><ul><li>14k minified and gzipped </li></ul></ul><ul><li>Cross-browser compatible </li></ul><ul><ul><li>IE 5.5+, FF 1.5+, Safari 2.0+, Opera 9+ </li></ul></ul><ul><li>Created by John Resig in Jan. 2006 </li></ul><ul><li>Open source </li></ul>What is jQuery? May 27, 2009
  3. 3. Intro to jQuery <ul><li>Built with plug-in architecture </li></ul><ul><li>Incredibly easy to learn / use </li></ul><ul><li>Can be used inline or external .js file </li></ul><ul><li>Chaining methods (my favorite feature) </li></ul><ul><li>CSS v1-3 compatible </li></ul><ul><li>Namespacing (plays nice with others) </li></ul><ul><li>Great docs and community </li></ul>What is jQuery? May 27, 2009
  4. 4. Intro to jQuery <ul><li>Digg </li></ul><ul><li>MSNBC </li></ul><ul><li>Wordpress.com and stand-alone app </li></ul><ul><li>Amazon </li></ul><ul><li>Quicken </li></ul><ul><li>Salesforce </li></ul><ul><li>SourceForge </li></ul><ul><li>Pandora </li></ul><ul><li>Me </li></ul><ul><li>Many, many, more… </li></ul>Who is using jQuery? May 27, 2009
  5. 5. Intro to jQuery <ul><li>Magical functions allow for this: </li></ul><ul><ul><li>(function($) { // $ is a reference to jQuery </li></ul></ul><ul><ul><li>})(jQuery); </li></ul></ul><ul><li>Uses CSS to select: </li></ul><ul><ul><li>$(“.classname”).click(). </li></ul></ul><ul><ul><li>Attaches event to any object with a class of “classname” </li></ul></ul>How does it work? May 27, 2009
  6. 6. Intro to jQuery <ul><li>click() / dblclick() </li></ul><ul><li>ajax() </li></ul><ul><ul><li>GET or POST </li></ul></ul><ul><ul><li>JSON, html, xml </li></ul></ul><ul><li>hover() </li></ul><ul><li>trigger() </li></ul><ul><li>and more </li></ul>Events May 27, 2009
  7. 7. Intro to jQuery <ul><li>find() – find all of what on page </li></ul><ul><li>filter() – ignore what </li></ul><ul><li>each() – very powerful </li></ul><ul><li>is() / hasClass() / not() </li></ul>Traversing May 27, 2009
  8. 8. Intro to jQuery <ul><li>Some effects built in: </li></ul><ul><ul><li>hide/show </li></ul></ul><ul><ul><li>fadeIn/fadeOut </li></ul></ul><ul><ul><li>slideUp/slideDown </li></ul></ul><ul><ul><li>toggle </li></ul></ul><ul><li>More effects via plug-ins (jQuery UI) </li></ul>Effects May 27, 2009
  9. 9. Intro to jQuery <ul><li>Built in form serializer </li></ul><ul><li>Browser detector </li></ul><ul><li>noconflict() </li></ul><ul><li>each() – my favorite </li></ul><ul><li>grep() </li></ul><ul><li>unique() – remove duplicates </li></ul>What else? May 27, 2009
  10. 10. Intro to jQuery <ul><li>Add event to any link on page </li></ul><ul><li>(function($) { </li></ul><ul><li>$(&quot;a&quot;).click(function() { </li></ul><ul><li>alert(&quot;Hello world!&quot;); </li></ul><ul><li>}); </li></ul><ul><li>})(jQuery); </li></ul><ul><li>To add to the first link found only: </li></ul><ul><li>$(“a:first”).click(function() { </li></ul>What does jQuery code look like? May 27, 2009
  11. 11. Intro to jQuery <ul><li>How about chaining? </li></ul><ul><ul><li>$(&quot;.testing&quot;).click(function() { </li></ul></ul><ul><ul><li>$(this).css(“color”, “red”).html(“my text”) .append(“Hello”).remove(); </li></ul></ul><ul><ul><li>}); </li></ul></ul><ul><li>Unlimited potential </li></ul>What does jQuery code look like? May 27, 2009
  12. 12. Intro to jQuery <ul><li>How about some Ajax? </li></ul><ul><ul><li>$.ajax({ </li></ul></ul><ul><ul><li>type: &quot;POST&quot;, </li></ul></ul><ul><ul><li>url: &quot;/mail/mcount/“, </li></ul></ul><ul><ul><li>dataType: “html&quot;, </li></ul></ul><ul><ul><li>success: function(msg){ </li></ul></ul><ul><ul><li> $(“#target”).html(msg); </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><ul><li>}); </li></ul></ul>What does jQuery code look like? May 27, 2009
  13. 13. Intro to jQuery <ul><li>Currently over 180 plug-ins </li></ul><ul><li>Range from effects to Flash detectors to DOM manipulators, to form validators </li></ul><ul><li>Can be combined into one file and minified </li></ul><ul><li>New ones popping up every week </li></ul>Are there good plug-ins? May 27, 2009
  14. 14. Intro to jQuery <ul><li>Moved many plug-ins into one core supported by core contributors </li></ul><ul><li>Includes (currently): </li></ul>jQuery UI May 27, 2009 <ul><ul><li>Drag / Drop </li></ul></ul><ul><ul><li>Sortable </li></ul></ul><ul><ul><li>Selectables </li></ul></ul><ul><ul><li>Resizables </li></ul></ul><ul><ul><li>Accordian </li></ul></ul><ul><ul><li>Magnifier </li></ul></ul><ul><ul><li>Calendar </li></ul></ul><ul><ul><li>Slider </li></ul></ul><ul><ul><li>Table </li></ul></ul><ul><ul><li>Tabs </li></ul></ul><ul><ul><li>Shadow </li></ul></ul>
  15. 15. Intro to jQuery <ul><li>http://www.digg.com </li></ul><ul><li>http://ui.jquery.com/ </li></ul>How about an example or two? May 27, 2009
  16. 16. Intro to jQuery <ul><li>www.jquery.com </li></ul><ul><li>www.jquery.com/api/ </li></ul><ul><li>http://groups.google.com/groups/en-jquery/ </li></ul><ul><li>http://ui.jquery.com/ </li></ul>Resources May 27, 2009
  17. 17. Questions? [email_address] Intro to jQuery
  1. A particular slide catching your eye?

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

×