Intro to jQuery - Tulsa Ruby Group
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,032
On Slideshare
4,024
From Embeds
8
Number of Embeds
3

Actions

Shares
Downloads
140
Comments
0
Likes
3

Embeds 8

http://paper.li 6
http://192.168.10.100 1
http://www.slideshare.net 1

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