模拟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  >>  fn2
100 //3  >>  fn3
101 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 //extend
174 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 });