JQuery 原理
http://www.cnblogs.com/haogj/archive/2010/08/07/1794623.html
jQuery 的原型关系图
黄色的为对象，蓝色的为函数。
一、核心部分
核心部分实现了两种选择器，使用 id 和标记名，还可以提供 css 的设置，以及 text 的设置。
1 // # 表示在 jQuery 1.4.2 中对应的行数
2
3 // 定义变量 undefined 方便使用
4 var undefined = undefined;
5
6 // jQuery 是一个函数，其实调用 jQuery.fn.init 创建对象
7 var $ = jQuery = window.$ = window.jQuery // #19
8 = function (selector, context) {
9 return new jQuery.fn.init(selector, context);
10 },
11
12 // 定义 toString 变量引用 Object 原型的 toString
13 toString = Object.prototype.toString,
14
15 // 用来检查是否是一个 id
16 idExpr = /^#([\w-]+)$/;
17
18 // 设置 jQuery 的原型对象, 用于所有 jQuery 对象共享
19 jQuery.fn = jQuery.prototype = { // #74
20
21 length: 0, // #190
22
23 jquery: "1.4.2", // # 187
24
25 // 这是一个示例，仅仅提供两种选择方式：id 和标记名
26 init: function (selector, context) { // #75
27
28 // Handle HTML strings
29 if (typeof selector === "string") {
30 // Are we dealing with HTML string or an ID?
31 match = idExpr.exec(selector);
32
33 // Verify a match, and that no context was specified for #id
34 if (match && match[1]) {
35 var elem = document.getElementById(match[1]);
36 if (elem) {
37 this.length = 1;
38 this[0] = elem;
39 }
40 }
41 else {
42 // 直接使用标记名
43 var nodes = document.getElementsByTagName(selector);
44 for (var l = nodes.length, j = 0; j < l; j++) {
45 this[j] = nodes[j];
46 }
47 this.length = nodes.length;
48 }
49
50 this.context = document;
51 this.selector = selector;
52
53 return this;
54 }
55 },
56
57 // 代表的 DOM 对象的个数
58 size: function () { // #193
59 return this.length;
60 },
61
62 // 用来设置 css 样式
63 css: function (name, value) { // #4564
64 this.each(
65 function (name, value) {
66 this.style[name] = value;
67 },
68 arguments // 实际的参数以数组的形式传递
69 );
70 return this;
71 },
72
73 // 用来设置文本内容
74 text: function (val) { // #3995
75 if (val) {
76 this.each(function () {
77 this.innerHTML = val;
78 },
79 arguments // 实际的参数以数组的形式传递
80 )
81 }
82 return this;
83 },
84
85 // 用来对所有的 DOM 对象进行操作
86 // callback 自定义的回调函数
87 // args 自定义的参数
88 each: function (callback, args) { // #244
89 return jQuery.each(this, callback, args);
90 }
91
92 }
93
94 // init 函数的原型也就是 jQuery 的原型
95 jQuery.fn.init.prototype = jQuery.prototype; // #303
96
97 // 用来遍历 jQuery 对象中包含的元素
98 jQuery.each = function (object, callback, args) { // #550
99
100 var i = 0, length = object.length;
101
102 // 没有提供参数
103 if (args === undefined) {
104
105 for (var value = object[0];
106 i < length && callback.call(value, i, value) !== false;
107 value = object[++i])
108 { }
109 }
110
111 else {
112 for (; i < length; ) {
113 if (callback.apply(object[i++], args) === false) {
114 break;
115 }
116 }
117 }
118 }
119
2
3 // 定义变量 undefined 方便使用
4 var undefined = undefined;
5
6 // jQuery 是一个函数，其实调用 jQuery.fn.init 创建对象
7 var $ = jQuery = window.$ = window.jQuery // #19
8 = function (selector, context) {
9 return new jQuery.fn.init(selector, context);
10 },
11
12 // 定义 toString 变量引用 Object 原型的 toString
13 toString = Object.prototype.toString,
14
15 // 用来检查是否是一个 id
16 idExpr = /^#([\w-]+)$/;
17
18 // 设置 jQuery 的原型对象, 用于所有 jQuery 对象共享
19 jQuery.fn = jQuery.prototype = { // #74
20
21 length: 0, // #190
22
23 jquery: "1.4.2", // # 187
24
25 // 这是一个示例，仅仅提供两种选择方式：id 和标记名
26 init: function (selector, context) { // #75
27
28 // Handle HTML strings
29 if (typeof selector === "string") {
30 // Are we dealing with HTML string or an ID?
31 match = idExpr.exec(selector);
32
33 // Verify a match, and that no context was specified for #id
34 if (match && match[1]) {
35 var elem = document.getElementById(match[1]);
36 if (elem) {
37 this.length = 1;
38 this[0] = elem;
39 }
40 }
41 else {
42 // 直接使用标记名
43 var nodes = document.getElementsByTagName(selector);
44 for (var l = nodes.length, j = 0; j < l; j++) {
45 this[j] = nodes[j];
46 }
47 this.length = nodes.length;
48 }
49
50 this.context = document;
51 this.selector = selector;
52
53 return this;
54 }
55 },
56
57 // 代表的 DOM 对象的个数
58 size: function () { // #193
59 return this.length;
60 },
61
62 // 用来设置 css 样式
63 css: function (name, value) { // #4564
64 this.each(
65 function (name, value) {
66 this.style[name] = value;
67 },
68 arguments // 实际的参数以数组的形式传递
69 );
70 return this;
71 },
72
73 // 用来设置文本内容
74 text: function (val) { // #3995
75 if (val) {
76 this.each(function () {
77 this.innerHTML = val;
78 },
79 arguments // 实际的参数以数组的形式传递
80 )
81 }
82 return this;
83 },
84
85 // 用来对所有的 DOM 对象进行操作
86 // callback 自定义的回调函数
87 // args 自定义的参数
88 each: function (callback, args) { // #244
89 return jQuery.each(this, callback, args);
90 }
91
92 }
93
94 // init 函数的原型也就是 jQuery 的原型
95 jQuery.fn.init.prototype = jQuery.prototype; // #303
96
97 // 用来遍历 jQuery 对象中包含的元素
98 jQuery.each = function (object, callback, args) { // #550
99
100 var i = 0, length = object.length;
101
102 // 没有提供参数
103 if (args === undefined) {
104
105 for (var value = object[0];
106 i < length && callback.call(value, i, value) !== false;
107 value = object[++i])
108 { }
109 }
110
111 else {
112 for (; i < length; ) {
113 if (callback.apply(object[i++], args) === false) {
114 break;
115 }
116 }
117 }
118 }
119
在 jQuery 中， jQuery 对象实际上是一个仿数组的对象，代表通过选择器得到的所有 DOM 对象的集合，它像数组一样有 length 属性，表示代表的 DOM 对象的个数，还可以通过下标进行遍历。
95 行的 jQuery.each 是 jQuery 中用来遍历这个仿数组，对其中的每个元素进行遍历处理的基本方法，callback 表示处理这个 DOM 对象的函数。通常情况下，我们并不使用这个方法，而是使用 jQuery 对象的 each 方法进行遍历。jQuery 对象的 css 和 text 方法在内部实际上使用 jQuery 对象的 each 方法对所选择的元素进行处理。
二、数据部分
在 jQuery 中，可以对每一个 DOM 对象保存私有的数据。
这个数据当然要通过属性来进行存取，但是，有多个属性怎么办呢？，要定义多个属性吗？，属性的名字叫什么呢？会不会与其他的属性有冲突呢？
在 jQuery 中，针对 DOM 对象扩展的私有数据可以用一个对象来表示，多个数据就使用这个对象的多个属性来表示。为了能够通过 DOM 对象找到这个扩展数据对象，而不会与其他现有的属性冲突，在 jQuery 中通过 expando 这个常量表示扩展对象的属性名，这个 expando 的值是计算出来的。而这个属性的值就是用来找到扩展对象的键值。
例如，我们可以定义 expando 的值为 "jQuery1234" ，那么，我们可以为每个 DOM 对象增加这个名为 "jQuery1234" 的属性，这个属性的值可以是一个键，例如为 1000。
在 jQuery 对象上的 cache 用来保存所有对象扩展的对象，这个对象可以看作一个字典，属性名就是键值，所对应的值就是扩展数据对象。
也就是说，在 jQuery 对象的 cache 上，将会有一个 1000 的成员，这个成员引用的对象就是 1000 号 DOM 对象的私有扩展对象。1000 号成员的私有数据将被存在在这个对象上。
当一个 DOM 对象需要取得扩展数据的时候，首先通过对象的 expando 属性取得一个键值，然后通过这个键值到 jQuery.cache 中取得自己的扩展对象，然后在扩展对象上读写数据。
1 /// <reference path="jQuery-core.js" />
2
3 // 常用方法
4 function now() {
5 return (new Date).getTime();
6 }
7
8 // 扩充数据的属性名，动态生成，避免与已有的属性冲突
9 var expando = "jQuery" + now(), uuid = 0, windowData = {};
10 jQuery.cache = {};
11 jQuery.expando = expando;
12
13 // 数据管理，可以针对 DOM 对象保存私有的数据，可以读取保存的数据
14 jQuery.fn.data = function (key, value) {
15
16 // 读取
17 if (value === undefined) {
18 return jQuery.data(this[0], key);
19 }
20 else { // 设置
21
22 this.each(
23 function () {
24 jQuery.data(this, key, value);
25 }
26 );
27 }
28 }
29 // 移除数据，删除保存在对象上的数据
30 jQuery.fn.removeData = function (key) {
31 return this.each(function () {
32 jQuery.removeData(this, key);
33 })
34 }
35
36
37 // 为元素保存数据
38 jQuery.data = function (elem, name, data) { // #1001
39
40 // 取得元素保存数据的键值
41 var id = elem[expando], cache = jQuery.cache, thisCache;
42
43 // 没有 id 的情况下，无法取值
44 if (!id && typeof name === "string" && data === undefined) {
45 return null;
46 }
47
48 // Compute a unique ID for the element
49 // 为元素计算一个唯一的键值
50 if (!id) {
51 id = ++uuid;
52 }
53
54 // 如果没有保存过
55 if (!cache[id]) {
56 elem[expando] = id; // 在元素上保存键值
57 cache[id] = {}; // 在 cache 上创建一个对象保存元素对应的值
58 }
59
60 // 取得此元素的数据对象
61 thisCache = cache[id];
62
63 // Prevent overriding the named cache with undefined values
64 // 保存值
65 if (data !== undefined) {
66 thisCache[name] = data;
67 }
68
69 // 返回对应的值
70 return typeof name === "string" ? thisCache[name] : thisCache;
71
72 }
73
74 // 删除保存的数据
75 jQuery.removeData = function (elem, name) { // #1042
76
77 var id = elem[expando], cache = jQuery.cache, thisCache = cache[id];
78
79 // If we want to remove a specific section of the element's data
80 if (name) {
81 if (thisCache) {
82 // Remove the section of cache data
83 delete thisCache[name];
84
85 // If we've removed all the data, remove the element's cache
86 if (jQuery.isEmptyObject(thisCache)) {
87 jQuery.removeData(elem);
88 }
89 }
90
91 // Otherwise, we want to remove all of the element's data
92 } else {
93
94 delete elem[jQuery.expando];
95
96 // Completely remove the data cache
97 delete cache[id];
98 }
99 }
100
101 // 检查对象是否是空的
102 jQuery.isEmptyObject = function (obj) {
103 // 遍历元素的属性，只有要属性就返回假，否则返回真
104 for (var name in obj) {
105 return false;
106 }
107 return true;
108
109 }
110
111 // toString 是 jQuery 中定义的一个变量 #68
112 // hasOwnProperty #69
113
114 // 检查是否是一个函数
115 jQuery.isFunction = function (obj) {
116 return toString.call(obj) === "[object Function]";
117 }
118
119 // 检查是否为一个数组
120 jQuery.isArray = function( obj ) {
121 return toString.call(obj) === "[object Array]";
122 }
123
124 // 是否是纯粹的 js 对象，而不是 DOM 对象，或者 window 对象
125 jQuery.isPlainObject = function( obj ) {
126 // Must be an Object.
127 // Because of IE, we also have to check the presence of the constructor property.
128 // Make sure that DOM nodes and window objects don't pass through, as well
129 if ( !obj || toString.call(obj) !== "[object Object]" || obj.nodeType || obj.setInterval ) {
130 return false;
131 }
132
133 // Not own constructor property must be Object
134 if ( obj.constructor
135 && !hasOwnProperty.call(obj, "constructor")
136 && !hasOwnProperty.call(obj.constructor.prototype, "isPrototypeOf") ) {
137 return false;
138 }
139
140 // Own properties are enumerated firstly, so to speed up,
141 // if last one is own, then all properties are own.
142
143 var key;
144 for ( key in obj ) {}
145
146 return key === undefined || hasOwnProperty.call( obj, key );
147 }
148
2
3 // 常用方法
4 function now() {
5 return (new Date).getTime();
6 }
7
8 // 扩充数据的属性名，动态生成，避免与已有的属性冲突
9 var expando = "jQuery" + now(), uuid = 0, windowData = {};
10 jQuery.cache = {};
11 jQuery.expando = expando;
12
13 // 数据管理，可以针对 DOM 对象保存私有的数据，可以读取保存的数据
14 jQuery.fn.data = function (key, value) {
15
16 // 读取
17 if (value === undefined) {
18 return jQuery.data(this[0], key);
19 }
20 else { // 设置
21
22 this.each(
23 function () {
24 jQuery.data(this, key, value);
25 }
26 );
27 }
28 }
29 // 移除数据，删除保存在对象上的数据
30 jQuery.fn.removeData = function (key) {
31 return this.each(function () {
32 jQuery.removeData(this, key);
33 })
34 }
35
36
37 // 为元素保存数据
38 jQuery.data = function (elem, name, data) { // #1001
39
40 // 取得元素保存数据的键值
41 var id = elem[expando], cache = jQuery.cache, thisCache;
42
43 // 没有 id 的情况下，无法取值
44 if (!id && typeof name === "string" && data === undefined) {
45 return null;
46 }
47
48 // Compute a unique ID for the element
49 // 为元素计算一个唯一的键值
50 if (!id) {
51 id = ++uuid;
52 }
53
54 // 如果没有保存过
55 if (!cache[id]) {
56 elem[expando] = id; // 在元素上保存键值
57 cache[id] = {}; // 在 cache 上创建一个对象保存元素对应的值
58 }
59
60 // 取得此元素的数据对象
61 thisCache = cache[id];
62
63 // Prevent overriding the named cache with undefined values
64 // 保存值
65 if (data !== undefined) {
66 thisCache[name] = data;
67 }
68
69 // 返回对应的值
70 return typeof name === "string" ? thisCache[name] : thisCache;
71
72 }
73
74 // 删除保存的数据
75 jQuery.removeData = function (elem, name) { // #1042
76
77 var id = elem[expando], cache = jQuery.cache, thisCache = cache[id];
78
79 // If we want to remove a specific section of the element's data
80 if (name) {
81 if (thisCache) {
82 // Remove the section of cache data
83 delete thisCache[name];
84
85 // If we've removed all the data, remove the element's cache
86 if (jQuery.isEmptyObject(thisCache)) {
87 jQuery.removeData(elem);
88 }
89 }
90
91 // Otherwise, we want to remove all of the element's data
92 } else {
93
94 delete elem[jQuery.expando];
95
96 // Completely remove the data cache
97 delete cache[id];
98 }
99 }
100
101 // 检查对象是否是空的
102 jQuery.isEmptyObject = function (obj) {
103 // 遍历元素的属性，只有要属性就返回假，否则返回真
104 for (var name in obj) {
105 return false;
106 }
107 return true;
108
109 }
110
111 // toString 是 jQuery 中定义的一个变量 #68
112 // hasOwnProperty #69
113
114 // 检查是否是一个函数
115 jQuery.isFunction = function (obj) {
116 return toString.call(obj) === "[object Function]";
117 }
118
119 // 检查是否为一个数组
120 jQuery.isArray = function( obj ) {
121 return toString.call(obj) === "[object Array]";
122 }
123
124 // 是否是纯粹的 js 对象，而不是 DOM 对象，或者 window 对象
125 jQuery.isPlainObject = function( obj ) {
126 // Must be an Object.
127 // Because of IE, we also have to check the presence of the constructor property.
128 // Make sure that DOM nodes and window objects don't pass through, as well
129 if ( !obj || toString.call(obj) !== "[object Object]" || obj.nodeType || obj.setInterval ) {
130 return false;
131 }
132
133 // Not own constructor property must be Object
134 if ( obj.constructor
135 && !hasOwnProperty.call(obj, "constructor")
136 && !hasOwnProperty.call(obj.constructor.prototype, "isPrototypeOf") ) {
137 return false;
138 }
139
140 // Own properties are enumerated firstly, so to speed up,
141 // if last one is own, then all properties are own.
142
143 var key;
144 for ( key in obj ) {}
145
146 return key === undefined || hasOwnProperty.call( obj, key );
147 }
148
下面的脚本可以保存或者读取对象的扩展数据。
1 // 数据操作
2 $("#msg").data("name", "Hello, world.");
3 alert($("#msg").data("name"));
4 $("#msg").removeData("name");
5 alert($("#msg").data("name"));
2 $("#msg").data("name", "Hello, world.");
3 alert($("#msg").data("name"));
4 $("#msg").removeData("name");
5 alert($("#msg").data("name"));
三、 事件处理
在 jQuery 中，实际注册的事件处理函数是一个匿名的闭包函数，这个函数最终都是通过调用 jQuery.event.handle 进行处理的。
在对象的私有扩展对象上，专门增加了一个名为 events 的事件管理对象，在这个对象上每种事件分别对应一个同名的属性，这个属性的值是一个数组，针对这个事件的处理程序依次压入这个数组中，构成一个事件处理的列表。自定义的事件处理函数即被压入这个列表中。
在事件触发的时候，通过注册的匿名函数来执行 jQuery.event.handle ，由于使用了闭包，所以在这个函数中的 this 就是事件源对象，通过这个事件源对象找到对象的私有扩展数据，然后在 events 中找到对应的事件处理程序列表，最后，依次执行。
1 /// <reference path="jQuery-core.js" />
2 // #2076
3
4 // 用于生成事件处理函数的 id
5 jQuery.guid = 1;
6
7 // jQuery 的事件对象
8 jQuery.event = { // # 1555
9
10 // 为对象增加事件
11 // elem 增加事件的元素， type 事件的名称, handler 事件处理程序, data 事件相关的数据
12 add: function (elem, type, handler, data) {
13
14 var handleObjIn, handleObj;
15
16 // 确认函数有一个唯一的 ID
17 if (!handler.guid) {
18 handler.guid = jQuery.guid++;
19 }
20
21 // 取得这个元素所对应的缓存数据对象
22 var elemData = jQuery.data(elem);
23
24 // 取得元素对应的缓存对象上的事件对象和所有事件共用的处理程序
25 var events = elemData.events = elemData.events || {};
26 var eventHandle = elemData.handle;
27
28 // 是否已经有事件处理函数 handle 只有一个，都是使用 jQuery.event.handle
29 // 通过使用闭包，使得这个函数引用当前的事件对象，参数。
30 if (!eventHandle) {
31 elemData.handle = eventHandle = function () {
32 return jQuery.event.handle.apply(eventHandle.elem, arguments);
33 };
34 }
35
36 // 使得闭包处理程序可以找到事件源对象
37 eventHandle.elem = elem;
38
39 //
40 handleObj = { handler: handler, data: data};
41 handleObj.namespace = "";
42
43
44 handleObj.type = type;
45 handleObj.guid = handler.guid;
46
47 // 每种事件可以有一系列的处理程序，数组形式
48 var handlers = events[type],
49 special = jQuery.event.special[type] || {};
50
51 // Init the event handler queue
52 if (!handlers) {
53 handlers = events[type] = [];
54
55 // Check for a special event handler
56 // Only use addEventListener/attachEvent if the special
57 // events handler returns false
58 // 完成实际的事件注册
59 // 实际的事件处理函数是 eventHandle
60 if (!special.setup || special.setup.call(elem, data, namespaces, eventHandle) === false) {
61 // Bind the global event handler to the element
62 if (elem.addEventListener) {
63 elem.addEventListener(type, eventHandle, false);
64
65 } else if (elem.attachEvent) {
66 elem.attachEvent("on" + type, eventHandle);
67 }
68 }
69 }
70
71 // 自定义的处理函数在一个堆栈中，以后 jQuery.event.handle 到这里找到实际的处理程序
72 handlers.push(handleObj);
73
74 // Nullify elem to prevent memory leaks in IE
75 elem = null;
76 },
77
78 global: {},
79
80 // 真正的事件处理函数,
81 // 由于是通过 return jQuery.event.handle.apply(eventHandle.elem, arguments) 调用的
82 // 所以，此时的 this 就是事件源对象，event 是事件参数
83 handle: function (event) { // 1904
84 var all, handlers, namespaces, namespace, events;
85
86 event = window.event;
87 event.currentTarget = this;
88
89 // 在当前的事件对象上找到事件处理列表
90 var events = jQuery.data(this, "events"), handlers = events[event.type];
91
92 if (events && handlers) {
93 // Clone the handlers to prevent manipulation
94 handlers = handlers.slice(0);
95
96 for (var j = 0, l = handlers.length; j < l; j++) {
97 var handleObj = handlers[j];
98
99
100 // 取得注册事件时保存的参数
101 event.handler = handleObj.handler;
102 event.data = handleObj.data;
103 event.handleObj = handleObj;
104
105 var ret = handleObj.handler.apply(this, arguments);
106 }
107 }
108
109 return event.result;
110 },
111
112 // #2020
113 special: {}
114
115 }
116
117 // bind 函数定义
118 jQuery.fn.bind = function( type, fn)
119 {
120 var handler = fn;
121
122 // 调用 jQuery.event.add 添加事件
123 for (var i = 0, l = this.length; i < l; i++) {
124 jQuery.event.add(this[i], type, handler);
125 }
126 return this;
127 }
128
129 jQuery.fn.unbind = function (type, fn) {
130 // Handle object literals
131 if (typeof type === "object" && !type.preventDefault) {
132 for (var key in type) {
133 this.unbind(key, type[key]);
134 }
135
136 } else {
137 for (var i = 0, l = this.length; i < l; i++) {
138 jQuery.event.remove(this[i], type, fn);
139 }
140 }
141
142 return this;
143 }
144 // click 事件的注册方法
145 jQuery.fn.click = function (fn) {
146 this.bind("click", fn);
147 return this;
148 }
2 // #2076
3
4 // 用于生成事件处理函数的 id
5 jQuery.guid = 1;
6
7 // jQuery 的事件对象
8 jQuery.event = { // # 1555
9
10 // 为对象增加事件
11 // elem 增加事件的元素， type 事件的名称, handler 事件处理程序, data 事件相关的数据
12 add: function (elem, type, handler, data) {
13
14 var handleObjIn, handleObj;
15
16 // 确认函数有一个唯一的 ID
17 if (!handler.guid) {
18 handler.guid = jQuery.guid++;
19 }
20
21 // 取得这个元素所对应的缓存数据对象
22 var elemData = jQuery.data(elem);
23
24 // 取得元素对应的缓存对象上的事件对象和所有事件共用的处理程序
25 var events = elemData.events = elemData.events || {};
26 var eventHandle = elemData.handle;
27
28 // 是否已经有事件处理函数 handle 只有一个，都是使用 jQuery.event.handle
29 // 通过使用闭包，使得这个函数引用当前的事件对象，参数。
30 if (!eventHandle) {
31 elemData.handle = eventHandle = function () {
32 return jQuery.event.handle.apply(eventHandle.elem, arguments);
33 };
34 }
35
36 // 使得闭包处理程序可以找到事件源对象
37 eventHandle.elem = elem;
38
39 //
40 handleObj = { handler: handler, data: data};
41 handleObj.namespace = "";
42
43
44 handleObj.type = type;
45 handleObj.guid = handler.guid;
46
47 // 每种事件可以有一系列的处理程序，数组形式
48 var handlers = events[type],
49 special = jQuery.event.special[type] || {};
50
51 // Init the event handler queue
52 if (!handlers) {
53 handlers = events[type] = [];
54
55 // Check for a special event handler
56 // Only use addEventListener/attachEvent if the special
57 // events handler returns false
58 // 完成实际的事件注册
59 // 实际的事件处理函数是 eventHandle
60 if (!special.setup || special.setup.call(elem, data, namespaces, eventHandle) === false) {
61 // Bind the global event handler to the element
62 if (elem.addEventListener) {
63 elem.addEventListener(type, eventHandle, false);
64
65 } else if (elem.attachEvent) {
66 elem.attachEvent("on" + type, eventHandle);
67 }
68 }
69 }
70
71 // 自定义的处理函数在一个堆栈中，以后 jQuery.event.handle 到这里找到实际的处理程序
72 handlers.push(handleObj);
73
74 // Nullify elem to prevent memory leaks in IE
75 elem = null;
76 },
77
78 global: {},
79
80 // 真正的事件处理函数,
81 // 由于是通过 return jQuery.event.handle.apply(eventHandle.elem, arguments) 调用的
82 // 所以，此时的 this 就是事件源对象，event 是事件参数
83 handle: function (event) { // 1904
84 var all, handlers, namespaces, namespace, events;
85
86 event = window.event;
87 event.currentTarget = this;
88
89 // 在当前的事件对象上找到事件处理列表
90 var events = jQuery.data(this, "events"), handlers = events[event.type];
91
92 if (events && handlers) {
93 // Clone the handlers to prevent manipulation
94 handlers = handlers.slice(0);
95
96 for (var j = 0, l = handlers.length; j < l; j++) {
97 var handleObj = handlers[j];
98
99
100 // 取得注册事件时保存的参数
101 event.handler = handleObj.handler;
102 event.data = handleObj.data;
103 event.handleObj = handleObj;
104
105 var ret = handleObj.handler.apply(this, arguments);
106 }
107 }
108
109 return event.result;
110 },
111
112 // #2020
113 special: {}
114
115 }
116
117 // bind 函数定义
118 jQuery.fn.bind = function( type, fn)
119 {
120 var handler = fn;
121
122 // 调用 jQuery.event.add 添加事件
123 for (var i = 0, l = this.length; i < l; i++) {
124 jQuery.event.add(this[i], type, handler);
125 }
126 return this;
127 }
128
129 jQuery.fn.unbind = function (type, fn) {
130 // Handle object literals
131 if (typeof type === "object" && !type.preventDefault) {
132 for (var key in type) {
133 this.unbind(key, type[key]);
134 }
135
136 } else {
137 for (var i = 0, l = this.length; i < l; i++) {
138 jQuery.event.remove(this[i], type, fn);
139 }
140 }
141
142 return this;
143 }
144 // click 事件的注册方法
145 jQuery.fn.click = function (fn) {
146 this.bind("click", fn);
147 return this;
148 }
这样，对于页面上的 id 为 msg 的元素，就可以通过下面的代码注册一个 click 事件处理函数。
1 // 事件操作
2 $("#msg").click(
3 function () {
4 alert(this.innerHTML);
5 }
6 );
2 $("#msg").click(
3 function () {
4 alert(this.innerHTML);
5 }
6 );
四、重要的扩展函数 extend
在上两篇文章中，我们看到每次要通过 jQuery 的原型增加共享方法的时候，都需要通过 jQuery.fn 一个个进行扩展，非常麻烦，jQuery.fn.extend 提供了一个扩展机制，可以方便我们通过一个或者多个示例对象来扩展某个对象。如果没有指定被扩展的对象，那么将扩展到自己身上。
jQuery.extend 也可以通过 jQuery.fn.extend 使用， 在 jQuery 中使用很多，用来为一个目标对象扩展成员，扩展的成员来自于一系列参考对象。
这样，如果我们需要为 jQuery.fn 扩展成员 removeData，就可以这样进行。
jQuery.fn.extend(
{
removeData: function( key ) {
return this.each(function() {
jQuery.removeData( this, key );
});
}
}
);
{
removeData: function( key ) {
return this.each(function() {
jQuery.removeData( this, key );
});
}
}
);
extend 的源码如下，因为比较简单，所以没有做太多的精简。
1 /// <reference path="jQuery-core.js" />
2
3
4 jQuery.extend = jQuery.fn.extend = function () {
5 // copy reference to target object
6 var target = arguments[0] || {}, i = 1, length = arguments.length, deep = false, options, name, src, copy;
7
8 // 深拷贝情况，第一个参数为 boolean 类型，那么，表示深拷贝，第二个参数为目标对象
9 if (typeof target === "boolean") {
10 deep = target;
11 target = arguments[1] || {};
12 // skip the boolean and the target
13 i = 2;
14 }
15
16 // 如果目标不是对象也不是函数
17 if (typeof target !== "object" && !jQuery.isFunction(target)) {
18 target = {};
19 }
20
21 // 如果只有一个参数就是扩展自己
22 if (length === i) {
23 target = this;
24 --i;
25 }
26
27 // 遍历所有的参考对象，扩展到目标对象上
28 for (; i < length; i++) {
29 // Only deal with non-null/undefined values
30 if ((options = arguments[i]) != null) {
31 // Extend the base object
32 for (name in options) {
33 src = target[name];
34 copy = options[name];
35
36 // Prevent never-ending loop
37 if (target === copy) {
38 continue;
39 }
40
41 // Recurse if we're merging object literal values or arrays
42 if (deep && copy && (jQuery.isPlainObject(copy) || jQuery.isArray(copy))) {
43 var clone = src && (jQuery.isPlainObject(src) || jQuery.isArray(src)) ? src
44 : jQuery.isArray(copy) ? [] : {};
45
46 // Never move original objects, clone them
47 target[name] = jQuery.extend(deep, clone, copy);
48
49 // Don't bring in undefined values
50 } else if (copy !== undefined) {
51 target[name] = copy;
52 }
53 }
54 }
55 }
56
57 // Return the modified object
58 return target;
59 };
2
3
4 jQuery.extend = jQuery.fn.extend = function () {
5 // copy reference to target object
6 var target = arguments[0] || {}, i = 1, length = arguments.length, deep = false, options, name, src, copy;
7
8 // 深拷贝情况，第一个参数为 boolean 类型，那么，表示深拷贝，第二个参数为目标对象
9 if (typeof target === "boolean") {
10 deep = target;
11 target = arguments[1] || {};
12 // skip the boolean and the target
13 i = 2;
14 }
15
16 // 如果目标不是对象也不是函数
17 if (typeof target !== "object" && !jQuery.isFunction(target)) {
18 target = {};
19 }
20
21 // 如果只有一个参数就是扩展自己
22 if (length === i) {
23 target = this;
24 --i;
25 }
26
27 // 遍历所有的参考对象，扩展到目标对象上
28 for (; i < length; i++) {
29 // Only deal with non-null/undefined values
30 if ((options = arguments[i]) != null) {
31 // Extend the base object
32 for (name in options) {
33 src = target[name];
34 copy = options[name];
35
36 // Prevent never-ending loop
37 if (target === copy) {
38 continue;
39 }
40
41 // Recurse if we're merging object literal values or arrays
42 if (deep && copy && (jQuery.isPlainObject(copy) || jQuery.isArray(copy))) {
43 var clone = src && (jQuery.isPlainObject(src) || jQuery.isArray(src)) ? src
44 : jQuery.isArray(copy) ? [] : {};
45
46 // Never move original objects, clone them
47 target[name] = jQuery.extend(deep, clone, copy);
48
49 // Don't bring in undefined values
50 } else if (copy !== undefined) {
51 target[name] = copy;
52 }
53 }
54 }
55 }
56
57 // Return the modified object
58 return target;
59 };
五、ajax
对于 xhr 对象来说，我们主要通过异步方式访问服务器，在 onreadystatechange 事件中处理服务器回应的内容。简单的 xhr 使用如下所示。
1 // 创建 XHR 对象
2 var xhr;
3 if (window.XMLHttpRequest) {
4 xhr = new XMLHttpRequest();
5 }
6 else if (window.ActiveXObject) {
7 xhr = new ActiveXObject("Msxml2.XMLHTTP");
8 }
9 else {
10 throw new Error("Ajax is not supported by this browser");
11 }
12
13 function ready()
14 {
15 alert("Start......");
16
17 // 通过事件来处理异步请求
18 xhr.onreadystatechange = function()
19 {
20 if( xhr.readyState == 4 )
21 {
22 alert( "Ready.");
23 if( xhr.status == 200 )
24 {
25 alert("成功获得服务器返回的结果.");
26
27 // 请求结束之后，可以获取服务器返回的内容
28 alert( xhr.responseText );
29
30 // 获取服务器返回的 json 对象
31 var alice = eval( "(" + xhr.responseText + ")" );
32 alert( alice.name );
33 }
34 }
35 };
36
37 // 设置请求参数
38 xhr.open("get", "data.json" );
39 xhr.send( null );
40 }
2 var xhr;
3 if (window.XMLHttpRequest) {
4 xhr = new XMLHttpRequest();
5 }
6 else if (window.ActiveXObject) {
7 xhr = new ActiveXObject("Msxml2.XMLHTTP");
8 }
9 else {
10 throw new Error("Ajax is not supported by this browser");
11 }
12
13 function ready()
14 {
15 alert("Start......");
16
17 // 通过事件来处理异步请求
18 xhr.onreadystatechange = function()
19 {
20 if( xhr.readyState == 4 )
21 {
22 alert( "Ready.");
23 if( xhr.status == 200 )
24 {
25 alert("成功获得服务器返回的结果.");
26
27 // 请求结束之后，可以获取服务器返回的内容
28 alert( xhr.responseText );
29
30 // 获取服务器返回的 json 对象
31 var alice = eval( "(" + xhr.responseText + ")" );
32 alert( alice.name );
33 }
34 }
35 };
36
37 // 设置请求参数
38 xhr.open("get", "data.json" );
39 xhr.send( null );
40 }
jQuery 简单地包装了对 xhr 对象的使用，通过对 jQuery 对象增加常用的访问方法，然后，提供给 jQuery 对象来使用。
1 // 主要的扩展在 jQuery.ajax 中。
2 jQuery.extend({ // #6299
3 // 请求的默认参数
4 ajaxSettings: {
5 url: location.href,
6 type: "GET",
7 contentType: "application/x-www-form-urlencoded",
8 data: null,
9 xhr: window.XMLHttpRequest && (window.location.protocol !== "file:" || !window.ActiveXObject) ?
10 function () {
11 return new window.XMLHttpRequest();
12 } :
13 function () {
14 try {
15 return new window.ActiveXObject("Microsoft.XMLHTTP");
16 } catch (e) { }
17 }
18 },
19
20 // 用来设置 jQuery.ajaxSettings ，设置请求的参数
21 ajaxSetup: function (settings) {
22 jQuery.extend(jQuery.ajaxSettings, settings);
23 },
24
25 ajax: function (origSettings) { // 实际的 ajax 函数
26 var s = jQuery.extend(true, {}, jQuery.ajaxSettings, origSettings);
27
28 // 创建 xhr 对象
29 xhr = s.xhr();
30 // 回调函数
31 var onreadystatechange = xhr.onreadystatechange = function (isTimeout) {
32 if (xhr.readyState === 4) {
33 if (xhr.status == 200) {
34 s.success.call(origSettings, xhr.responseText);
35 }
36 }
37 };
38
39 // 设置请求参数
40 xhr.open(s.type, s.url);
41
42 // Send the data 发出请求
43 xhr.send(s.data);
44
45 // return XMLHttpRequest to allow aborting the request etc.
46 return xhr;
47 },
48
49 // 使用 get 方式发出 ajax 请求的方法
50 get: function (url, data, callback, type) {
51 // shift arguments if data argument was omited
52 if (jQuery.isFunction(data)) {
53 type = type || callback;
54 callback = data;
55 data = null;
56 }
57
58 return jQuery.ajax({
59 type: "GET",
60 url: url,
61 data: data,
62 success: callback,
63 dataType: type
64 });
65 }
66
67
68 }); // #6922
69
70 // 扩展 jQuery 对象，增加 load 方法
71 jQuery.fn.extend(
72 {
73 load: function (url) {
74 var self = this;
75 jQuery.get(url, function (data) {
76 self.each(function () {
77 this.innerHTML = data;
78 }
79 )
80 }
81 )
82 }
83 }
84 )
2 jQuery.extend({ // #6299
3 // 请求的默认参数
4 ajaxSettings: {
5 url: location.href,
6 type: "GET",
7 contentType: "application/x-www-form-urlencoded",
8 data: null,
9 xhr: window.XMLHttpRequest && (window.location.protocol !== "file:" || !window.ActiveXObject) ?
10 function () {
11 return new window.XMLHttpRequest();
12 } :
13 function () {
14 try {
15 return new window.ActiveXObject("Microsoft.XMLHTTP");
16 } catch (e) { }
17 }
18 },
19
20 // 用来设置 jQuery.ajaxSettings ，设置请求的参数
21 ajaxSetup: function (settings) {
22 jQuery.extend(jQuery.ajaxSettings, settings);
23 },
24
25 ajax: function (origSettings) { // 实际的 ajax 函数
26 var s = jQuery.extend(true, {}, jQuery.ajaxSettings, origSettings);
27
28 // 创建 xhr 对象
29 xhr = s.xhr();
30 // 回调函数
31 var onreadystatechange = xhr.onreadystatechange = function (isTimeout) {
32 if (xhr.readyState === 4) {
33 if (xhr.status == 200) {
34 s.success.call(origSettings, xhr.responseText);
35 }
36 }
37 };
38
39 // 设置请求参数
40 xhr.open(s.type, s.url);
41
42 // Send the data 发出请求
43 xhr.send(s.data);
44
45 // return XMLHttpRequest to allow aborting the request etc.
46 return xhr;
47 },
48
49 // 使用 get 方式发出 ajax 请求的方法
50 get: function (url, data, callback, type) {
51 // shift arguments if data argument was omited
52 if (jQuery.isFunction(data)) {
53 type = type || callback;
54 callback = data;
55 data = null;
56 }
57
58 return jQuery.ajax({
59 type: "GET",
60 url: url,
61 data: data,
62 success: callback,
63 dataType: type
64 });
65 }
66
67
68 }); // #6922
69
70 // 扩展 jQuery 对象，增加 load 方法
71 jQuery.fn.extend(
72 {
73 load: function (url) {
74 var self = this;
75 jQuery.get(url, function (data) {
76 self.each(function () {
77 this.innerHTML = data;
78 }
79 )
80 }
81 )
82 }
83 }
84 )
在页面中，可以如下使用。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title></title>
5 </head>
6 <body>
7 <input type="button" id="btn" value="Click me" />
8 <div id="msg">
9 </div>
10 <script src="jQuery-core.js" type="text/javascript"></script>
11 <script src="jQuery-event-2.js" type="text/javascript"></script>
12 <script src="jQuery-data.js" type="text/javascript"></script>
13 <script src="jQuery-extend.js" type="text/javascript"></script>
14 <script src="jQuery-ajax.js" type="text/javascript"></script>
15 <script type="text/javascript">
16
17 $("#btn").click(function () {
18 $("#msg").load("hello.txt");
19 })
20
21
22 </script>
23 </body>
24 </html>
25
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title></title>
5 </head>
6 <body>
7 <input type="button" id="btn" value="Click me" />
8 <div id="msg">
9 </div>
10 <script src="jQuery-core.js" type="text/javascript"></script>
11 <script src="jQuery-event-2.js" type="text/javascript"></script>
12 <script src="jQuery-data.js" type="text/javascript"></script>
13 <script src="jQuery-extend.js" type="text/javascript"></script>
14 <script src="jQuery-ajax.js" type="text/javascript"></script>
15 <script type="text/javascript">
16
17 $("#btn").click(function () {
18 $("#msg").load("hello.txt");
19 })
20
21
22 </script>
23 </body>
24 </html>
25
前几篇文章中的示例代码，去掉了几个 bug, 这里一起提供下载。
测试页面：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title></title>
5 </head>
6 <body>
7 <input type="button" id="btn" value="Click me" />
8 <div id="msg">
9 </div>
10 <script src="jQuery-core.js" type="text/javascript"></script>
11 <script src="jQuery-event-2.js" type="text/javascript"></script>
12 <script src="jQuery-data.js" type="text/javascript"></script>
13 <script src="jQuery-extend.js" type="text/javascript"></script>
14 <script src="jQuery-ajax.js" type="text/javascript"></script>
15 <script type="text/javascript">
16
17
18 $("#btn").click(function () {
19 alert("click");
20 $("#msg").load("hello.txt");
21 })
22
23
24 </script>
25 </body>
26 </html>
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title></title>
5 </head>
6 <body>
7 <input type="button" id="btn" value="Click me" />
8 <div id="msg">
9 </div>
10 <script src="jQuery-core.js" type="text/javascript"></script>
11 <script src="jQuery-event-2.js" type="text/javascript"></script>
12 <script src="jQuery-data.js" type="text/javascript"></script>
13 <script src="jQuery-extend.js" type="text/javascript"></script>
14 <script src="jQuery-ajax.js" type="text/javascript"></script>
15 <script type="text/javascript">
16
17
18 $("#btn").click(function () {
19 alert("click");
20 $("#msg").load("hello.txt");
21 })
22
23
24 </script>
25 </body>
26 </html>
