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 

在 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 $("#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 }

这样，对于页面上的 id 为 msg 的元素，就可以通过下面的代码注册一个 click 事件处理函数。

 // 事件操作
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 );
               });
          }
  }
);

 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 };

五、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 }

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 )

在页面中，可以如下使用。

 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 

前几篇文章中的示例代码，去掉了几个 bug, 这里一起提供下载。

jQuery 核心模拟的代码

jQuery 数据管理的代码

jQuery 事件处理的代码

jQuery ajax 模拟代码

jQuery extend 的代码

测试页面：

 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>