This document summarizes John Resig's presentation on jQuery internals. It discusses the core parts of jQuery like common functions, selectors, DOM manipulation and events. It also covers jQuery's isolation, chaining, element data, new selector engine Sizzle, and tools for testing and profiling jQuery like the qUnit test suite and profiling plugin.

1. jQuery Internals
+ Cool Stuff
John Resig
http://ejohn.org/ - http://twitter.com/jeresig/

2. Overview
✦ Why we do what we do
✦ Features you may not know about
✦ New features coming

3. Parts of jQuery
✦ Common
✦ Selectors
✦ DOM Modification
✦ Events
✦ Sniffing

4. Chaining
✦ jQuery(quot;<li><a></a></li>quot;) // li
.find(quot;aquot;) // a
.attr(quot;hrefquot;, quot;http://ejohn.org/quot;) // a
.html(quot;John Resigquot;) // a
.end() // li
.appendTo(quot;ulquot;);
✦ jQuery(quot;<li><a></a></li>quot;) // li
.find(quot;aquot;) // a
.attr(quot;hrefquot;, quot;http://ejohn.org/quot;) // a
.html(quot;John Resigquot;) // a
.andSelf() // li, a
.addClass(“person”) // li, a
.end() // a
.end() // li
.appendTo(quot;ulquot;);

5. Isolation
✦ jQuery shouldn’t affect outside code
✦ We’re good at this
✦ Outside code shouldn’t effect jQuery
✦ Getting better at this
✦ (Still hurt by Object.prototype)

6. jQuery Wrapper
✦ (function(){
var jQuery = window.jQuery = function(){
// ...
};
})();
✦ (function(){
var foo = 5;
})();

7. Plugin Wrapping
✦ (function($){
// Your code...
})(jQuery);
✦ (function(){
var $ = jQuery;
// Your code...
})();

8. noConflict
✦ // Remove $
var $jq = jQuery.noConflict();
✦ // Remove $ and jQuery
jQuery.noConflict(true);
✦ Can even have multiple copies of jQuery
on the page, simultaneously

9. noConflict
✦ (function(){
var oldjQuery = window.jQuery;
var jQuery = window.jQuery = function(){
// ...
};
jQuery.noConflict = function(all){
if ( all )
window.jQuery = oldjQuery;
return jQuery;
};
})();

10. Element Data
✦ Added in jQuery 1.2
✦ Attaching data to elements can be
hazardous
✦ Store data:
jQuery.data(elem, “name”, “value”);
✦ Read data:
jQuery.data(elem, “name”);
✦ All data is stored in a central cache and
completely garbage collected, as necessary

11. Element Data (cont.)
✦ Added in jQuery 1.2.3
✦ Can handle namespacing
$(”div”).data(”test”, “original”);
$(”div”).data(”test.plugin”, “new data”);
$(”div”).data(”test”) == “original”; // true
$(”div”).data(”test.plugin”) == “new data”; // true
✦ Advanced data handling can be overridden
by plugins
$(element).bind(”setData.draggable”, function(event, key, value){
self.options[key] = value;
}).bind(”getData.draggable”, function(event, key){
return self.options[key];
});

12. Selectors

13. How It Works
✦ How it currently works
✦ “div > p”
✦ Find all divs
Loop through each div
✦ Find all child elements
✦ Verify if element is paragraph

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

15. Sizzle
✦ http://github.com/jeresig/sizzle/tree/master
✦ New Selector Engine for jQuery
✦ 1.5 - 4x faster than other libraries
✦ 4KB Compressed
✦ No dependencies, can be used by other
libraries (MochiKit, Prototype)

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

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

18. Niceties
✦ Query Caching
✦ if ( document.addEventListener && !document.querySelectorAll ) {
cache = {};
function invalidate(){ cache = {}; }
document.addEventListener(quot;DOMAttrModifiedquot;, invalidate, false);
document.addEventListener(quot;DOMNodeInsertedquot;, invalidate, false);
document.addEventListener(quot;DOMNodeRemovedquot;, invalidate, false);
}
✦ Smart Fallbacks
✦ if ( document.getElementsByClassName ) {
Expr.order.splice(1, 0, quot;CLASSquot;);
Expr.find.CLASS = function(match, context) {
return context.getElementsByClassName(match[1]);
};
}

19. Manipulation
✦ Four common methods:
append, prepend, before, after
✦ $(“<li>and this too!</li>”)
✦ How does it work?

20. 3-step Process
✦ Cleaning the input
✦ Converting it into a DOM
✦ Injecting it into the DOM

21. Cleaning
✦ Make sure we’re working with HTML
input
✦ (Convert XML to HTML)
✦ <table/> -> <table></table>
✦ elem = elem.replace(/(<(w+)[^>]*?)/>/g, function(all, front,
tag){
return tag.match(/^(abbr|br|col|img|input|link|meta|param|
hr|area|embed)$/i) ?
all :
front + quot;></quot; + tag + quot;>quot;;
});

22. Converting
✦ Inject HTML string using innerHTML
✦ var div = document.createElement(“div”);
div.innerHTML = html;
div.childNodes; // Your meat!
✦ But doesn’t work for all HTML
✦ <tr>, <td>, <option>, <legend> (+ others)
must be in correct container elements
✦ “<table><tbody>” + html + “</tbody></
table>”

23. Injecting
✦ var elems = div.childNodes;
✦ Loop through elems, cloneNode(true)
each, insert into DOM
✦ 5 paragraphs
✦ 100 divs
✦ 2 method calls (insert, clone)
✦ 1000 method
✦ *Very* slow
✦ Simple plugin provides 10-15x speed-up:
http://dev.jquery.com/~john/ticket/append/

24. Document Fragments
✦ No div.childNodes looping
✦ Move the nodes into a Document
Fragment
✦ Husk DOM container
✦ Whole container can be cloned
✦ and whole container can be injected
✦ Saves a ton of repetition

25. Events

26. Non-DOM Events
✦ function User(){}
✦ var user = new User();
✦ $(user).bind(“login”, function(){
alert(“all done”);
});
$(user).trigger(“login”);

27. Namespaced Events
✦ Added in jQuery 1.2
✦ Targeted adding and removal of events
✦ $(“div”).bind(“click.foo”, function(){
alert(“foo!”);
});
✦ Time to clean up!
$(“div”).unbind(“click.foo”);
✦ Added in jQuery 1.2.3:
$(“div”).unbind(“.foo”);

28. Special Events
✦ Added in jQuery 1.2.2
✦ Can create whole shadow event system
✦ New events: mouseenter, mouseleave,
mousewheel (w/ plugin), ready
✦ $(”li”).bind(”mouseenter”, function(){
$(this).addClass(”hover”);
}).bind(”mouseleave”, function(){
$(this).removeClass(”hover”);
});

29. Animations
✦ Full Animation plugin (in jQuery 1.2):
✦ jQuery.fx.step.corner = function(fx) {
fx.elem.style.top = fx.now + fx.unit;
fx.elem.style.left = fx.now + fx.unit;
};
✦ $(”#go”).click(function(){
$(”#block”).animate({corner: ‘40px’}, 500);
});

30. Sniffing
✦ All major JS libraries use browser sniffing
✦ Look at the user agent and make guesses
✦ We can get rid of this!
✦ Makes our code more resilient to change

31. Testing & Analysis

32. Testing
✦ Rapid testing
✦ ./gen.sh
#!/bin/sh
svn co https://jqueryjs.googlecode.com/svn/trunk/jquery $1
&> /dev/null
cp $2.html $1/index.html
cd $1
make &> /dev/null
✦ ./gen.sh 1234 dom

33. Test Suite
✦ qUnit (jQuery Test Suite)
http://docs.jquery.com/QUnit
✦ By Joern Zaefferer

34. qUnit Usage
✦ test(quot;a basic test examplequot;, function() {
ok( true, quot;this test is finequot; );
var value = quot;helloquot;;
equals( quot;helloquot;, value, quot;We expect value to be helloquot; );
});
module(quot;Module Aquot;);
test(quot;first test within modulequot;, function() {
ok( true, quot;all passquot; );
});
test(quot;second test within modulequot;, function() {
ok( true, quot;all passquot; );
});
module(quot;Module Bquot;);
test(quot;some other testquot;, function() {
expect(1);
ok( true, quot;wellquot; );
});

35. qUnit Output

36. Profiling
✦ Deep Profiling Plugin
✦ Watch all method calls and events
✦ http://ejohn.org/blog/deep-profiling-
jquery-apps/
✦ http://dev.jquery.com/~john/plugins/profile/
github.com.html
✦ javascript:jQuery.displayProfile();

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