首页 > 代码库 > 自制jQuery(3)
自制jQuery(3)
1 (function( window, undefined ) { 2 var jQuery = (function(){ 3 var jQuery = function(selector){ 4 return new jQuery.fn.init(selector); 5 }; 6 7 //这里fn是prototype的别名,后面的代码扩展fn就是扩展prototype,fn写起来简短 8 //如果后面引用了大量的prototype,prototype因为是关键字,还不能被压缩 9 jQuery.fn = jQuery.prototype = { 10 constructor: jQuery, 11 //这是一个构造函数 12 init: function(selector, context){ 13 var root; 14 //如果没有root,就从document开始查找 15 root = context || document; 16 // 17 var parts = selector.split(" "), //以空格分离选择器 18 query = parts[0], //取出第一段结果 19 //slice返回从第1项到最后一项组成的一个新数组 20 //join把数组中的每个元素转换为字符串,并且用空格连接起来,形成一个String对象 21 rest = parts.slice(1).join(" "), 22 elems = root.getElementsByTagName(query), //查找匹配第一段选择器的元素 23 results = []; //初始化一个数组,用于保存查询结果 24 25 for(var i = 0; i < elems.length; i++){ 26 if(rest){ 27 //递归查找,以elems[i]为上下文,以rest为选择器表达式 28 //concat会创建一个原数组的副本,并将find的结果添加到results末尾,,这里又将这个副本的引用存回results 29 results = results.concat(find(rest, elems[i])); 30 } 31 else{ 32 //将查找到的元素保存在results数组上 33 results.push(elems[i]); 34 } 35 } 36 //真正的jQuery返回的是不是Array对象,是一个类数组对象 37 return results;//返回Array对象 38 39 } 40 }; 41 jQuery.fn.init.prototype = jQuery.fn; 42 jQuery.extend = jQuery.fn.extend = function(){ 43 var ob = arguments[0]; 44 for(var p in ob){ 45 if(ob.hasOwnProperty(p) && (!this.hasOwnProperty(p))){ 46 this[p]=ob[p]; 47 } 48 } 49 }; 50 51 //用于扩展全局对象,所以不用jQuery.fn.extend 52 jQuery.extend({ 53 isFunction: function () { 54 if(typeof arguments[0] == "function") 55 return true; 56 else 57 return false; 58 } 59 }); 60 61 jQuery.extend({ 62 isFrom:function(){ 63 return argument[0].constructor == arguments[1]; 64 //return arguments[0] instanceof arguments[1]; 65 }}); 66 67 68 jQuery.extend({ 69 each:function(obj,callback){ 70 for(var i = 0; i < obj.length; i++){ 71 callback.call(obj || null, obj[i], i, obj); 72 } 73 } 74 }); 75 /* 76 对于HTML文档,getElementsByTagName返回的是一个HTMLCollection对象,该对象和NodeLIst对象很类似,该函数是用C++实现的 77 详见《JS高程》P257 78 return jQuery.makeArray(document.getElementsByTagName(selector)); 79 */ 80 jQuery.extend({ 81 makeArray:function( array, results ){ 82 //array是HTMLCollection对像 83 array = Array.prototype.slice.call( array, 0 ); 84 if ( results ) { 85 results.push.apply( results, array ); 86 return results; 87 } 88 89 return array; 90 } 91 }); 92 return jQuery; 93 })(); 94 window.jQuery = window.$ = jQuery; 95 })(window);
目前仅支持标签选择器,如“div", "div p"。而且$("div")返回的是Array对象,和实际的jQuery不同
自制jQuery(3)
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。