1. Fundamental of
jQuery
Zhouquan.yezq
Senior Web Developer

2. Agenda
• Selector
• Array/Object
• Event handing
• Custom event
• Deferred/promised

3. What find something, then
jQuery do some action
does?

4. Selector
Native DOM Support jQuery Support
getElementById $(‘#id’)
getElementByTagName $(‘div’) element
getElementsByName $(‘input*name=“myinput”+’)
$(‘*’)…
div.class1
div .class1
div > .class1
http://www.w3.org/TR/CSS21/selector.html

5. Array/Object
$.Each
$.Map
$.slice

6. Event Handing
• Capturing
• Bubbling
http://www.quirksmode.org/js/events_order.h
tml

7. W3C Model
element1.addEventListener('click',doSomething2,true)
jQuery ‘s delegate method and Backbone view Event use the bubble phase.

8. Custom Event
$.trigger
$(‘li’).on(‘mycustomevent’,function(){
//todo
})
$(‘li’).trigger(‘mycustomevent’);
Our pub/sub method idea come from here

9. Deferred/Promised
01: challenges with the Async programming
http://blogs.msdn.com/b/ie/archive/2011/09/11/asynchronous-programming-in-javascript-with-promises.aspx
02: jQuery
$.ajax({
url: 'http://search.twitter.com/search.json',
dataType: 'jsonp',
data: { q: '#IE10', rpp: 100 }
}).success(function (data) {
/* handle data */
}).error(function (error) {
/* handle error */
});
03: How to make promised function