• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Intro to jQuery - Tulsa Ruby Group
 

Intro to jQuery - Tulsa Ruby Group

on

  • 3,873 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,873
Views on SlideShare
3,865
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

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