Your SlideShare is downloading. ×
0
Intro to jQuery - Tulsa Ruby Group
Intro to jQuery - Tulsa Ruby Group
Intro to jQuery - Tulsa Ruby Group
Intro to jQuery - Tulsa Ruby Group
Intro to jQuery - Tulsa Ruby Group
Intro to jQuery - Tulsa Ruby Group
Intro to jQuery - Tulsa Ruby Group
Intro to jQuery - Tulsa Ruby Group
Intro to jQuery - Tulsa Ruby Group
Intro to jQuery - Tulsa Ruby Group
Intro to jQuery - Tulsa Ruby Group
Intro to jQuery - Tulsa Ruby Group
Intro to jQuery - Tulsa Ruby Group
Intro to jQuery - Tulsa Ruby Group
Intro to jQuery - Tulsa Ruby Group
Intro to jQuery - Tulsa Ruby Group
Intro to jQuery - Tulsa Ruby Group
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

Intro to jQuery - Tulsa Ruby Group

2,589

Published on

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

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,589
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
148
Comments
0
Likes
4
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. Intro to jQuery Presented by Brad Vernon [email_address] Tulsa.rb Group Oct. 1, 2007
  • 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. 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. 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. 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. 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. 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. 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. 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. Intro to jQuery <ul><li>Add event to any link on page </li></ul><ul><li>(function($) { </li></ul><ul><li>$(&amp;quot;a&amp;quot;).click(function() { </li></ul><ul><li>alert(&amp;quot;Hello world!&amp;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. Intro to jQuery <ul><li>How about chaining? </li></ul><ul><ul><li>$(&amp;quot;.testing&amp;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. Intro to jQuery <ul><li>How about some Ajax? </li></ul><ul><ul><li>$.ajax({ </li></ul></ul><ul><ul><li>type: &amp;quot;POST&amp;quot;, </li></ul></ul><ul><ul><li>url: &amp;quot;/mail/mcount/“, </li></ul></ul><ul><ul><li>dataType: “html&amp;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. 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. 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. 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. 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. Questions? [email_address] Intro to jQuery

×