首页 > 代码库 > 模拟jQuery的一些功能

模拟jQuery的一些功能

  1 function getStyle(obj,attr){  2     if(obj.currentStyle){  3         return obj.currentStyle[attr];  4     }  5     else{  6         return getComputedStyle(obj,false)[attr];  7     }  8 }  9  10 function getByClass(oParent,sClass){ 11     var arr = []; 12     var aEle = oParent.getElementsByTagName("*"); 13     for(var i = 0;i < aEle.length;i ++){ 14         if(aEle[i].className == sClass){ 15             arr.push(aEle[i]) 16         } 17     } 18     return arr; 19 } 20  21 function myAddEvent(obj,sEv,fn){ 22     //改造后return false 能同时具有阻止冒泡和默认事件的作用 23     if(obj.attachEvent){ 24         obj.attachEvent("on"+sEv,function(){ 25             if(false == fn.call(obj)){ 26                 event.cancelBubble = true; 27                 return false; 28             } 29         }); 30     } 31     else{ 32         obj.addEventListener(sEv,function(ev){ 33             if(false == fn.call(obj)){ 34                 ev.cancelBubble = true; 35                 ev.preventDefault(); 36             } 37         },false); 38     } 39 } 40  41 function jQuery(vArg){ 42     this.elements = []; 43     switch(typeof vArg){//typeof 44         case "function": 45             myAddEvent(window,"load",vArg); 46             break; 47         case "string": 48             switch(vArg.charAt(0)){ 49                 case "#": 50                     var obj = document.getElementById(vArg.substring(1)); 51                     this.elements.push(obj); 52                     break; 53                 case ".": 54                     this.elements = getByClass(document,vArg.substring(1)); 55                     break; 56                 default: 57                     this.elements = document.getElementsByTagName(vArg); 58             } 59             break; 60         case "object": 61             this.elements.push(vArg); 62     } 63 } 64  65 function $(vArg){ 66     return new jQuery(vArg); 67 } 68  69  70 jQuery.prototype.click = function(fn){ 71     for(var i = 0;i < this.elements.length;i ++){ 72         myAddEvent(this.elements[i],‘click‘,fn); 73     } 74     return this;//支持链式操作 75 }; 76  77 jQuery.prototype.css = function(attr,value){ 78     if(arguments.length == 2){ 79         for(var i = 0;i < this.elements.length;i ++){ 80             this.elements[i].style[attr] = value; 81         } 82     } 83     else{ 84         if(typeof attr == "string"){//typeof 85             return getStyle(this.elements[0],attr);//获取时不能链式操作,因为到这里就返回了。带单位 86         } 87         else{ 88             for(var i = 0;i < this.elements.length;i ++){ 89                 var k = ""; 90                 for(k in attr){ 91                     this.elements[i].style[k] = attr[k]; 92                 } 93             } 94         } 95     } 96     return this; 97 }; 98 //0  >>  fn1 99 //1  >>  fn2100 //3  >>  fn3101 jQuery.prototype.toggle = function(){102     var _arguments = arguments;103     for(var i = 0;i < this.elements.length;i ++){104         addToggle(this.elements[i]);105     }106     function addToggle(obj){107         var count = 0;108         myAddEvent(obj,"click",function(){109             _arguments[count++ % _arguments.length].call(obj);110         });111     }112     return this;113 };114 115 jQuery.prototype.attr = function(name,value){116     if(arguments.length == 2){117         for(var i = 0;i < this.elements.length;i ++){118             this.elements[i][name] = value;119         }120     }121     else{122         return this.elements[0][name];123     }124     return this;125 };126 127 jQuery.prototype.eq = function(num){128     return $(this.elements[num]);//普通的dom对象变成jQuery对象。单一dom对象的处理方式129 };130 131 jQuery.prototype.find = function(str){132     var aResult = [];133     for(var i = 0;i < this.elements.length;i ++){134         switch(str.charAt(0)){135             case ".":136                 var aEle = getByClass(this.elements[i],str.substring(1));137                 aResult = aResult.concat(aEle);138             default:139                 var aEle = this.elements[i].getElementsByTagName(str);140                 appendArr(aResult,aEle);141         }142     }143     var newJquery = $();144     newJquery.elements = aResult;//数组dom对象的处理方式145     return newJquery;146 };147 148 function appendArr(arr1,arr2){149     for(var i = 0;i < arr2.length;i ++){150         arr1.push(arr2[i]);151     }152 }153 154 jQuery.prototype.index = function(){155     return getIndex(this.elements[0]);156 };157 158 function getIndex(obj){159     var aBrother = obj.parentNode.children;160     for(var i = 0;i < aBrother.length;i ++){161         if(aBrother[i] == obj){162             return i;163         }164     }165 }166 167 jQuery.prototype.bind = function(sEv,fn){168     for(var i = 0;i < this.elements.length; i++){169         myAddEvent(this.elements[i],sEv,fn);170     }171 };172 173 //extend174 jQuery.prototype.extend = function(name,fn){175     jQuery.prototype[name] = fn;176 };177 178 $().extend("size",function(){179     return this.elements.length;180 });181 182 $().extend("animate",function(json){183     for(var i = 0;i < this.elements.length;i ++){184         startMove(this.elements[i],json);185     }186     function startMove(obj,json,fnEnd){187         clearInterval(obj.timer);188         obj.timer = setInterval(function(){189             var oStop = true;190             for( var attr in json){191                 var cur = 0;192                 if(attr == "opacity"){193                     cur = Math.round( parseFloat( getStyle(obj,attr) ) * 100 );194                 }195                 else{196                     cur = parseInt( getStyle(obj,attr) );197                 }198 199                 var speed = (json[attr] - cur) / 7;200                 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);201 202                 if(cur != json[attr]){203                     oStop = false;204                 }205                 if(attr == "opacity"){206                     obj.style.filter = ‘alpha(opacity:‘+(cur+speed)+‘)‘;207                     obj.style.opacity = (cur + speed) / 100;208                 }209                 else{210                     obj.style[attr] = cur + speed + "px";211                 }212             }213             if(oStop){214                 clearInterval(obj.timer);215                 fnEnd&&fnEnd();216             }217         },30);218     }219 });220 221 $().extend(‘drag‘,function(){222     for(var i = 0;i < this.elements.length;i++){223         drag(this.elements[i]);224     }225     function drag(obj){226         var disX = 0;227         var disY = 0;228         obj.onmousedown = function(ev){229             //这里位置的计算一定是mousedown的时候230             var oEvent = ev || event;231             disX = oEvent.clientX - parseInt( getStyle(obj,"left") );232             disY = oEvent.clientY - parseInt( getStyle(obj,"top") );233 234             if(obj.setCapture){235                 obj.onmousemove = mouseMove;236                 obj.onmouseup = mouseUp;237                 obj.setCapture();238             }239             else{240                 document.onmousemove = mouseMove;241                 document.onmouseup = mouseUp;242             }243             function mouseMove(ev){244                 var oEvent = ev || event;245 246                 obj.style.top = oEvent.clientY - disY + "px";247                 obj.style.left = oEvent.clientX - disX + "px";248             }249             function mouseUp(){250                 this.onmousemove = this.onmouseup = null;251                 if(obj.releaseCapture){252                     obj.releaseCapture();253                 }254             }255             return false;256         };257     }258 });

 

模拟jQuery的一些功能