jQuery1.4.1 代码分析(1核心函数)

学习一段时间了,算是总结一下吧.有部分暂时不能完全看明白.用"?"标出

/*
 * jQuery1.4.1 代码分析 isw2 zhoux
 */
//jQuery 核心函数
(function( window, undefined ) {
	var jQuery = function( selector, context ) {// jQuery 的构造方法(初始化过程调用4次)
		return new jQuery.fn.init( selector, context );// 调用init 方法
	};
	jQuery.fn = jQuery.prototype = {// 这里声明jQuery.fn 是jQuery.prototype 的简写
		init: function( selector, context ) {
			if ( !selector ) {// jQuery(),$():返回空jQuery 对象
				return this;
			}
			if ( selector.nodeType ) {// jQuery(elements),$(elements):调用将DOM元素转化为jQuery对象。
				this.context = this[0] = selector;
				this.length = 1;
				return this;
			}
			if ( typeof selector === "string" ) {// 这里注意==(等于,比较时会转型)和===(完全等于,比较时不会转型)的区别
				match = quickExpr.exec( selector );//匹配/^[^<]*(<[\w\W]+>)[^>]*$|^#([\w-]+)$/, match[1]即<[\w\W]+>)  为HTML 字符串
				if ( match && (match[1] || !context) ) {
					if ( match[1] ) {//如果是HTML 
						doc = (context ? context.ownerDocument || context : document);
						ret = rsingleTag.exec( selector );//匹配/^<(\w+)\s*\/?>(?:<\/\1>)?$/
						if ( ret ) {
							if ( jQuery.isPlainObject( context ) ) {//jQuery(html, props):创建由 jQuery 对象包装的 DOM 元素。同时设置属性、事件等。
								selector = [ document.createElement( ret[1] ) ];//使用document创建元素
								jQuery.fn.attr.call( selector, context, true );//设置元素属性(props)
							} else {
								selector = [ doc.createElement( ret[1] ) ];//使用指定context创建元素
							}
						} else {//?
							ret = buildFragment( [ match[1] ], [ doc ] );
							selector = (ret.cacheable ? ret.fragment.cloneNode(true) : ret.fragment).childNodes;
						}
					}else{//#id
						elem = document.getElementById( match[2] );//根据id 查找元素
						if ( elem ) {
							if ( elem.id !== match[2] ) {//如果element id 和查询不一致
								return rootjQuery.find( selector );//rootjQuery = jQuery(document),这里相当于$(document).find(selector)
							}
							//包含当前元素
							this.length = 1;
							this[0] = elem;
						}
						this.context = document;
						this.selector = selector;
						return this;
					}
				} else if ( !context && /^\w+$/.test( selector ) ) {//根据tagName 查找
					this.selector = selector;
					this.context = document;
					selector = document.getElementsByTagName( selector );
				} else if ( !context || context.jquery ) {//用于$(expr, $(...)),即context 为jQuery对象
					return (context || rootjQuery).find( selector );
				} else {//jQuery(expression, [context]):这个函数接收一个包含 CSS 选择器的字符串，然后用这个字符串去匹配一组元素。
					return jQuery( context ).find( selector );
				}
			} else if ( jQuery.isFunction( selector ) ) {
				return rootjQuery.ready( selector );// jQuery(callback),$(callback):$(document).ready()的简写
			}
			if (selector.selector !== undefined) {// ?
				this.selector = selector.selector;
				this.context = selector.context;
			}
			return jQuery.isArray( selector ) ?// ?
				this.setArray( selector ) :
				jQuery.makeArray( selector, this );
		}
	}
	window.jQuery = window.$ = jQuery;// 这里声明window.jQuery ,window.$为jQuery的简写
})(window);// 这里类似于一个初始化方法的声明,页面加载后执行

评论

17 楼 fxsc 2010-08-09  

62. 应该是传入的如果是jquery对象，则把this指向传入的对象
66. 应该是传入一组dom对象

16 楼 一醉而过 2010-07-14  

看源码有点难度! 好好学习ＪＳ，不过高手都去看源码了～

15 楼 MrPengPeng 2010-07-13  

楼主 太刻苦了 ！注释 都写的 很详细 ！谢谢了！！下载看看 ！分享  一下

14 楼 yangzelin_job09 2010-07-13  

楼主分析的还是很详细的，非常适合不想自己分析代码的人。

13 楼 yining159 2010-07-12  

=。=竟然连谢都不可以。。。 收藏下 楼主辛苦

12 楼 rmn190 2010-07-12  

8错， 赞一下！

11 楼 monsterjiao 2010-07-12  

感谢分享。

10 楼 congdepeng 2010-07-12  

js提供了mechanism 而jQuery提供了policy

9 楼 caowei3047 2010-07-12  

不错的资料

8 楼 jsj_064 2010-07-12  

看源码还是很有难度的，顶楼主

7 楼 forgood 2010-07-11  

谢谢ls的分享，我正在学习jquery。。。。。。

6 楼 forgood 2010-07-11  

使用比较容易，但是想搞懂源码还是需要下功夫的。

5 楼 foohsinglong 2010-07-10  

JQuery本来就是JS框架......核心也就是把JS简化而已...

4 楼 tou3921 2010-07-10  

js基础不够，跟lz学学

3 楼 fengjidao 2010-07-09  

不错，赞一个

2 楼 yolio2003 2010-07-09  

下了 慢慢看  感谢分享

1 楼 albinhdk 2010-07-09  

楼主的无私奉献值得赞扬。
学习楼主的专研精神！