jquery源码学习
Posted PheonixHkbxoic
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery源码学习相关的知识，希望对你有一定的参考价值。
1 /** 2 * @FileName : iceDog 3 * @Author : PheonixHkbxoic 4 * @Mail : [email protected] 5 * @DateTime : 2016-04-23 14:55:33 6 * @Version : v1.0.0 7 * @Description: Description 8 */ 9 10 11 12 13 (function(window,undefined){ 14 var doc = window.document; 15 16 var _iceDog = function(selector){ 17 return new _iceDog.fn.init(selector);//每次使用_iceDog对象,都是全新的 18 }; 19 20 //原型 21 _iceDog.fn = _iceDog.prototype = { 22 //elems : [],//selector? []:_iceDog.prototype, 23 init : function(selector){ 24 this.elems = [];//初始化容器，每次创建的对象都是全新的 25 26 if(selector){ 27 if(typeof selector === ‘boolean‘){ 28 this.elems.push(selector==true? true:this); 29 }else if (typeof selector === ‘number‘) { 30 this.elems.push(selector); 31 }else if (typeof selector === ‘function‘) { 32 //用回调函数处理 33 selector.call(this,this); 34 }else if (typeof selector === ‘string‘ ){ 35 if(selector.match(/^\#\S{3,}/)){//#id 36 this.elems.push(doc.getElementById(selector.substring(1))) 37 }else if (selector.match(/^\.\S{3,}/)) {//.class 38 var elarr = doc.all; 39 for (var i = 0; i < elarr.length; i++) { 40 if (elarr[i].className&&elarr[i].className.indexOf(selector.substring(1))!=-1) { 41 this.elems.push(elarr[i]); 42 } 43 44 } 45 }else { //a, 46 var elarr = doc.getElementsByTagName(selector); 47 for (var i = 0; i < elarr.length; i++) { 48 this.elems.push(elarr[i]); 49 } 50 } 51 }else if (selector.nodeType) { 52 this.elems.push(selector); 53 } 54 55 return this; 56 }else{//handle $(),$(""), $(null), $(undefined), $(false) 57 return this; 58 } 59 60 }, 61 css : function(attr,value){ 62 if (arguments.length == 1) { 63 var attrvalue = []; 64 for (var i = 0; i < this.elems.length; i++) { 65 attrvalue[i] = this.elems[i].style[attr] ; 66 } 67 return attrvalue; 68 }else if (arguments.length == 2) { 69 for (var i = 0; i < this.elems.length; i++) { 70 this.elems[i].style[attr] = value; 71 } 72 return this; 73 }else{ 74 throw new Error(‘the length of css arguments is between 1 and 2 !‘); 75 } 76 }, 77 each:function(callback,args){//应该用回调函数 78 return _iceDog.each(this.elems,callback,args); 79 } 80 }; 81 82 //原型传递 83 _iceDog.fn.init.prototype = _iceDog.prototype; 84 85 /** 86 * 将要添加的静态方法或属性，复制给_iceDog 类 87 * 将要添加的对象方法或属性，复制给_iceDog.fn,即_iceDog.prototype原型，那么_iceDog 对象也就拥有了这些方法和属性 88 */ 89 _iceDog.extend = _iceDog.fn.extend = function(){ 90 var target = arguments[0]||{}; 91 for(name in target){ 92 this[name] = target[name]; 93 } 94 return target; 95 }; 96 97 //_iceDog 类要添加的静态方法或属性 98 _iceDog.extend({ 99 version:‘iceDog v1.0.0‘, 100 showVersion:function(){ 101 alert(this.version); 102 return this.version; 103 }, 104 each:function(obj,callback,args){//应该用回调函数 105 var name,length = obj.length; 106 for(name in obj){ 107 if(callback.call(obj[name],name,obj[name],args)===false){ 108 break; 109 } 110 } 111 } 112 }); 113 114 //_iceDog对象的属性或方法 115 _iceDog.fn.extend({ 116 elems:[], 117 get:function(index){ 118 return arguments.length==1?this.elems[index]:this.elems; 119 }, 120 show:function(){ 121 for(var i=0;i<this.elems.length;i++){ 122 this.elems[i].style.display = ‘block‘; 123 } 124 return this; 125 }, 126 hide:function(){ 127 for(var i=0;i<this.elems.length;i++){ 128 this.elems[i].style.display = ‘none‘; 129 } 130 return this; 131 }, 132 addClass:function(className){ 133 for(var i=0;i<this.elems.length;i++){ 134 this.elems[i].className += ‘ ‘+className; 135 } 136 return this; 137 }, 138 removeClass:function(className){ 139 for(var i=0;i<this.elems.length;i++){ 140 var clzz = this.elems[i].className; 141 clzz = clzz.replace(new RegExp(className),‘‘); 142 clzz = clzz.replace(/\ $/,‘‘); 143 this.elems[i].className= clzz; 144 } 145 return this; 146 }, 147 val:function(val){ //获取或设置表单元素值 148 if (arguments.length==1) { 149 for(var i=0;i<this.elems.length;i++){ 150 if(this.elems[i].hasAttribute(‘value‘)){ 151 this.elems[i].value = val; 152 } 153 } 154 return this; 155 } 156 var values = []; 157 for(var i=0;i<this.elems.length;i++){ 158 if(this.elems[i].hasAttribute(‘value‘)){ 159 var value = this.elems[i].value; 160 if(value){ 161 values.push(value); 162 } 163 } 164 } 165 return values; 166 }, 167 text:function(textValue){ //获取或设置文本节点内容 168 if (arguments.length==1) { 169 for(var i=0;i<this.elems.length;i++){ 170 this.elems[i].appendChild(doc.createTextNode(textValue)); 171 } 172 return this; 173 } 174 var texts = []; 175 for(var i=0;i<this.elems.length;i++){ 176 if(this.elems[i].nodeType == 1){//是元素节点，才有文本子节点 177 var text = []; 178 var childNodes = this.elems[i].childNodes; 179 for (var i = 0; i < childNodes.length; i++) { 180 if(childNodes[i].nodeType == 3){ 181 //FireFox浏览器，空格和回车会认为是文本节点。需额外处理 182 childNodes[i].nodeValue = childNodes[i].nodeValue.replace(/\s+/,‘‘); 183 if(childNodes[i].nodeValue){ 184 text.push(childNodes[i].nodeValue); 185 } 186 } 187 } 188 texts.push(text); 189 } 190 } 191 return texts; 192 }, 193 html:function(tag){ //获取或设置节点内容 194 if (arguments.length==1) { 195 for(var i=0;i<this.elems.length;i++){ 196 this.elems[i].innerHTML=tag; 197 } 198 return this; 199 } 200 for(var i=0;i<this.elems.length;i++){ 201 this.elems[i] = this.elems[i].innerHTML; 202 } 203 return this.elems; 204 }, 205 append:function(node,createText){ 206 if (arguments.length!=0) { 207 if(!node.nodeType){ //如果不是节点 208 if(createText&&createText==true){ 209 node = doc.createTextNode(node); //创建文本节点 210 }else{ 211 node = doc.createElement(node); //创建元素节点 212 } 213 } 214 for(var i=0;i<this.elems.length;i++){ 215 this.elems[i].appendChild(node); 216 } 217 218 //对于<div class=‘clzz‘></div>该如何处理？ 219 } 220 return this; 221 } 222 }); 223 224 225 window.$ = window.iceDog = _iceDog; 226 })(window); 227 /* 228 console.log(_iceDog()); 229 console.log(_iceDog(‘#box‘)); 230 console.log(_iceDog(‘#box‘).css(‘color‘,‘red‘).css(‘color‘)); 231 console.log(_iceDog); 232 // console.log(_iceDog.show());//不能运行。。。 233 console.log(_iceDog(‘#pox‘).show()); 234 console.log(_iceDog(‘p‘).show()); 235 236 console.log(_iceDog(‘.boxpox‘)); 237 console.log(_iceDog(‘.beblue‘).css(‘color‘,‘blue‘).css(‘color‘)); 238 */ 239 240 241 242 /* 243 (function(window){ 244 var doc = window.document; 245 _iceDog = function(selector){ 246 var obj = { 247 elems : selector? []:_iceDog.prototype, 248 init : function(selector){ 249 if(selector){ 250 if(selector.match(/^\#\S{3,}/)){//#id 251 this.elems.push(doc.getElementById(selector.substring(1))) 252 }else if (selector.match(/^\.\S{3,}/)) {//.class 253 var elarr = doc.all; 254 for (var i = 0; i < elarr.length; i++) { 255 if (elarr[i].className&&elarr[i].className.indexOf(selector.substring(1))!=-1) { 256 this.elems.push(elarr[i]); 257 } 258 259 } 260 }else { //a,<a> 261 var elarr = doc.getElementsByTagName(selector); 262 for (var i = 0; i < elarr.length; i++) { 263 this.elems.push(elarr[i]); 264 } 265 } 266 return this; 267 }else{ 268 return this; 269 } 270 271 }, 272 css : function(attr,value){ 273 if (arguments.length == 1) { 274 var attrvalue = []; 275 for (var i = 0; i < this.elems.length; i++) { 276 attrvalue[i] = this.elems[i].style[attr] ; 277 } 278 return attrvalue; 279 }else if (arguments.length == 2) { 280 for (var i = 0; i < this.elems.length; i++) { 281 this.elems[i].style[attr] = value; 282 } 283 return this; 284 }else{ 285 throw new Error(‘the length of css arguments is between 1 and 2 !‘); 286 } 287 }, 288 show:function(){ 289 return this.elems; 290 }, 291 each:function(fun){//应该用回调函数 292 for (var i = 0; i < this.elems.length; i++) { 293 alert(this.elems[i]); 294 } 295 } 296 }; 297 _iceDog.prototype = obj.init.prototype;//_iceDog.prototype = obj.init.prototype = obj; 298 299 return obj.init(selector); 300 }; 301 window.$ = window.iceDog = _iceDog; 302 })(window); 303 */
以上是关于jquery源码学习的主要内容，如果未能解决你的问题，请参考以下文章