jQuery

DrupalCamp Toronto - May 2008

John Resig (ejohn.org)
Why Libraries?
• Makes JavaScript bearable
• Gets the job done fast
• Simplifies cross-browser support
What is jQuery?
✦ An open source JavaScript library that
simplifies the interaction between HTML
and JavaScript.
We missed you!
✦ We’ve been busy:
✦ jQuery 1.1
✦ jQuery 1.1.1
✦ jQuery 1.1.2
✦ jQuery 1.1.3
✦ jQuery 1.1.4
✦ jQuery 1.2
✦ jQuery 1.2.1
✦ jQuery 1.2.2
✦ jQuery 1.2.3

✦ ... since the last Drupal release

Major Releases
✦ More info:
✦ jQuery 1.1:
http://jquery.com/blog/2007/01/14/jquery-birthday-11-new-site-new-docs/
✦ jQuery 1.1.3:
http://jquery.com/blog/2007/07/01/jquery-113-800-faster-still-20kb/
✦ jQuery 1.1.4:
http://jquery.com/blog/2007/08/24/jquery-114-faster-more-tests-ready-
for-12/
✦ jQuery 1.2:
http://docs.jquery.com/Release:jQuery_1.2
✦ jQuery 1.2.2:
http://docs.jquery.com/Release:jQuery_1.2.2
✦ jQuery 1.2.3:
http://docs.jquery.com/Release:jQuery_1.2.3
✦ All: http://docs.jquery.com/Downloading_jQuery
 The Focus of jQuery

Find Some Elements Do something with them

{

{
$(“div”).addClass(“special”);
jQuery Object
Keep Clean
✦ jQuery can be rename ‘$’:
var $jq = jQuery.noConflict();
$jq(“div”).hide();
✦ jQuery can even rename ‘jQuery’ allowing
multiple copies of jQuery to work side-by-
side.
✦ var $a = jQuery.noConflict(true);
// load other version of jQuery
$a(“div”).hide(); // still works!
Find Some Elements...
✦ Full CSS Selector 1-3 Support
✦ Better CSS Selector support than most
browsers
 $(“div”)
<div id=”body”>
<h2>Some Header</h2>
<div class=”contents”>
<p>...</p>
<p>...</p>
</div>
</div>
 $(“#body”)
<div id=”body”>
<h2>Some Header</h2>
<div class=”contents”>
<p>...</p>
<p>...</p>
</div>
</div>
$(“div#body”)
<div id=”body”>
<h2>Some Header</h2>
<div class=”contents”>
<p>...</p>
<p>...</p>
</div>
</div>
$(“div.contents p”)
<div id=”body”>
<h2>Some Header</h2>
<div class=”contents”>
<p>...</p>
<p>...</p>
</div>
</div>
$(“.foo > div”)
<div id=”body”>
<h2>Some Header</h2>
<div class=”contents”>
<p>...</p>
<p>...</p>
</div>
</div>
$(“div:has(div)”)
<div id=”body”>
<h2>Some Header</h2>
<div class=”contents”>
<p>...</p>
<p>...</p>
</div>
</div>
Do something with them
✦ DOM Manipulation (append, prepend, remove)
✦ Events (click, hover, toggle)
✦ Effects (hide, show, slideDown, fadeOut)
✦ AJAX (load, get, post)
DOM Manipulation
✦ $(“a[target=_blank]”)
.append(“ (Opens in New Window)”);
✦ $(“#body”).css({
border: “1px solid green”,
height: “40px”
});
Events
✦ $(“form”).submit(function(){
if ( $(“input#name”).val() == “” ) {
$(“span.help”).show();
return false;
}
});
✦ $(“a#open”).click(function(){
$(“#menu”).show();
return false;
});
Animations
✦ $(“#menu”).slideDown(“slow”);
✦ Individual properties:
$(“div”).animate({
fontSize: “2em”,
width: “+=20%”,
color: “green” // via plugin
});

✦ Callbacks:
$(“div”).hide(500, function(){
// $(this) is an individual <div> element
$(this).show(500);
});
Ajax
✦ $(“#body”).load(“sample.html”);
✦ Before:
<div id=”body”></div>
✦ After:
<div id=”body”>
<h1>Hello, world!</h1>
</div>
✦ $.getJSON(“test.json”, function(js){
for ( var name in js )
$(“ul”).append(“<li>” + name + “</li>”);
});
Ajax (cont.)
✦ $(“#body”).load(“sample.html h1:first”);
✦ Before:
<div id=”body”></div>
✦ After:
<div id=”body”>
<h1>Hello, world!</h1>
</div>
Chaining
✦ You can have multiple actions against a single set
of elements
✦ $(“div”).hide();
✦ $(“div”).hide().css(“color”,”blue”);
✦ $(“div”).hide().css(“color”,”blue”).slideDown();
Chaining (cont.)
✦ $(“ul.open”)
.children(“li”)
.addClass(“open”)
.end()
.find(“a”)
.click(function(){
$(this).next().toggle();
return false;
})
.end();
Why jQuery?
✦ Fully documented
✦ Great community
✦ Tons of plugins
✦ Small size (15kb)
✦ Everything works in IE 6+, Firefox,
Safari 2+, and Opera 9+
Accordion Menu
http://jquery.com/files/apple/
http://jquery.com/files/apple/done.html
Plugins
✦ Huge plugin ecosystem
✦ Managed by Plugin tracker - built with
Drupal!
http://plugins.jquery.com/
✦ Hundreds in the tracker - even more on
the web
jQuery Plugins
✦ Extend the jQuery system
✦ Add on extra methods:
$(“div”).hideRemove();
✦ Trivial to implement:
jQuery.fn.hideRemove = function(speed){
return this.hide(speed, function(){
jQuery(this).remove();
});
};
 Todo List
http://jquery.com/files/todo/
http://jquery.com/files/todo/done.php
jQuery UI
✦ A complete set of themed, cross-browser,
user interface components.
✦ Drag, Drop, Sort, Select, Resize
✦ Accordion, Datepicker, Dialog, Slider, Tabs
✦ More info:
http://docs.jquery.com/UI
✦ 1.5 is in beta right now:
http://jquery.com/blog/2008/02/12/jquery-ui-15b-new-api-more-features-huge-performance-boost/
Accessibility
✦ Keyboard Accessible
✦ Screenreader Accessible
✦ Grant from Mozilla Foundation to
implement ARIA
Support
✦ Liferay (Java CMS) hired Paul Bakaus,
jQuery UI lead to work on it full time.
✦ More support on the way!
Who uses jQuery?
✦ Google
✦ IBM
✦ NBC
✦ Amazon
✦ Wordpress
✦ Digg
✦ many others...
Community
✦ Very active mailing list
✦ 100+ Posts/Day
✦ 6000+ Members

✦ Technorati: Dozens of blog posts per day

Books
✦ 3 Books Released:
✦ Learning jQuery (Packt)
✦ jQuery Reference (Packt)
✦ jQuery in Action (Manning)
Random
✦ New Logo
✦ and New Web Site
✦ Coming Soon!
 jquery.com
docs.jquery.com - jquery.com/plugins
More:
ui.jquery.com
visualjquery.com
learningjquery.com