最近又看了一下 jQuery 1.4.2, 为了便于领略,将 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 // 用来搜查是否是一个 id 13 idExpr = /^#([w-]+)$/; 14 15 // 配置 jQuery 的原型工具, 用于全部 jQuery 工具共享 16 jQuery.fn = jQuery.prototype = { // #74 17 18 length: 0, // #190 19 20 jquery: "1.4.2", // # 187 21 22 // 这是一个示例,仅仅提供两种选择方法:id 和标志名 23 init: function (selector, context) { // #75 24 25 // Handle HTML strings 26 if (typeof selector === "string") { 27 // Are we dealing with HTML string or an ID? 28 match = idExpr.exec(selector); 29 30 // Verify a match, and that no context was specified for #id 31 if (match && match[1]) { 32 var elem = document.getElementById(match[1]); 33 if (elem) { 34 this.length = 1; 35 this[0] = elem; 36 } 37 } 38 else { 39 // 直接行使标志名 40 var nodes = document.getElementsByTagName(selector); 41 for (var l = nodes.length, j = 0; j < l; j++) { 42 this[j] = nodes[j]; 43 } 44 this.length = nodes.length; 45 } 46 47 this.context = document; 48 this.selector = selector; 49 50 return this; 51 } 52 }, 53 54 // 代表的 DOM 工具的个数 55 size: function () { // #193 56 return this.length; 57 }, 58 59 // 用来配置 css 样式 60 css: function (name, value) { // #4564 61 this.each( 62 function (name, value) { 63 this.style[name] = value; 64 }, 65 arguments // 现实的参数以数组的情势转达 66 ); 67 return this; 68 }, 69 70 // 用来配置文本内容 71 text: function (val) { // #3995 72 if (val) { 73 this.each(function () { 74 this.innerHTML = val; 75 }, 76 arguments // 现实的参数以数组的情势转达 77 ) 78 } 79 return this; 80 }, 81 82 // 用来对全部的 DOM 工具举办操纵 83 // callback 自界说的回调函数 84 // args 自界说的参数 85 each: function (callback, args) { // #244 86 return jQuery.each(this, callback, args); 87 } 88 89 } 90 91 // init 函数的原型也就是 jQuery 的原型 92 jQuery.fn.init.prototype = jQuery.prototype; // #303 93 94 // 用来遍历 jQuery 工具中包括的元素 95 jQuery.each = function (object, callback, args) { // #550 96 97 var i = 0, length = object.length; 98 99 // 没有提供参数 100 if (args === undefined) { 101 102 for (var value = object[0]; 103 i < length && callback.call(value, i, value) !== false; 104 value = object[++i]) 105 { } 106 } 107 108 else { 109 for (; i < length; ) { 110 if (callback.apply(object[i++], args) === false) { 111 break; 112 } 113 } 114 } 115 } 116
在 jQuery 中, jQuery 工具现实上是一个仿数组的工具,代表通过选择器获得的全部 DOM 工具的荟萃,它像数组一样有 length 属性,暗示代表的 DOM 工具的个数,还可以通过下标举办遍历。
95 行的 jQuery.each 是 jQuery 顶用来遍历这个仿数组,对个中的每个元素举办遍历处理赏罚的根基要领,callback 暗示处理赏罚这个 DOM 工具的函数。凡是环境下,我们并不行使这个要领,而是行使 jQuery 工具的 each 要领举办遍历。jQuery 工具的 css 和 text 要领在内部现实上行使 jQuery 工具的 each 要领对所选择的元素举办处理赏罚。
这些函数及工具的相关见:jQuery 原型相关图
下面的剧本行使这个剧本库。
1 // 原型操纵 2 $("h1").text("Hello, world.").css("color", "green");
原文:http://www.cnblogs.com/haogj/archive/2010/08/01/1789712.html (编辑:河北网)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!
|