jQuery源码解析2(Core)
我们知道 $('#id') 或 jQuery('#id') 将会返回一个对象， 这个对象的构造函数是：jQuery.fn.init
- jQuery = window.jQuery = window.$ = function( selector, context ) {
- return new jQuery.fn.init( selector, context );
- },
jQuery = window.jQuery = window.$ = function( selector, context ) {
return new jQuery.fn.init( selector, context );
},
- jQuery.fn.init.prototype = jQuery.fn;
jQuery.fn.init.prototype = jQuery.fn;
让我们先看看 jQuery.fn.init
- jQuery.fn = jQuery.prototype = {
- init: function( selector, context ) {
- selector = selector || document;
jQuery.fn = jQuery.prototype = {
init: function( selector, context ) {
selector = selector || document;
selector 可以指定不同的数据类型，我们一个一个来：
1. jQuery(element); // an html dom element
- // Handle $(DOMElement)
- if ( selector.nodeType ) {
- this[0] = selector;
- this.length = 1;
- this.context = selector;
- return this;
- }
// Handle $(DOMElement)
if ( selector.nodeType ) {
this[0] = selector;
this.length = 1;
this.context = selector;
return this;
}
所以我们可以这样使用：
var elem = $(element); // 用于包装一个html dom元素, 以便使用jQuery操作它。
注意到以上代码，所以我们还可以像数组一样使用它：）
elem[0];// return html dom element
elem.length;//
2. jQuery(html, [context]), jQuery(elements, [context])
- if ( typeof selector === "string" ) {
- // Are we dealing with HTML string or an ID?
- var match = quickExpr.exec( selector );
- // Verify a match, and that no context was specified for #id
- if ( match && (match[1] || !context) ) {
- // HANDLE: $(html) -> $(array)
- if ( match[1] )
- selector = jQuery.clean( [ match[1] ], context );
if ( typeof selector === "string" ) {
// Are we dealing with HTML string or an ID?
var match = quickExpr.exec( selector );
// Verify a match, and that no context was specified for #id
if ( match && (match[1] || !context) ) {
// HANDLE: $(html) -> $(array)
if ( match[1] )
selector = jQuery.clean( [ match[1] ], context );
quickExpr 是一个正则式，用于匹配一个html string 或 id 字符串 (见第1篇)
以上部分处理这样的调用：
$('<div id="new-div" />')
稍微浏览一下jQuery.clean， 知道它解析字符串，返回 html dom 元素的数组。
解析之后， selector 是一个 html dom 元素的数组。
然后：
- return this.setArray(jQuery.isArray( selector ) ?
- selector :
- jQuery.makeArray(selector));
return this.setArray(jQuery.isArray( selector ) ? selector : jQuery.makeArray(selector));
// setArray 马上就会分析到（因为下面用到）
jQuery(elements, [context])
这个直接调用上面的setArray。
3. jQuery('#id')
如果是id字符串
- // HANDLE: $("#id")
- else {
- var elem = document.getElementById( match[3] );
- // Handle the case where IE and Opera return items
- // by name instead of ID
- if ( elem && elem.id != match[3] )
- return jQuery().find( selector );
- // Otherwise, we inject the element directly into the jQuery object
- var ret = jQuery( elem || [] );
- ret.context = document;
- ret.selector = selector;
- return ret;
- }
// HANDLE: $("#id")
else {
var elem = document.getElementById( match[3] );
// Handle the case where IE and Opera return items
// by name instead of ID
if ( elem && elem.id != match[3] )
return jQuery().find( selector );
// Otherwise, we inject the element directly into the jQuery object
var ret = jQuery( elem || [] );
ret.context = document;
ret.selector = selector;
return ret;
}
除去 IE 的 hack 部分
$('#id') 相当于：
var dom = document.getElementById('#id');
var elm = $(dom);
elm.context = document;
elm.selector = '#id'';
所以，使用 $('#id') 是非常快的，因为它直接调用 document.getElement 取得元素，不需要额外的解析。
//---
4. jQuery(callback);
- } else if ( jQuery.isFunction( selector ) )
- return jQuery( document ).ready( selector );
} else if ( jQuery.isFunction( selector ) ) return jQuery( document ).ready( selector );
- // 以下三个看喜欢选用。
- $(function() {...}) ;
- $(document).ready(function() {...});
- $().ready(function() {...});
// 以下三个看喜欢选用。
$(function() {...}) ;
$(document).ready(function() {...});
$().ready(function() {...});
5. jQuery(css_selector, [context]);
- if ( typeof selector === "string" ) {
- var match = quickExpr.exec( selector );
- if ( match && (match[1] || !context) ) {
- ...
- } else
- return jQuery( context ).find( selector );
if ( typeof selector === "string" ) {
var match = quickExpr.exec( selector );
if ( match && (match[1] || !context) ) {
...
} else
return jQuery( context ).find( selector );
如果是除id 以外的 css 选择器， 那么就把这个艰巨任务的任务交给
jQuery( context ).find( selector );
6. jQuery(jq)
- if ( selector.selector && selector.context ) {
- this.selector = selector.selector;
- this.context = selector.context;
- }
- return this.setArray(jQuery.isArray( selector ) ?
- selector :
- jQuery.makeArray(selector));
if ( selector.selector && selector.context ) {
this.selector = selector.selector;
this.context = selector.context;
}
return this.setArray(jQuery.isArray( selector ) ?
selector :
jQuery.makeArray(selector));
有时候我们这样：
var a = $('#id');
...
...
在某一个地方
$(a).click(...)
就是重复包装了一个jquery对象(有时候忘记了，是一个jq对象还是一个html dom)。
这个速度也挺快的，因为只是进行简单的引用赋值。
---
setArray很简单：
- setArray: function( elems ) {
- this.length = 0;
- Array.prototype.push.apply( this, elems );
- return this;
- }
setArray: function( elems ) {
this.length = 0;
Array.prototype.push.apply( this, elems );
return this;
}
所以我们可以像使用数组一样引用jQuery中的dom元素
