首页 > 代码库 > 模拟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的一些功能
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。