Your SlideShare is downloading. ×
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,573

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

×