intro to jquery - tulsa ruby group
DESCRIPTION
Intro to jQuery Presented at Tulsa.rb Group, Oct 1, 2007TRANSCRIPT
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?
April 12, 2023 2
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?
April 12, 2023 3
Intro to jQuery
• Digg• MSNBC• Wordpress.com and stand-alone app• Amazon• Quicken• Salesforce• SourceForge• Pandora• Me• Many, many, more…
Who is using jQuery?
April 12, 2023 4
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?
April 12, 2023 5
Intro to jQuery
• click() / dblclick()
• ajax() – GET or POST – JSON, html, xml
• hover()
• trigger()
• and more
Events
April 12, 2023 6
Intro to jQuery
• find() – find all of what on page
• filter() – ignore what
• each() – very powerful
• is() / hasClass() / not()
Traversing
April 12, 2023 7
Intro to jQuery
• Some effects built in:– hide/show– fadeIn/fadeOut– slideUp/slideDown– toggle
• More effects via plug-ins (jQuery UI)
Effects
April 12, 2023 8
Intro to jQuery
• Built in form serializer
• Browser detector
• noconflict()
• each() – my favorite
• grep()
• unique() – remove duplicates
What else?
April 12, 2023 9
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?
April 12, 2023 10
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?
April 12, 2023 11
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?
April 12, 2023 12
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?
April 12, 2023 13
Intro to jQuery
• Moved many plug-ins into one core supported by core contributors
• Includes (currently):
jQuery UI
April 12, 2023 14
• 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?
April 12, 2023 15
Intro to jQuery
• www.jquery.com
• www.jquery.com/api/
• http://groups.google.com/groups/en-jquery/
• http://ui.jquery.com/
Resources
April 12, 2023 16
