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

Intro to jQuery - Tulsa Ruby Group

on

  • 3,932 views

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

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

Statistics

Views

Total Views
3,932
Slideshare-icon Views on SlideShare
3,924
Embed Views
8

Actions

Likes
3
Downloads
140
Comments
0

3 Embeds 8

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

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Intro to jQuery - Tulsa Ruby Group Intro to jQuery - Tulsa Ruby Group Presentation Transcript

    • Intro to jQuery Presented by Brad Vernon [email_address] Tulsa.rb Group Oct. 1, 2007
    • 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
    • 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
    • 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
    • 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
    • Intro to jQuery
      • click() / dblclick()
      • ajax()
        • GET or POST
        • JSON, html, xml
      • hover()
      • trigger()
      • and more
      Events May 27, 2009
    • Intro to jQuery
      • find() – find all of what on page
      • filter() – ignore what
      • each() – very powerful
      • is() / hasClass() / not()
      Traversing May 27, 2009
    • 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
    • Intro to jQuery
      • Built in form serializer
      • Browser detector
      • noconflict()
      • each() – my favorite
      • grep()
      • unique() – remove duplicates
      What else? May 27, 2009
    • 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
    • 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
    • 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
    • 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
    • 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
    • Intro to jQuery
      • http://www.digg.com
      • http://ui.jquery.com/
      How about an example or two? May 27, 2009
    • 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
    • Questions? [email_address] Intro to jQuery