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

Selectors

Todo List

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

Growth

Books✦ 3 Books Released:

✦ Learning jQuery (Packt)✦ jQuery Reference (Packt)✦ jQuery in Action (Manning)

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

1.3 Selectors

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

jquery.comdocs.jquery.com - plugins.jquery.com

More:ui.jquery.comapi.jquery.com

learningjquery.com

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