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

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

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

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

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

Digg

MSNBC

Wordpress.com and stand-alone app

Amazon

Quicken

Salesforce

SourceForge

Pandora

Me

Many, many, more…

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

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”

Intro to jQuery click() / dblclick() ajax() GET or POST JSON, html, xml hover() trigger() and more Events May 27, 2009

click() / dblclick()

ajax()

GET or POST

JSON, html, xml

hover()

trigger()

and more

Intro to jQuery find() – find all of what on page filter() – ignore what each() – very powerful is() / hasClass() / not() Traversing May 27, 2009

find() – find all of what on page

filter() – ignore what

each() – very powerful

is() / hasClass() / not()

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

Some effects built in:

hide/show

fadeIn/fadeOut

slideUp/slideDown

toggle

More effects via plug-ins (jQuery UI)

Intro to jQuery Built in form serializer Browser detector noconflict() each() – my favorite grep() unique() – remove duplicates What else? May 27, 2009

Built in form serializer

Browser detector

noconflict()

each() – my favorite

grep()

unique() – remove duplicates

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

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() {

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

How about chaining?

$(".testing").click(function() {

$(this).css(“color”, “red”).html(“my text”) .append(“Hello”).remove();

});

Unlimited potential

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

How about some Ajax?

$.ajax({

type: "POST",

url: "/mail/mcount/“,

dataType: “html",

success: function(msg){

$(“#target”).html(msg);

}

});

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

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

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

Moved many plug-ins into one core supported by core contributors

Includes (currently):

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

http://www.digg.com

http://ui.jquery.com/

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

www.jquery.com

www.jquery.com/api/

http://groups.google.com/groups/en-jquery/

http://ui.jquery.com/

Questions? [email_address] Intro to jQuery