MIT - January 2009John Resig
http://ejohn.org - http://twitter.com/jeresig
What is jQuery?✦ An open source JavaScript library that
simplifies the interaction between HTML and JavaScript.
Easy To Use✦ Completely unobtrusive✦ Uses CSS to layer functionality✦ Easy to separate behavior✦ Quick, terse, syntax
The Focus of jQuery
Find Some Elements
$(“div”).addClass(“special”);Do something with them{ {
jQuery Object
Todo List✦ All items saved in a session variable.✦ ?item=Some+Item
Save a single item.✦ ?items=<li>item</li><li>item</li>
Save a list of items.
Plugins✦ Huge plugin ecosystem✦ Managed by Plugin tracker
http://plugins.jquery.com/✦ Hundreds in the tracker - even more on
the web
jQuery Plugins✦ Extend the jQuery system✦ Add on extra methods:
jQuery(“div”).hideRemove();✦ Trivial to implement:
jQuery.fn.hideRemove = function(speed){ return this.hide(speed, function(){ jQuery(this).remove(); });};
jQuery UI✦ A complete set of themed, cross-browser,
user interface components (plugins!).✦ Drag, Drop, Sort, Select, Resize✦ Accordion, Datepicker, Dialog, Slider, Tabs✦ More info:
http://ui.jquery.com/✦ 1.6 is almost ready
Accessibility✦ Keyboard Accessible✦ Screenreader Accessible✦ Grant from Mozilla Foundation to
implement ARIA
Themeroller✦ Customize the styling of any jQuery UI
component✦ Full CSS, images for all components✦ Easy to customize and use✦ http://themeroller.com/
✦ Fully documented✦ Great community✦ Tons of plugins✦ Small size (18kb)✦ Everything works in IE 6+, Firefox 2+,
Safari 3+, Chrome, and Opera 9+
Why jQuery?
Who uses jQuery?✦ Projects:
✦ Wordpress, Drupal, CakePHP, Textpattern, Mozilla
✦ Companies:✦ Google, IBM, Amazon, Digg, Netflix,
Dell, HP, Bank of America, Intel...✦ NBC, CBS, BBC, Reuters, Newsweek,
Boston Globe, and more ✦ many others...
✦ Very active mailing list✦ 150+ Posts/Day✦ 12700+ Members
✦ Technorati: Hundred blog posts per day
Community
Books✦ 3 Books Released:
✦ Learning jQuery (Packt)✦ jQuery Reference (Packt)✦ jQuery in Action (Manning)
How It Works✦ How most engines work✦ “div > p”✦ Find all divs
Loop through each div✦ Find all child elements
✦ Verify if element is paragraph
How It Works✦ “div p”✦ Find all divs
Loop through all divs✦ Find all p, relative to the div
✦ Merge all results✦ Figure out unique results
Code name “Sizzle”✦ http://github.com/jeresig/sizzle/tree/master✦ New Selector Engine for jQuery✦ 4KB Compressed✦ No dependencies, can be used by other
libraries (MochiKit, Prototype, Dojo, YUI)
How Does it Work?✦ Query Restructuring✦ “div p”✦ Find all p elements
For each p element✦ check if parent is div
✦ if not, traverse up farther✦ if at top, remove element✦ if so, save element
✦ No merging! No unique!
How Does it Work?✦ Faster for some queries, slower for others✦ Depends on the DOM structure✦ “div > p” much faster, for example✦ Built like how browsers query the DOM
Live Events✦ Behave like normal event binding✦ ... but work for all future elements too!✦ $(“a”).live(“click”, ...);$(“div”).append(“<a>test</a>”);
1.3 Sniffing✦ All major JS libraries use browser sniffing✦ Look at the user agent and make guesses
✦ navigator.userAgent is bad! :-(✦ We got rid of this in 1.3!✦ Makes our code more resilient to change
Detection✦ Object Detection
✦ if ( document.getElementsByTagName )✦ Feature Simulation
✦ var div = document.createElement(“div”);div.innerHTML = “<!--test-->”;var a = div.getElementsByTagName(“*”);if ( a.length > 0 ) { // Why did we match a comment?}
Thank You!✦ John Resig✦ http://ejohn.org/✦ http://twitter.com/jeresig/