Download as PDF, PPTX
![$('div')
$('#id')
$('.class')
$('<div/>')
console.log($('#id')); //[<div id="id"></id>]](https://image.slidesharecdn.com/dollarsymbol-160114074405/85/Dollar-symbol-55-320.jpg)
![// A central reference to the root jQuery(document)
var rootjQuery,
// A simple way to check for HTML strings
// Prioritize #id over <tag> to avoid XSS via location.hash (#9521)
// Strict HTML recognition (#11290: must start with <)
rquickExpr = /^(?:s*(<[wW]+>)[^>]*|#([w-]*))$/,
init = jQuery.fn.init = function( selector, context ) {
var match, elem;
// HANDLE: $(""), $(null), $(undefined), $(false)
if ( !selector ) {
return this;
}
// Handle HTML strings
if ( typeof selector === "string" ) {
if ( selector[0] === "<" && selector[ selector.length - 1 ] === ">" && selector.length >= 3 ) {
// Assume that strings that start and end with <> are HTML and skip the regex check
match = [ null, selector, null ];
} else {
match = rquickExpr.exec( selector );
}](https://image.slidesharecdn.com/dollarsymbol-160114074405/85/Dollar-symbol-60-320.jpg)
![// A central reference to the root jQuery(document)
var rootjQuery,
// A simple way to check for HTML strings
// Prioritize #id over <tag> to avoid XSS via location.hash (#9521)
// Strict HTML recognition (#11290: must start with <)
rquickExpr = /^(?:s*(<[wW]+>)[^>]*|#([w-]*))$/,
init = jQuery.fn.init = function( selector, context ) {
var match, elem;
// HANDLE: $(""), $(null), $(undefined), $(false)
if ( !selector ) {
return this;
}
// Handle HTML strings
if ( typeof selector === "string" ) {
if ( selector[0] === "<" && selector[ selector.length - 1 ] === ">" && selector.length >= 3 ) {
// Assume that strings that start and end with <> are HTML and skip the regex check
match = [ null, selector, null ];
} else {
match = rquickExpr.exec( selector );
}
rquickExpr = /^(?:s*(<[wW]+>)[^>]*|#([w-]*))$/](https://image.slidesharecdn.com/dollarsymbol-160114074405/85/Dollar-symbol-61-320.jpg)
![// A central reference to the root jQuery(document)
var rootjQuery,
// A simple way to check for HTML strings
// Prioritize #id over <tag> to avoid XSS via location.hash (#9521)
// Strict HTML recognition (#11290: must start with <)
rquickExpr = /^(?:s*(<[wW]+>)[^>]*|#([w-]*))$/,
init = jQuery.fn.init = function( selector, context ) {
var match, elem;
// HANDLE: $(""), $(null), $(undefined), $(false)
if ( !selector ) {
return this;
}
// Handle HTML strings
if ( typeof selector === "string" ) {
if ( selector[0] === "<" && selector[ selector.length - 1 ] === ">" && selector.length >= 3 ) {
// Assume that strings that start and end with <> are HTML and skip the regex check
match = [ null, selector, null ];
} else {
match = rquickExpr.exec( selector );
}](https://image.slidesharecdn.com/dollarsymbol-160114074405/85/Dollar-symbol-64-320.jpg)
![// A central reference to the root jQuery(document)
var rootjQuery,
// A simple way to check for HTML strings
// Prioritize #id over <tag> to avoid XSS via location.hash (#9521)
// Strict HTML recognition (#11290: must start with <)
rquickExpr = /^(?:s*(<[wW]+>)[^>]*|#([w-]*))$/,
init = jQuery.fn.init = function( selector, context ) {
var match, elem;
// HANDLE: $(""), $(null), $(undefined), $(false)
if ( !selector ) {
return this;
}
// Handle HTML strings
if ( typeof selector === "string" ) {
if ( selector[0] === "<" && selector[ selector.length - 1 ] === ">" && selector.length >= 3 ) {
// Assume that strings that start and end with <> are HTML and skip the regex check
match = [ null, selector, null ];
} else {
match = rquickExpr.exec( selector );
}
rquickExpr = /^(?:s*(<[wW]+>)[^>]*|#([w-]*))$/](https://image.slidesharecdn.com/dollarsymbol-160114074405/85/Dollar-symbol-65-320.jpg)
![rquickExpr = /^(?:s*(<[wW]+>)[^>]*|#([w-]*))$/](https://image.slidesharecdn.com/dollarsymbol-160114074405/85/Dollar-symbol-67-320.jpg)
![rquickExpr = /^(?:s*(<[wW]+>)[^>]*|#([w-]*))$/
Non-capturing](https://image.slidesharecdn.com/dollarsymbol-160114074405/85/Dollar-symbol-68-320.jpg)
![rquickExpr = /^(?:s*(<[wW]+>)[^>]*|#([w-]*))$/
Non-capturing Group 1](https://image.slidesharecdn.com/dollarsymbol-160114074405/85/Dollar-symbol-69-320.jpg)
![rquickExpr = /^(?:s*(<[wW]+>)[^>]*|#([w-]*))$/
Non-capturing Group 1 Group 2](https://image.slidesharecdn.com/dollarsymbol-160114074405/85/Dollar-symbol-70-320.jpg)
![rquickExpr = /^(?:s*(<[wW]+>)[^>]*|#([w-]*))$/
Non-capturing Group 1 Group 2](https://image.slidesharecdn.com/dollarsymbol-160114074405/85/Dollar-symbol-71-320.jpg)
![rquickExpr = /^(?:s*(<[wW]+>)[^>]*|#([w-]*))$/
Non-capturing Group 1 Group 2
match = rquickExpr.exec( selector );](https://image.slidesharecdn.com/dollarsymbol-160114074405/85/Dollar-symbol-72-320.jpg)
![rquickExpr = /^(?:s*(<[wW]+>)[^>]*|#([w-]*))$/
Non-capturing Group 1 Group 2
match = rquickExpr.exec( selector );
• match[0] = // Matched String](https://image.slidesharecdn.com/dollarsymbol-160114074405/85/Dollar-symbol-73-320.jpg)
![rquickExpr = /^(?:s*(<[wW]+>)[^>]*|#([w-]*))$/
Non-capturing Group 1 Group 2
match = rquickExpr.exec( selector );
• match[0] = // Matched String
• match[1] = // Tag html](https://image.slidesharecdn.com/dollarsymbol-160114074405/85/Dollar-symbol-74-320.jpg)
![rquickExpr = /^(?:s*(<[wW]+>)[^>]*|#([w-]*))$/
Non-capturing Group 1 Group 2
match = rquickExpr.exec( selector );
• match[0] = // Matched String
• match[1] = // Tag html
• match[2] = // ID name](https://image.slidesharecdn.com/dollarsymbol-160114074405/85/Dollar-symbol-75-320.jpg)
![rquickExpr = /^(?:s*(<[wW]+>)[^>]*|#([w-]*))$/
Non-capturing Group 1 Group 2
match = rquickExpr.exec( selector );
• match[0] = // Matched String
• match[1] = // Tag html
• match[2] = // ID name $('#id')](https://image.slidesharecdn.com/dollarsymbol-160114074405/85/Dollar-symbol-76-320.jpg)
![rquickExpr = /^(?:s*(<[wW]+>)[^>]*|#([w-]*))$/
Non-capturing Group 1 Group 2
match = rquickExpr.exec( selector );
• match[0] = // Matched String
• match[1] = // Tag html
• match[2] = // ID name $('#id')
$('<div/>')](https://image.slidesharecdn.com/dollarsymbol-160114074405/85/Dollar-symbol-77-320.jpg)
![// Handle HTML strings
if ( typeof selector === "string" ) {
if ( selector[0] === "<" && selector[ selector.length - 1 ] === ">" && selector.length >= 3 )
// Assume that strings that start and end with <> are HTML and skip the regex check
match = [ null, selector, null ];
} else {
match = rquickExpr.exec( selector );
}](https://image.slidesharecdn.com/dollarsymbol-160114074405/85/Dollar-symbol-78-320.jpg)
![// Match html or make sure no context is specified for #id
if ( match && (match[1] || !context) ) {
// HANDLE: $(html) -> $(array)
if ( match[1] ) {
context = context instanceof jQuery ? context[0] : context;
// Option to run scripts is true for back-compat
// Intentionally let the error be thrown if parseHTML is not present
jQuery.merge( this, jQuery.parseHTML(
match[1],
context && context.nodeType ? context.ownerDocument || context : document,
true
) );
// HANDLE: $(html, props)
if ( rsingleTag.test( match[1] ) && jQuery.isPlainObject( context ) ) {
for ( match in context ) {
// Properties of context are called as methods if possible
if ( jQuery.isFunction( this[ match ] ) ) {
this[ match ]( context[ match ] );
// ...and otherwise set as attributes
} else {
this.attr( match, context[ match ] );](https://image.slidesharecdn.com/dollarsymbol-160114074405/85/Dollar-symbol-79-320.jpg)
![// ...and otherwise set as attributes
} else {
this.attr( match, context[ match ] );
}
}
}
return this;
// HANDLE: $(#id)
} else {
elem = document.getElementById( match[2] );
// Support: Blackberry 4.6
// gEBID returns nodes no longer in the document (#6963)
if ( elem && elem.parentNode ) {
// Inject the element directly into the jQuery object
this.length = 1;
this[0] = elem;
}
this.context = document;
this.selector = selector;
return this;
}](https://image.slidesharecdn.com/dollarsymbol-160114074405/85/Dollar-symbol-80-320.jpg)
![var match, elem, m, nodeType,
// QSA vars
i, groups, old, nid, newContext, newSelector;
if ( ( context ? context.ownerDocument || context : preferredDoc ) !== document ) {
setDocument( context );
}
context = context || document;
results = results || [];
nodeType = context.nodeType;
if ( typeof selector !== "string" || !selector ||
nodeType !== 1 && nodeType !== 9 && nodeType !== 11 ) {
return results;
}](https://image.slidesharecdn.com/dollarsymbol-160114074405/85/Dollar-symbol-87-320.jpg)
![var match, elem, m, nodeType,
// QSA vars
i, groups, old, nid, newContext, newSelector;
if ( ( context ? context.ownerDocument || context : preferredDoc ) !== document ) {
setDocument( context );
}
context = context || document;
results = results || [];
nodeType = context.nodeType;
if ( typeof selector !== "string" || !selector ||
nodeType !== 1 && nodeType !== 9 && nodeType !== 11 ) {
return results;
}](https://image.slidesharecdn.com/dollarsymbol-160114074405/85/Dollar-symbol-88-320.jpg)
![if ( !seed && documentIsHTML ) {
// Try to shortcut find operations when possible (e.g., not under DocumentFragment)
if ( nodeType !== 11 && (match = rquickExpr.exec( selector )) ) {
// Speed-up: Sizzle("#ID")
if ( (m = match[1]) ) {
if ( nodeType === 9 ) {
elem = context.getElementById( m );
// Check parentNode to catch when Blackberry 4.6 returns
// nodes that are no longer in the document (jQuery #6963)
if ( elem && elem.parentNode ) {
// Handle the case where IE, Opera, and Webkit return items
// by name instead of ID
if ( elem.id === m ) {
results.push( elem );
return results;
}
} else {
return results;
}
} else {
// Context is not a document](https://image.slidesharecdn.com/dollarsymbol-160114074405/85/Dollar-symbol-89-320.jpg)
![if ( !seed && documentIsHTML ) {
// Try to shortcut find operations when possible (e.g., not under DocumentFragment)
if ( nodeType !== 11 && (match = rquickExpr.exec( selector )) ) {
// Speed-up: Sizzle("#ID")
if ( (m = match[1]) ) {
if ( nodeType === 9 ) {
elem = context.getElementById( m );
// Check parentNode to catch when Blackberry 4.6 returns
// nodes that are no longer in the document (jQuery #6963)
if ( elem && elem.parentNode ) {
// Handle the case where IE, Opera, and Webkit return items
// by name instead of ID
if ( elem.id === m ) {
results.push( elem );
return results;
}
} else {
return results;
}
} else {
// Context is not a document](https://image.slidesharecdn.com/dollarsymbol-160114074405/85/Dollar-symbol-90-320.jpg)
![rquickExpr = /^(?:#([w-]+)|(w+)|.([w-]+))$/](https://image.slidesharecdn.com/dollarsymbol-160114074405/85/Dollar-symbol-93-320.jpg)
![rquickExpr = /^(?:#([w-]+)|(w+)|.([w-]+))$/](https://image.slidesharecdn.com/dollarsymbol-160114074405/85/Dollar-symbol-94-320.jpg)
![rquickExpr = /^(?:#([w-]+)|(w+)|.([w-]+))$/
Group 1](https://image.slidesharecdn.com/dollarsymbol-160114074405/85/Dollar-symbol-95-320.jpg)
![rquickExpr = /^(?:#([w-]+)|(w+)|.([w-]+))$/
Group 1 Group 2](https://image.slidesharecdn.com/dollarsymbol-160114074405/85/Dollar-symbol-96-320.jpg)
![rquickExpr = /^(?:#([w-]+)|(w+)|.([w-]+))$/
Group 1 Group 2 Group 3](https://image.slidesharecdn.com/dollarsymbol-160114074405/85/Dollar-symbol-97-320.jpg)
![rquickExpr = /^(?:#([w-]+)|(w+)|.([w-]+))$/
Group 1 Group 2 Group 3
match = rquickExpr.exec( selector );](https://image.slidesharecdn.com/dollarsymbol-160114074405/85/Dollar-symbol-98-320.jpg)
![rquickExpr = /^(?:#([w-]+)|(w+)|.([w-]+))$/
Group 1 Group 2 Group 3
match = rquickExpr.exec( selector );
• match[0] = // Matched String](https://image.slidesharecdn.com/dollarsymbol-160114074405/85/Dollar-symbol-99-320.jpg)
![rquickExpr = /^(?:#([w-]+)|(w+)|.([w-]+))$/
Group 1 Group 2 Group 3
match = rquickExpr.exec( selector );
• match[0] = // Matched String
• match[1] = // ID name](https://image.slidesharecdn.com/dollarsymbol-160114074405/85/Dollar-symbol-100-320.jpg)
![rquickExpr = /^(?:#([w-]+)|(w+)|.([w-]+))$/
Group 1 Group 2 Group 3
match = rquickExpr.exec( selector );
• match[0] = // Matched String
• match[1] = // ID name
• match[2] = // TAG name](https://image.slidesharecdn.com/dollarsymbol-160114074405/85/Dollar-symbol-101-320.jpg)
![rquickExpr = /^(?:#([w-]+)|(w+)|.([w-]+))$/
Group 1 Group 2 Group 3
match = rquickExpr.exec( selector );
• match[0] = // Matched String
• match[1] = // ID name
• match[2] = // TAG name
• match[3] = // CLASS name](https://image.slidesharecdn.com/dollarsymbol-160114074405/85/Dollar-symbol-102-320.jpg)
![rquickExpr = /^(?:#([w-]+)|(w+)|.([w-]+))$/
Group 1 Group 2 Group 3
match = rquickExpr.exec( selector );
• match[0] = // Matched String
• match[1] = // ID name
• match[2] = // TAG name
• match[3] = // CLASS name $(‘.class')](https://image.slidesharecdn.com/dollarsymbol-160114074405/85/Dollar-symbol-103-320.jpg)
![rquickExpr = /^(?:#([w-]+)|(w+)|.([w-]+))$/
Group 1 Group 2 Group 3
match = rquickExpr.exec( selector );
• match[0] = // Matched String
• match[1] = // ID name
• match[2] = // TAG name
• match[3] = // CLASS name $(‘.class')
$('div')](https://image.slidesharecdn.com/dollarsymbol-160114074405/85/Dollar-symbol-104-320.jpg)
![if ( !seed && documentIsHTML ) {
// Try to shortcut find operations when possible (e.g., not under DocumentFragment)
if ( nodeType !== 11 && (match = rquickExpr.exec( selector )) ) {
// Speed-up: Sizzle("#ID")
if ( (m = match[1]) ) {
if ( nodeType === 9 ) {
elem = context.getElementById( m );
// Check parentNode to catch when Blackberry 4.6 returns
// nodes that are no longer in the document (jQuery #6963)
if ( elem && elem.parentNode ) {
// Handle the case where IE, Opera, and Webkit return items
// by name instead of ID
if ( elem.id === m ) {
results.push( elem );
return results;
}
} else {
return results;
}
} else {
// Context is not a document](https://image.slidesharecdn.com/dollarsymbol-160114074405/85/Dollar-symbol-105-320.jpg)
![if ( !seed && documentIsHTML ) {
// Try to shortcut find operations when possible (e.g., not under DocumentFragment)
if ( nodeType !== 11 && (match = rquickExpr.exec( selector )) ) {
// Speed-up: Sizzle("#ID")
if ( (m = match[1]) ) {
if ( nodeType === 9 ) {
elem = context.getElementById( m );
// Check parentNode to catch when Blackberry 4.6 returns
// nodes that are no longer in the document (jQuery #6963)
if ( elem && elem.parentNode ) {
// Handle the case where IE, Opera, and Webkit return items
// by name instead of ID
if ( elem.id === m ) {
results.push( elem );
return results;
}
} else {
return results;
}
} else {
// Context is not a document](https://image.slidesharecdn.com/dollarsymbol-160114074405/85/Dollar-symbol-106-320.jpg)
![// Speed-up: Sizzle("TAG")
} else if ( match[2] ) {
push.apply( results, context.getElementsByTagName( selector ) );
return results;
// Speed-up: Sizzle(".CLASS")
} else if ( (m = match[3]) && support.getElementsByClassName ) {
push.apply( results, context.getElementsByClassName( m ) );
return results;
}
}](https://image.slidesharecdn.com/dollarsymbol-160114074405/85/Dollar-symbol-109-320.jpg)
![// Speed-up: Sizzle("TAG")
} else if ( match[2] ) {
push.apply( results, context.getElementsByTagName( selector ) );
return results;
// Speed-up: Sizzle(".CLASS")
} else if ( (m = match[3]) && support.getElementsByClassName ) {
push.apply( results, context.getElementsByClassName( m ) );
return results;
}
}](https://image.slidesharecdn.com/dollarsymbol-160114074405/85/Dollar-symbol-110-320.jpg)
![var push = [].push,
slice = [].slice;](https://image.slidesharecdn.com/dollarsymbol-160114074405/85/Dollar-symbol-111-320.jpg)
![Function.prototype.apply()
fun.apply(thisArg[, argsArray])](https://image.slidesharecdn.com/dollarsymbol-160114074405/85/Dollar-symbol-113-320.jpg)
![Function.prototype.apply()
fun.apply(thisArg[, argsArray])
Function.prototype.call()
fun.call(thisArg[, arg1[, arg2[, ...]]])](https://image.slidesharecdn.com/dollarsymbol-160114074405/85/Dollar-symbol-114-320.jpg)
![// QSA path
if ( support.qsa && (!rbuggyQSA || !rbuggyQSA.test( selector )) ) {
nid = old = expando;
newContext = context;
newSelector = nodeType !== 1 && selector;
// qSA works strangely on Element-rooted queries
// We can work around this by specifying an extra ID on the root
// and working up from there (Thanks to Andrew Dupont for the technique)
// IE 8 doesn't work on object elements
if ( nodeType === 1 && context.nodeName.toLowerCase() !== "object" ) {
groups = tokenize( selector );
if ( (old = context.getAttribute("id")) ) {
nid = old.replace( rescape, "$&" );
} else {
context.setAttribute( "id", nid );
}
nid = "[id='" + nid + "'] ";
i = groups.length;
while ( i-- ) {
groups[i] = nid + toSelector( groups[i] );
}
newContext = rsibling.test( selector ) && testContext( context.parentNode ) || context;
newSelector = groups.join(",");
}](https://image.slidesharecdn.com/dollarsymbol-160114074405/85/Dollar-symbol-116-320.jpg)
![// QSA path
if ( support.qsa && (!rbuggyQSA || !rbuggyQSA.test( selector )) ) {
nid = old = expando;
newContext = context;
newSelector = nodeType !== 1 && selector;
// qSA works strangely on Element-rooted queries
// We can work around this by specifying an extra ID on the root
// and working up from there (Thanks to Andrew Dupont for the technique)
// IE 8 doesn't work on object elements
if ( nodeType === 1 && context.nodeName.toLowerCase() !== "object" ) {
groups = tokenize( selector );
if ( (old = context.getAttribute("id")) ) {
nid = old.replace( rescape, "$&" );
} else {
context.setAttribute( "id", nid );
}
nid = "[id='" + nid + "'] ";
i = groups.length;
while ( i-- ) {
groups[i] = nid + toSelector( groups[i] );
}
newContext = rsibling.test( selector ) && testContext( context.parentNode ) || context;
newSelector = groups.join(",");
}](https://image.slidesharecdn.com/dollarsymbol-160114074405/85/Dollar-symbol-119-320.jpg)
![Deferred: function( func ) {
var tuples = [
// action, add listener, listener list, final state
[ "resolve", "done", jQuery.Callbacks("once memory"), "resolved" ],
[ "reject", "fail", jQuery.Callbacks("once memory"), "rejected" ],
[ "notify", "progress", jQuery.Callbacks("memory") ]
],
state = "pending",
promise = {
state: function() {
return state;
},
always: function() {
deferred.done( arguments ).fail( arguments );
return this;
},
then: function( /* fnDone, fnFail, fnProgress */ ) {
var fns = arguments;
return jQuery.Deferred(function( newDefer ) {
jQuery.each( tuples, function( i, tuple ) {
var fn = jQuery.isFunction( fns[ i ] ) && fns[ i ];
// deferred[ done | fail | progress ] for forwarding actions to newDefer
deferred[ tuple[1] ](function() {
var returned = fn && fn.apply( this, arguments );](https://image.slidesharecdn.com/dollarsymbol-160114074405/85/Dollar-symbol-157-320.jpg)
![var tuples = [
[ "resolve", "done", jQuery.Callbacks("once memory"), "resolved" ],
[ "reject", "fail", jQuery.Callbacks("once memory"), "rejected" ],
[ "notify", "progress", jQuery.Callbacks("memory") ]
],](https://image.slidesharecdn.com/dollarsymbol-160114074405/85/Dollar-symbol-158-320.jpg)
![var tuples = [
[ "resolve", "done", jQuery.Callbacks("once memory"), "resolved" ],
[ "reject", "fail", jQuery.Callbacks("once memory"), "rejected" ],
[ "notify", "progress", jQuery.Callbacks("memory") ]
],
⾏行為](https://image.slidesharecdn.com/dollarsymbol-160114074405/85/Dollar-symbol-159-320.jpg)
![var tuples = [
[ "resolve", "done", jQuery.Callbacks("once memory"), "resolved" ],
[ "reject", "fail", jQuery.Callbacks("once memory"), "rejected" ],
[ "notify", "progress", jQuery.Callbacks("memory") ]
],
⾏行為 假設](https://image.slidesharecdn.com/dollarsymbol-160114074405/85/Dollar-symbol-160-320.jpg)
![var tuples = [
[ "resolve", "done", jQuery.Callbacks("once memory"), "resolved" ],
[ "reject", "fail", jQuery.Callbacks("once memory"), "rejected" ],
[ "notify", "progress", jQuery.Callbacks("memory") ]
],
⾏行為 假設 狀態](https://image.slidesharecdn.com/dollarsymbol-160114074405/85/Dollar-symbol-161-320.jpg)
![var tuples = [
[ "resolve", "done", jQuery.Callbacks("once memory"), "resolved" ],
[ "reject", "fail", jQuery.Callbacks("once memory"), "rejected" ],
[ "notify", "progress", jQuery.Callbacks("memory") ]
],
⾏行為 假設 狀態Callback list](https://image.slidesharecdn.com/dollarsymbol-160114074405/85/Dollar-symbol-162-320.jpg)
![var tuples = [
[ "resolve", "done", jQuery.Callbacks("once memory"), "resolved" ],
[ "reject", "fail", jQuery.Callbacks("once memory"), "rejected" ],
[ "notify", "progress", jQuery.Callbacks("memory") ]
],
⾏行為 假設 狀態
0
Callback list](https://image.slidesharecdn.com/dollarsymbol-160114074405/85/Dollar-symbol-163-320.jpg)
![var tuples = [
[ "resolve", "done", jQuery.Callbacks("once memory"), "resolved" ],
[ "reject", "fail", jQuery.Callbacks("once memory"), "rejected" ],
[ "notify", "progress", jQuery.Callbacks("memory") ]
],
⾏行為 假設 狀態
0 1
Callback list](https://image.slidesharecdn.com/dollarsymbol-160114074405/85/Dollar-symbol-164-320.jpg)
![var tuples = [
[ "resolve", "done", jQuery.Callbacks("once memory"), "resolved" ],
[ "reject", "fail", jQuery.Callbacks("once memory"), "rejected" ],
[ "notify", "progress", jQuery.Callbacks("memory") ]
],
⾏行為 假設 狀態
0 1 2
Callback list](https://image.slidesharecdn.com/dollarsymbol-160114074405/85/Dollar-symbol-165-320.jpg)
![var tuples = [
[ "resolve", "done", jQuery.Callbacks("once memory"), "resolved" ],
[ "reject", "fail", jQuery.Callbacks("once memory"), "rejected" ],
[ "notify", "progress", jQuery.Callbacks("memory") ]
],
⾏行為 假設 狀態
0 1 2
Callback list
3](https://image.slidesharecdn.com/dollarsymbol-160114074405/85/Dollar-symbol-166-320.jpg)
![deferred = {};
// Add list-specific methods
jQuery.each( tuples, function( i, tuple ) {
var list = tuple[ 2 ],
stateString = tuple[ 3 ];
// promise[ done | fail | progress ] = list.add
promise[ tuple[1] ] = list.add;
// Handle state
if ( stateString ) {
list.add(function() {
// state = [ resolved | rejected ]
state = stateString;
// [ reject_list | resolve_list ].disable; progress_list.lock
}, tuples[ i ^ 1 ][ 2 ].disable, tuples[ 2 ][ 2 ].lock );
}
// deferred[ resolve | reject | notify ]
deferred[ tuple[0] ] = function() {
deferred[ tuple[0] + "With" ]( this === deferred ? promise : this, arguments );
return this;
};
deferred[ tuple[0] + "With" ] = list.fireWith;](https://image.slidesharecdn.com/dollarsymbol-160114074405/85/Dollar-symbol-173-320.jpg)
![list.add(function() {
// state = [ resolved | rejected ]
state = stateString;
// [ reject_list | resolve_list ].disable; progress_list.lock
}, tuples[ i ^ 1 ][ 2 ].disable, tuples[ 2 ][ 2 ].lock );
}
// deferred[ resolve | reject | notify ]
deferred[ tuple[0] ] = function() {
deferred[ tuple[0] + "With" ]( this === deferred ? promise : this, arguments );
return this;
};
deferred[ tuple[0] + "With" ] = list.fireWith;
});
// Make the deferred a promise
promise.promise( deferred );
// Call given func if any
if ( func ) {
func.call( deferred, deferred );
}
// All done!
return deferred;
},](https://image.slidesharecdn.com/dollarsymbol-160114074405/85/Dollar-symbol-174-320.jpg)
![Deferred: function( func ) {
var tuples = [
// action, add listener, listener list, final state
[ "resolve", "done", jQuery.Callbacks("once memory"), "resolved" ],
[ "reject", "fail", jQuery.Callbacks("once memory"), "rejected" ],
[ "notify", "progress", jQuery.Callbacks("memory") ]
],
state = "pending",
promise = {
state: function() {
return state;
},
always: function() {
deferred.done( arguments ).fail( arguments );
return this;
},
then: function( /* fnDone, fnFail, fnProgress */ ) {
var fns = arguments;
return jQuery.Deferred(function( newDefer ) {
jQuery.each( tuples, function( i, tuple ) {
var fn = jQuery.isFunction( fns[ i ] ) && fns[ i ];
// deferred[ done | fail | progress ] for forwarding actions to newDefer
deferred[ tuple[1] ](function() {
var returned = fn && fn.apply( this, arguments );
if ( returned && jQuery.isFunction( returned.promise ) ) {](https://image.slidesharecdn.com/dollarsymbol-160114074405/85/Dollar-symbol-176-320.jpg)
![then: function( /* fnDone, fnFail, fnProgress */ ) {
var fns = arguments;
return jQuery.Deferred(function( newDefer ) {
jQuery.each( tuples, function( i, tuple ) {
var fn = jQuery.isFunction( fns[ i ] ) && fns[ i ];
// deferred[ done | fail | progress ] for forwarding actions to newDefer
deferred[ tuple[1] ](function() {
var returned = fn && fn.apply( this, arguments );
if ( returned && jQuery.isFunction( returned.promise ) ) {
returned.promise()
.done( newDefer.resolve )
.fail( newDefer.reject )
.progress( newDefer.notify );
} else {
newDefer[ tuple[ 0 ] + "With" ]( this === promise ?
newDefer.promise() : this, fn ? [ returned ] : arguments );
}
});
});
fns = null;
}).promise();
},
// Get a promise for this deferred
// If obj is provided, the promise aspect is added to the object
promise: function( obj ) {
return obj != null ? jQuery.extend( obj, promise ) : promise;](https://image.slidesharecdn.com/dollarsymbol-160114074405/85/Dollar-symbol-177-320.jpg)
![.fail( newDefer.reject )
.progress( newDefer.notify );
} else {
newDefer[ tuple[ 0 ] + "With" ]( this === promise ?
newDefer.promise() : this, fn ? [ returned ] : arguments );
}
});
});
fns = null;
}).promise();
},
// Get a promise for this deferred
// If obj is provided, the promise aspect is added to the object
promise: function( obj ) {
return obj != null ? jQuery.extend( obj, promise ) : promise;
}
},
deferred = {};](https://image.slidesharecdn.com/dollarsymbol-160114074405/85/Dollar-symbol-178-320.jpg)
Uploaded byAaron Huang
Dollar symbol
The document discusses the history and evolution of jQuery, including major releases and changes over time. It describes how jQuery moved from a concatenated file structure to using RequireJS and module dependencies. It also covers changes in licensing between versions. Finally, it provides examples of how jQuery handles different selector types and error checks selector input.
More Related Content
Dollar symbol
- 1. Dollar Symbol 深⼊入淺出 AaronHuang 1
- 2. Dollar Symbol 深⼊入淺出 AaronHuang 2 只進不出
- 3. Aaron Huang • Sr.F2E @ • F2E Lead @ Faria Systems • Cloud Service Engineer @ Waveface • Xing “⾏行” - Evernote DevCup 2013 Top 6
- 4. https://jquery.org/history/ • Aug 22,2005 - John Resig first hints • Jan 14, 2006 - jQuery announced • Jan, 2006 - First jQuery Plugin • Aug, 2006 - v1.0 released • Jul, 2007 - jQuery UI announced • Aug, 2008 - jQuery Conference • Jan, 2009 - Sizzle.js • 歷史
- 5. https://jquery.org/history/ • Aug 22,2005 - John Resig first hints • Jan 14, 2006 - jQuery announced • Jan, 2006 - First jQuery Plugin • Aug, 2006 - v1.0 released • Jul, 2007 - jQuery UI announced • Aug, 2008 - jQuery Conference • Jan, 2009 - Sizzle.js • Nov, 2011 - jQuery Mobile 1.0 • Jan, 2013 - jQuery 1.9, 2.0-beta, jquery migrate • April 18, 2013 - jQuery 2.0 • Sep 19, 2013 - jQuery 1.11 and 2.1 Beta 1 Released 歷史
- 6. https://jquery.org/history/ • Aug, 2008- jQuery Conference • Jan, 2009 - Sizzle.js • Nov, 2011 - jQuery Mobile 1.0 • Jan, 2013 - jQuery 1.9, 2.0-beta, jquery migrate • April 18, 2013 - jQuery 2.0 • Sep 19, 2013 - jQuery 1.11 and 2.1 Beta 1 Released
- 7.
- 8. 1.9 release &2.0-beta
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15. File concat RequireJS ModuleDependency
- 16. File concat RequireJS ModuleDependency
- 17. File Concat (beforev1.11) •intro.js •core.js •selector.js •… •… •outro.js
- 18. File Concat (beforev1.11) •intro.js •core.js •selector.js •… •… •outro.js jQuery.jsConcat
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26. // $.fn.ready #1 $(document).ready(function(){ //callback content. });
- 27. // $.fn.ready #2 $(function(){ //callback content. }); // $.fn.ready #1 $(document).ready(function(){ // callback content. });
- 28.
- 29. // Kick offthe DOM ready check even if the user does not jQuery.ready.promise(); Challenge
- 30. // Kick offthe DOM ready check even if the user does not jQuery.ready.promise(); http://macb.in/do3E Challenge
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39. Sign the CLA (ContributorLicense Agreement) http://contribute.jquery.org/CLA/
- 40.
- 41.
- 42.
- 43. • vim • ctags •sliver_search or ack
- 44. Or Just useyour browser
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.
- 53.
- 54.
- 55.
- 56. window.jQuery = window.$= jQuery; https://github.com/jquery/jquery/blob/master/src/exports/global.js src/exports/global.js
- 57. // Define alocal copy of jQuery jQuery = function( selector, context ) { return new jQuery.fn.init( selector, context ); },
- 58.
- 59.
- 60. // A centralreference to the root jQuery(document) var rootjQuery, // A simple way to check for HTML strings // Prioritize #id over <tag> to avoid XSS via location.hash (#9521) // Strict HTML recognition (#11290: must start with <) rquickExpr = /^(?:s*(<[wW]+>)[^>]*|#([w-]*))$/, init = jQuery.fn.init = function( selector, context ) { var match, elem; // HANDLE: $(""), $(null), $(undefined), $(false) if ( !selector ) { return this; } // Handle HTML strings if ( typeof selector === "string" ) { if ( selector[0] === "<" && selector[ selector.length - 1 ] === ">" && selector.length >= 3 ) { // Assume that strings that start and end with <> are HTML and skip the regex check match = [ null, selector, null ]; } else { match = rquickExpr.exec( selector ); }
- 61. // A centralreference to the root jQuery(document) var rootjQuery, // A simple way to check for HTML strings // Prioritize #id over <tag> to avoid XSS via location.hash (#9521) // Strict HTML recognition (#11290: must start with <) rquickExpr = /^(?:s*(<[wW]+>)[^>]*|#([w-]*))$/, init = jQuery.fn.init = function( selector, context ) { var match, elem; // HANDLE: $(""), $(null), $(undefined), $(false) if ( !selector ) { return this; } // Handle HTML strings if ( typeof selector === "string" ) { if ( selector[0] === "<" && selector[ selector.length - 1 ] === ">" && selector.length >= 3 ) { // Assume that strings that start and end with <> are HTML and skip the regex check match = [ null, selector, null ]; } else { match = rquickExpr.exec( selector ); } rquickExpr = /^(?:s*(<[wW]+>)[^>]*|#([w-]*))$/
- 62. Selector 以外的狀況 // HANDLE:$(""), $(null), $(undefined), $(false) if ( !selector ) { return this; } // HANDLE: $(function) // Shortcut for document ready } else if ( jQuery.isFunction( selector ) ) { return typeof rootjQuery.ready !== "undefined" ? rootjQuery.ready( selector ) : // Execute immediately if ready is not present selector( jQuery ); }
- 63.
- 64. // A centralreference to the root jQuery(document) var rootjQuery, // A simple way to check for HTML strings // Prioritize #id over <tag> to avoid XSS via location.hash (#9521) // Strict HTML recognition (#11290: must start with <) rquickExpr = /^(?:s*(<[wW]+>)[^>]*|#([w-]*))$/, init = jQuery.fn.init = function( selector, context ) { var match, elem; // HANDLE: $(""), $(null), $(undefined), $(false) if ( !selector ) { return this; } // Handle HTML strings if ( typeof selector === "string" ) { if ( selector[0] === "<" && selector[ selector.length - 1 ] === ">" && selector.length >= 3 ) { // Assume that strings that start and end with <> are HTML and skip the regex check match = [ null, selector, null ]; } else { match = rquickExpr.exec( selector ); }
- 65. // A centralreference to the root jQuery(document) var rootjQuery, // A simple way to check for HTML strings // Prioritize #id over <tag> to avoid XSS via location.hash (#9521) // Strict HTML recognition (#11290: must start with <) rquickExpr = /^(?:s*(<[wW]+>)[^>]*|#([w-]*))$/, init = jQuery.fn.init = function( selector, context ) { var match, elem; // HANDLE: $(""), $(null), $(undefined), $(false) if ( !selector ) { return this; } // Handle HTML strings if ( typeof selector === "string" ) { if ( selector[0] === "<" && selector[ selector.length - 1 ] === ">" && selector.length >= 3 ) { // Assume that strings that start and end with <> are HTML and skip the regex check match = [ null, selector, null ]; } else { match = rquickExpr.exec( selector ); } rquickExpr = /^(?:s*(<[wW]+>)[^>]*|#([w-]*))$/
- 66.
- 67.
- 68.
- 69.
- 70. rquickExpr = /^(?:s*(<[wW]+>)[^>]*|#([w-]*))$/ Non-capturingGroup 1 Group 2
- 71. rquickExpr = /^(?:s*(<[wW]+>)[^>]*|#([w-]*))$/ Non-capturingGroup 1 Group 2
- 72. rquickExpr = /^(?:s*(<[wW]+>)[^>]*|#([w-]*))$/ Non-capturingGroup 1 Group 2 match = rquickExpr.exec( selector );
- 73. rquickExpr = /^(?:s*(<[wW]+>)[^>]*|#([w-]*))$/ Non-capturingGroup 1 Group 2 match = rquickExpr.exec( selector ); • match[0] = // Matched String
- 74. rquickExpr = /^(?:s*(<[wW]+>)[^>]*|#([w-]*))$/ Non-capturingGroup 1 Group 2 match = rquickExpr.exec( selector ); • match[0] = // Matched String • match[1] = // Tag html
- 75. rquickExpr = /^(?:s*(<[wW]+>)[^>]*|#([w-]*))$/ Non-capturingGroup 1 Group 2 match = rquickExpr.exec( selector ); • match[0] = // Matched String • match[1] = // Tag html • match[2] = // ID name
- 76. rquickExpr = /^(?:s*(<[wW]+>)[^>]*|#([w-]*))$/ Non-capturingGroup 1 Group 2 match = rquickExpr.exec( selector ); • match[0] = // Matched String • match[1] = // Tag html • match[2] = // ID name $('#id')
- 77. rquickExpr = /^(?:s*(<[wW]+>)[^>]*|#([w-]*))$/ Non-capturingGroup 1 Group 2 match = rquickExpr.exec( selector ); • match[0] = // Matched String • match[1] = // Tag html • match[2] = // ID name $('#id') $('<div/>')
- 78. // Handle HTMLstrings if ( typeof selector === "string" ) { if ( selector[0] === "<" && selector[ selector.length - 1 ] === ">" && selector.length >= 3 ) // Assume that strings that start and end with <> are HTML and skip the regex check match = [ null, selector, null ]; } else { match = rquickExpr.exec( selector ); }
- 79. // Match htmlor make sure no context is specified for #id if ( match && (match[1] || !context) ) { // HANDLE: $(html) -> $(array) if ( match[1] ) { context = context instanceof jQuery ? context[0] : context; // Option to run scripts is true for back-compat // Intentionally let the error be thrown if parseHTML is not present jQuery.merge( this, jQuery.parseHTML( match[1], context && context.nodeType ? context.ownerDocument || context : document, true ) ); // HANDLE: $(html, props) if ( rsingleTag.test( match[1] ) && jQuery.isPlainObject( context ) ) { for ( match in context ) { // Properties of context are called as methods if possible if ( jQuery.isFunction( this[ match ] ) ) { this[ match ]( context[ match ] ); // ...and otherwise set as attributes } else { this.attr( match, context[ match ] );
- 80. // ...and otherwiseset as attributes } else { this.attr( match, context[ match ] ); } } } return this; // HANDLE: $(#id) } else { elem = document.getElementById( match[2] ); // Support: Blackberry 4.6 // gEBID returns nodes no longer in the document (#6963) if ( elem && elem.parentNode ) { // Inject the element directly into the jQuery object this.length = 1; this[0] = elem; } this.context = document; this.selector = selector; return this; }
- 81. this.context = document; this.selector= selector; return this; } // HANDLE: $(expr, $(...)) } else if ( !context || context.jquery ) { return ( context || rootjQuery ).find( selector ); // HANDLE: $(expr, context) // (which is just equivalent to: $(context).find(expr) } else { return this.constructor( context ).find( selector ); }
- 82.
- 83.
- 84. function Sizzle( selector,context, results, seed )
- 85. node type Name Value ELEMENT_NODE1 ATTRIBUTE_NODE 2 TEXT_NODE 3 CDATA_SECTION_NODE 4 ENTITY_REFERENCE_NODE 5 ENTITY_NODE 6 PROCESSING_INSTRUCTION_NODE 7 COMMENT_NODE 8 DOCUMENT_NODE 9 DOCUMENT_TYPE_NODE 10 DOCUMENT_FRAGMENT_NODE 11 NOTATION_NODE 12
- 86. node type Name Value ELEMENT_NODE1 ATTRIBUTE_NODE 2 TEXT_NODE 3 CDATA_SECTION_NODE 4 ENTITY_REFERENCE_NODE 5 ENTITY_NODE 6 PROCESSING_INSTRUCTION_NODE 7 COMMENT_NODE 8 DOCUMENT_NODE 9 DOCUMENT_TYPE_NODE 10 DOCUMENT_FRAGMENT_NODE 11 NOTATION_NODE 12
- 87. var match, elem,m, nodeType, // QSA vars i, groups, old, nid, newContext, newSelector; if ( ( context ? context.ownerDocument || context : preferredDoc ) !== document ) { setDocument( context ); } context = context || document; results = results || []; nodeType = context.nodeType; if ( typeof selector !== "string" || !selector || nodeType !== 1 && nodeType !== 9 && nodeType !== 11 ) { return results; }
- 88. var match, elem,m, nodeType, // QSA vars i, groups, old, nid, newContext, newSelector; if ( ( context ? context.ownerDocument || context : preferredDoc ) !== document ) { setDocument( context ); } context = context || document; results = results || []; nodeType = context.nodeType; if ( typeof selector !== "string" || !selector || nodeType !== 1 && nodeType !== 9 && nodeType !== 11 ) { return results; }
- 89. if ( !seed&& documentIsHTML ) { // Try to shortcut find operations when possible (e.g., not under DocumentFragment) if ( nodeType !== 11 && (match = rquickExpr.exec( selector )) ) { // Speed-up: Sizzle("#ID") if ( (m = match[1]) ) { if ( nodeType === 9 ) { elem = context.getElementById( m ); // Check parentNode to catch when Blackberry 4.6 returns // nodes that are no longer in the document (jQuery #6963) if ( elem && elem.parentNode ) { // Handle the case where IE, Opera, and Webkit return items // by name instead of ID if ( elem.id === m ) { results.push( elem ); return results; } } else { return results; } } else { // Context is not a document
- 90. if ( !seed&& documentIsHTML ) { // Try to shortcut find operations when possible (e.g., not under DocumentFragment) if ( nodeType !== 11 && (match = rquickExpr.exec( selector )) ) { // Speed-up: Sizzle("#ID") if ( (m = match[1]) ) { if ( nodeType === 9 ) { elem = context.getElementById( m ); // Check parentNode to catch when Blackberry 4.6 returns // nodes that are no longer in the document (jQuery #6963) if ( elem && elem.parentNode ) { // Handle the case where IE, Opera, and Webkit return items // by name instead of ID if ( elem.id === m ) { results.push( elem ); return results; } } else { return results; } } else { // Context is not a document
- 91.
- 92.
- 93.
- 94.
- 95.
- 96.
- 97. rquickExpr = /^(?:#([w-]+)|(w+)|.([w-]+))$/ Group1 Group 2 Group 3
- 98. rquickExpr = /^(?:#([w-]+)|(w+)|.([w-]+))$/ Group1 Group 2 Group 3 match = rquickExpr.exec( selector );
- 99. rquickExpr = /^(?:#([w-]+)|(w+)|.([w-]+))$/ Group1 Group 2 Group 3 match = rquickExpr.exec( selector ); • match[0] = // Matched String
- 100. rquickExpr = /^(?:#([w-]+)|(w+)|.([w-]+))$/ Group1 Group 2 Group 3 match = rquickExpr.exec( selector ); • match[0] = // Matched String • match[1] = // ID name
- 101. rquickExpr = /^(?:#([w-]+)|(w+)|.([w-]+))$/ Group1 Group 2 Group 3 match = rquickExpr.exec( selector ); • match[0] = // Matched String • match[1] = // ID name • match[2] = // TAG name
- 102. rquickExpr = /^(?:#([w-]+)|(w+)|.([w-]+))$/ Group1 Group 2 Group 3 match = rquickExpr.exec( selector ); • match[0] = // Matched String • match[1] = // ID name • match[2] = // TAG name • match[3] = // CLASS name
- 103. rquickExpr = /^(?:#([w-]+)|(w+)|.([w-]+))$/ Group1 Group 2 Group 3 match = rquickExpr.exec( selector ); • match[0] = // Matched String • match[1] = // ID name • match[2] = // TAG name • match[3] = // CLASS name $(‘.class')
- 104. rquickExpr = /^(?:#([w-]+)|(w+)|.([w-]+))$/ Group1 Group 2 Group 3 match = rquickExpr.exec( selector ); • match[0] = // Matched String • match[1] = // ID name • match[2] = // TAG name • match[3] = // CLASS name $(‘.class') $('div')
- 105. if ( !seed&& documentIsHTML ) { // Try to shortcut find operations when possible (e.g., not under DocumentFragment) if ( nodeType !== 11 && (match = rquickExpr.exec( selector )) ) { // Speed-up: Sizzle("#ID") if ( (m = match[1]) ) { if ( nodeType === 9 ) { elem = context.getElementById( m ); // Check parentNode to catch when Blackberry 4.6 returns // nodes that are no longer in the document (jQuery #6963) if ( elem && elem.parentNode ) { // Handle the case where IE, Opera, and Webkit return items // by name instead of ID if ( elem.id === m ) { results.push( elem ); return results; } } else { return results; } } else { // Context is not a document
- 106. if ( !seed&& documentIsHTML ) { // Try to shortcut find operations when possible (e.g., not under DocumentFragment) if ( nodeType !== 11 && (match = rquickExpr.exec( selector )) ) { // Speed-up: Sizzle("#ID") if ( (m = match[1]) ) { if ( nodeType === 9 ) { elem = context.getElementById( m ); // Check parentNode to catch when Blackberry 4.6 returns // nodes that are no longer in the document (jQuery #6963) if ( elem && elem.parentNode ) { // Handle the case where IE, Opera, and Webkit return items // by name instead of ID if ( elem.id === m ) { results.push( elem ); return results; } } else { return results; } } else { // Context is not a document
- 107. } else { //Context is not a document if ( context.ownerDocument && (elem = context.ownerDocument.getElementById( m )) && contains( context, elem ) && elem.id === m ) { results.push( elem ); return results; } }
- 108. } else { //Context is not a document if ( context.ownerDocument && (elem = context.ownerDocument.getElementById( m )) && contains( context, elem ) && elem.id === m ) { results.push( elem ); return results; } } e.g.,$(‘body’).find(‘#id’)
- 109. // Speed-up: Sizzle("TAG") }else if ( match[2] ) { push.apply( results, context.getElementsByTagName( selector ) ); return results; // Speed-up: Sizzle(".CLASS") } else if ( (m = match[3]) && support.getElementsByClassName ) { push.apply( results, context.getElementsByClassName( m ) ); return results; } }
- 110. // Speed-up: Sizzle("TAG") }else if ( match[2] ) { push.apply( results, context.getElementsByTagName( selector ) ); return results; // Speed-up: Sizzle(".CLASS") } else if ( (m = match[3]) && support.getElementsByClassName ) { push.apply( results, context.getElementsByClassName( m ) ); return results; } }
- 111. var push =[].push, slice = [].slice;
- 113.
- 114.
- 115.
- 116. // QSA path if( support.qsa && (!rbuggyQSA || !rbuggyQSA.test( selector )) ) { nid = old = expando; newContext = context; newSelector = nodeType !== 1 && selector; // qSA works strangely on Element-rooted queries // We can work around this by specifying an extra ID on the root // and working up from there (Thanks to Andrew Dupont for the technique) // IE 8 doesn't work on object elements if ( nodeType === 1 && context.nodeName.toLowerCase() !== "object" ) { groups = tokenize( selector ); if ( (old = context.getAttribute("id")) ) { nid = old.replace( rescape, "$&" ); } else { context.setAttribute( "id", nid ); } nid = "[id='" + nid + "'] "; i = groups.length; while ( i-- ) { groups[i] = nid + toSelector( groups[i] ); } newContext = rsibling.test( selector ) && testContext( context.parentNode ) || context; newSelector = groups.join(","); }
- 117. Challenge // qSA worksstrangely on Element-rooted queries // We can work around this by specifying an extra ID on the root // and working up from there (Thanks to Andrew Dupont for the technique) // IE 8 doesn't work on object elements
- 118. http://macb.in/1fDSb Challenge // qSA worksstrangely on Element-rooted queries // We can work around this by specifying an extra ID on the root // and working up from there (Thanks to Andrew Dupont for the technique) // IE 8 doesn't work on object elements
- 119. // QSA path if( support.qsa && (!rbuggyQSA || !rbuggyQSA.test( selector )) ) { nid = old = expando; newContext = context; newSelector = nodeType !== 1 && selector; // qSA works strangely on Element-rooted queries // We can work around this by specifying an extra ID on the root // and working up from there (Thanks to Andrew Dupont for the technique) // IE 8 doesn't work on object elements if ( nodeType === 1 && context.nodeName.toLowerCase() !== "object" ) { groups = tokenize( selector ); if ( (old = context.getAttribute("id")) ) { nid = old.replace( rescape, "$&" ); } else { context.setAttribute( "id", nid ); } nid = "[id='" + nid + "'] "; i = groups.length; while ( i-- ) { groups[i] = nid + toSelector( groups[i] ); } newContext = rsibling.test( selector ) && testContext( context.parentNode ) || context; newSelector = groups.join(","); }
- 120. if ( newSelector) { try { push.apply( results, newContext.querySelectorAll( newSelector ) ); return results; } catch(qsaError) { } finally { if ( !old ) { context.removeAttribute("id"); } } } }
- 121.
- 122.
- 123.
- 125.
- 126.
- 127. • Callback • Event •Promise
- 128.
- 129.
- 130.
- 131.
- 132.
- 133.
- 134.
- 135.
- 136. jQuery.Deferred() • A constructorfunction that returns a chainable utility object with methods to register multiple callbacks into callback queues, invoke callback queues, and relay the success or failure state of any synchronous or asynchronous function. • jQuery Deferred is based on the CommonJS Promises/A design.
- 138.
- 139.
- 140.
- 141.
- 142.
- 143. • .ready • .ajax •.animate
- 144.
- 145.
- 146.
- 147.
- 148. 了解 Deferred • ⾏行為 •假設 • 狀態
- 149. 了解 Deferred • ⾏行為 •假設 • 狀態 (resolve, reject, notify)
- 150. 了解 Deferred • ⾏行為 •假設 • 狀態 (resolve, reject, notify) (done, fail, progress)
- 151. 了解 Deferred • ⾏行為 •假設 • 狀態 (resolve, reject, notify) (done, fail, progress) (resolved, rejected, pending)
- 153. • deferred.promise() ->state: pending
- 154. • deferred.promise() ->state: pending • deferred.resolve() -> deferred.done_stack -> state: resolved
- 155. • deferred.promise() ->state: pending • deferred.resolve() -> deferred.done_stack -> state: resolved • deferred.reject() -> deferred.fail_stack -> state: rejected
- 156.
- 157. Deferred: function( func) { var tuples = [ // action, add listener, listener list, final state [ "resolve", "done", jQuery.Callbacks("once memory"), "resolved" ], [ "reject", "fail", jQuery.Callbacks("once memory"), "rejected" ], [ "notify", "progress", jQuery.Callbacks("memory") ] ], state = "pending", promise = { state: function() { return state; }, always: function() { deferred.done( arguments ).fail( arguments ); return this; }, then: function( /* fnDone, fnFail, fnProgress */ ) { var fns = arguments; return jQuery.Deferred(function( newDefer ) { jQuery.each( tuples, function( i, tuple ) { var fn = jQuery.isFunction( fns[ i ] ) && fns[ i ]; // deferred[ done | fail | progress ] for forwarding actions to newDefer deferred[ tuple[1] ](function() { var returned = fn && fn.apply( this, arguments );
- 158. var tuples =[ [ "resolve", "done", jQuery.Callbacks("once memory"), "resolved" ], [ "reject", "fail", jQuery.Callbacks("once memory"), "rejected" ], [ "notify", "progress", jQuery.Callbacks("memory") ] ],
- 159. var tuples =[ [ "resolve", "done", jQuery.Callbacks("once memory"), "resolved" ], [ "reject", "fail", jQuery.Callbacks("once memory"), "rejected" ], [ "notify", "progress", jQuery.Callbacks("memory") ] ], ⾏行為
- 160. var tuples =[ [ "resolve", "done", jQuery.Callbacks("once memory"), "resolved" ], [ "reject", "fail", jQuery.Callbacks("once memory"), "rejected" ], [ "notify", "progress", jQuery.Callbacks("memory") ] ], ⾏行為 假設
- 161. var tuples =[ [ "resolve", "done", jQuery.Callbacks("once memory"), "resolved" ], [ "reject", "fail", jQuery.Callbacks("once memory"), "rejected" ], [ "notify", "progress", jQuery.Callbacks("memory") ] ], ⾏行為 假設 狀態
- 162. var tuples =[ [ "resolve", "done", jQuery.Callbacks("once memory"), "resolved" ], [ "reject", "fail", jQuery.Callbacks("once memory"), "rejected" ], [ "notify", "progress", jQuery.Callbacks("memory") ] ], ⾏行為 假設 狀態Callback list
- 163. var tuples =[ [ "resolve", "done", jQuery.Callbacks("once memory"), "resolved" ], [ "reject", "fail", jQuery.Callbacks("once memory"), "rejected" ], [ "notify", "progress", jQuery.Callbacks("memory") ] ], ⾏行為 假設 狀態 0 Callback list
- 164. var tuples =[ [ "resolve", "done", jQuery.Callbacks("once memory"), "resolved" ], [ "reject", "fail", jQuery.Callbacks("once memory"), "rejected" ], [ "notify", "progress", jQuery.Callbacks("memory") ] ], ⾏行為 假設 狀態 0 1 Callback list
- 165. var tuples =[ [ "resolve", "done", jQuery.Callbacks("once memory"), "resolved" ], [ "reject", "fail", jQuery.Callbacks("once memory"), "rejected" ], [ "notify", "progress", jQuery.Callbacks("memory") ] ], ⾏行為 假設 狀態 0 1 2 Callback list
- 166. var tuples =[ [ "resolve", "done", jQuery.Callbacks("once memory"), "resolved" ], [ "reject", "fail", jQuery.Callbacks("once memory"), "rejected" ], [ "notify", "progress", jQuery.Callbacks("memory") ] ], ⾏行為 假設 狀態 0 1 2 Callback list 3
- 167.
- 168. 想⼀一想 • Deferred 會建構⼀一個全新並獨⽴立的callbacks list
- 169. 想⼀一想 • Deferred 會建構⼀一個全新並獨⽴立的callbacks list • 三個⾏行為定義的 function 幾乎⼀一樣
- 170. 想⼀一想 • Deferred 會建構⼀一個全新並獨⽴立的callbacks list • 三個⾏行為定義的 function 幾乎⼀一樣 • Callbacks list 提供了所有的必要⽅方法, 包含 add, remove, fire, disable
- 171. 想⼀一想 • Deferred 會建構⼀一個全新並獨⽴立的callbacks list • 三個⾏行為定義的 function 幾乎⼀一樣 • Callbacks list 提供了所有的必要⽅方法, 包含 add, remove, fire, disable • Resolve 跟 Reject 是相對的
- 172. 想⼀一想 • Deferred 會建構⼀一個全新並獨⽴立的callbacks list • 三個⾏行為定義的 function 幾乎⼀一樣 • Callbacks list 提供了所有的必要⽅方法, 包含 add, remove, fire, disable • Resolve 跟 Reject 是相對的 • resolve() 與 reject() 其中⼀一⽅方作動, 另⼀一個的 callbacks 則觸發 .disabled()
- 173. deferred = {}; //Add list-specific methods jQuery.each( tuples, function( i, tuple ) { var list = tuple[ 2 ], stateString = tuple[ 3 ]; // promise[ done | fail | progress ] = list.add promise[ tuple[1] ] = list.add; // Handle state if ( stateString ) { list.add(function() { // state = [ resolved | rejected ] state = stateString; // [ reject_list | resolve_list ].disable; progress_list.lock }, tuples[ i ^ 1 ][ 2 ].disable, tuples[ 2 ][ 2 ].lock ); } // deferred[ resolve | reject | notify ] deferred[ tuple[0] ] = function() { deferred[ tuple[0] + "With" ]( this === deferred ? promise : this, arguments ); return this; }; deferred[ tuple[0] + "With" ] = list.fireWith;
- 174. list.add(function() { // state= [ resolved | rejected ] state = stateString; // [ reject_list | resolve_list ].disable; progress_list.lock }, tuples[ i ^ 1 ][ 2 ].disable, tuples[ 2 ][ 2 ].lock ); } // deferred[ resolve | reject | notify ] deferred[ tuple[0] ] = function() { deferred[ tuple[0] + "With" ]( this === deferred ? promise : this, arguments ); return this; }; deferred[ tuple[0] + "With" ] = list.fireWith; }); // Make the deferred a promise promise.promise( deferred ); // Call given func if any if ( func ) { func.call( deferred, deferred ); } // All done! return deferred; },
- 175.
- 176. Deferred: function( func) { var tuples = [ // action, add listener, listener list, final state [ "resolve", "done", jQuery.Callbacks("once memory"), "resolved" ], [ "reject", "fail", jQuery.Callbacks("once memory"), "rejected" ], [ "notify", "progress", jQuery.Callbacks("memory") ] ], state = "pending", promise = { state: function() { return state; }, always: function() { deferred.done( arguments ).fail( arguments ); return this; }, then: function( /* fnDone, fnFail, fnProgress */ ) { var fns = arguments; return jQuery.Deferred(function( newDefer ) { jQuery.each( tuples, function( i, tuple ) { var fn = jQuery.isFunction( fns[ i ] ) && fns[ i ]; // deferred[ done | fail | progress ] for forwarding actions to newDefer deferred[ tuple[1] ](function() { var returned = fn && fn.apply( this, arguments ); if ( returned && jQuery.isFunction( returned.promise ) ) {
- 177. then: function( /*fnDone, fnFail, fnProgress */ ) { var fns = arguments; return jQuery.Deferred(function( newDefer ) { jQuery.each( tuples, function( i, tuple ) { var fn = jQuery.isFunction( fns[ i ] ) && fns[ i ]; // deferred[ done | fail | progress ] for forwarding actions to newDefer deferred[ tuple[1] ](function() { var returned = fn && fn.apply( this, arguments ); if ( returned && jQuery.isFunction( returned.promise ) ) { returned.promise() .done( newDefer.resolve ) .fail( newDefer.reject ) .progress( newDefer.notify ); } else { newDefer[ tuple[ 0 ] + "With" ]( this === promise ? newDefer.promise() : this, fn ? [ returned ] : arguments ); } }); }); fns = null; }).promise(); }, // Get a promise for this deferred // If obj is provided, the promise aspect is added to the object promise: function( obj ) { return obj != null ? jQuery.extend( obj, promise ) : promise;
- 178. .fail( newDefer.reject ) .progress(newDefer.notify ); } else { newDefer[ tuple[ 0 ] + "With" ]( this === promise ? newDefer.promise() : this, fn ? [ returned ] : arguments ); } }); }); fns = null; }).promise(); }, // Get a promise for this deferred // If obj is provided, the promise aspect is added to the object promise: function( obj ) { return obj != null ? jQuery.extend( obj, promise ) : promise; } }, deferred = {};
- 179.
- 180.
- 181. done • deferred 對象始終是同⼀一個 •done 定義的 callback 都在同⼀一個 stack list • resolve 之後 callbacks 是近乎同時呼叫 • 不應該預期 callbacks 會照順序執⾏行
- 182. then • 每次都會建構⼀一個新的 deferred物件 • then 定義的 callback 都是在⼀一個獨⽴立的 callbacks list • 順序呼叫多次不同 deferred 物件的 resolved • 預期是循序執⾏行
- 183.
- 184.
- 185.
- 186.
- 188.
- 189.
- 190.
- 191.