A talk that I gave at MIT, in January 2009, about jQuery.

1. MIT - January 2009
John Resig
http://ejohn.org - http://twitter.com/jeresig

2. What is jQuery?
An open source JavaScript library that
✦
simplifies the interaction between HTML
and JavaScript.

3. Easy To Use
Completely unobtrusive
✦
Uses CSS to layer functionality
✦
Easy to separate behavior
✦
Quick, terse, syntax
✦

4. The Focus of jQuery
Find Some Elements Do something with them
{
{
$(“div”).addClass(“special”);
jQuery Object

5. Selectors

6. Todo List

7. 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.

8. Plugins
Huge plugin ecosystem
✦
Managed by Plugin tracker
✦
http://plugins.jquery.com/
Hundreds in the tracker - even more on
✦
the web

9. 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();
});
};

10. 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
✦

11. Accessibility
Keyboard Accessible
✦
Screenreader Accessible
✦
Grant from Mozilla Foundation to
✦
implement ARIA

12. Themeroller
Customize the styling of any jQuery UI
✦
component
Full CSS, images for all components
✦
Easy to customize and use
✦
http://themeroller.com/
✦

13. Why jQuery?
Fully documented
✦
Great community
✦
Tons of plugins
✦
Small size (18kb)
✦
Everything works in IE 6+, Firefox 2+,
✦
Safari 3+, Chrome, and Opera 9+

14. 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...
✦

15. Community
Very active mailing list
✦
✦ 150+ Posts/Day
✦ 12700+ Members
Technorati: Hundred blog posts per day
✦

16. Growth

17. Books
3 Books Released:
✦
✦ Learning jQuery (Packt)
✦ jQuery Reference (Packt)
✦ jQuery in Action (Manning)

18. jQuery 1.3
Released on the 14th
✦
1.3.1 was released on the 21st
✦
Much faster, new live events
✦

19. 1.3 Selectors

20. 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

21. 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
✦

22. 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)

23. 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!
✦

24. 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
✦

27. Live Events
Behave like normal event binding
✦
... but work for all future elements too!
✦
$(“a”).live(“click”, ...);
✦
$(“div”).append(“<a>test</a>”);

28. 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
✦

29. 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?
}

30. jquery.com
docs.jquery.com - plugins.jquery.com
More:
ui.jquery.com
api.jquery.com
learningjquery.com

31. Thank You!
John Resig
✦
http://ejohn.org/
✦
http://twitter.com/jeresig/
✦