封装自己的JS库

一、基础知识

1、点击计数

第一种：

     var aBtn=document.getElementsByTagName('input');
     var i=0;

     for(i=0;i<aBtn.length;i++){
         addClick(aBtn[i]);
     }
     function addClick(obj){
         var count=0;
         obj.onclick=function (){
             alert(count++);
         };
     }

第二种：

     var aBtn=document.getElementsByTagName('input');
     var i=0;

     for(i=0;i<aBtn.length;i++){
         (function (obj){
             var count=0;
             obj.onclick=function (){
                 alert(count++);
             };
         })(aBtn[i]);
     }    

第三种：

     var aBtn=document.getElementsByTagName('input');
     var i=0;

     for(i=0;i<aBtn.length;i++){
         aBtn[i].onclick=(function(count){//参数与局部变量等价
             return function(){
                 alert(count++);
             }
         })(0);
     }

2.链式操作

　　先在库中设置

 vQuery.prototype.css=function(attr,value){
     if(arguments.length==2){//设置样式
         var i=0;

         for(i=0;i<this.elements.length;i++){
             this.elements[i].style[attr]=value;
         }
     }else{//获取样式

         if(typeof attr=='string'){
             return getStyle(this.elements[0],attr);
         }else{
             for(i=0;i<this.elements.length;i++){
                 var k='';

                 for(k in attr){//循环得到json的值
                     this.elements[i].style[k]=attr[k];
                 }
             }
         }
     }
     return this;//函数的链式操作
 };

　　其他方法类似

　　然后调用

 $(function(){
     $('#btn2').css({'background':'gray','width':'100px'}).toggle(function(str){alert(1);
         alert($('#txt1').attr('value'));
     },function(){alert(0);
         $('#txt1').attr('value',35235345);
     }).hover(function(){
         $('#div1').hide();
         alert($(this).css('width'));
     });
 });

3.阻止冒泡

先封装

 function myAddEvent(obj,sEv,fn){
     if(obj.attachEvent){//IE下
         obj.attachEvent('on'+sEv,function(){
             if(false==fn.call(obj)){//此处obj为发生事件的那个元素，用 call()解决 this 在 IE 下使用绑定事件的指向问题
                 event.cancelBubble=true;
                 return false;
             }
         });
     }else{//ff.chrome下
         obj.addEventListener(sEv,function(ev){
             if(false==fn.call(obj)){
                 ev.cancelBubble=true;
                 ev.preventDefault();
             }
         },false);
     }
 }

再调用

 $(document).bind('contextmenu',function(){//阻止右键菜单
         alert(0);return false;//console.log($(this));=vQuery
     });

4.插件扩展

 $().extend('size',function(){
         return this.elements.length;
     });

 $(function(){
     alert($('div').size());//得到所选元素的个数
 });

二、进行封装

 function myAddEvent(obj,sEv,fn){
     if(obj.attachEvent){//IE下
         obj.attachEvent('on'+sEv,function(){
             if(false==fn.call(obj)){//此处obj为发生事件的那个元素，用 call()解决 this 在 IE 下使用绑定事件的指向问题
                 event.cancelBubble=true;
                 return false;
             }
         });
     }else{//ff.chrome下
         obj.addEventListener(sEv,function(ev){
             if(false==fn.call(obj)){
                 ev.cancelBubble=true;
                 ev.preventDefault();
             }
         },false);
     }
 }

 function getByClass(oParent,sClass){
     var aEle=oParent.getElementsByTagName('*');
     var aResult=[];console.log(aEle[0]);
     var i=0;

     for(i=0;i<aEle.length;i++){
         if(aEle[i].className==sClass){
             aResult.push(aEle[i]);
         }
     }

     return aResult;
 }

 function getStyle(obj,attr){
     if(obj.currentStyle){
         return obj.currentStyle[attr];
     }else{
         return getComputedStyle(obj,false)[attr];
     }
 }

 function vQuery(vArg){
     this.elements=[];//用来保存选中的元素

     switch(typeof vArg){
         case 'function'://console.log(vArg);
         myAddEvent(window,'load',vArg);
         break;
         case 'string':
         switch(vArg.charAt(0)){
             case '#':
             var obj=document.getElementById(vArg.substring(1));

             this.elements.push(obj);
             break;

             case '.':
             this.elements=getByClass(document,vArg.substring(1));console.log(this.elements);
             break;

             default:
             this.elements=document.getElementsByTagName(vArg);
         }
         break;
         case 'object':
         this.elements.push(vArg);
     }
 }

 vQuery.prototype.click=function(fn){
     var i=0;
     for(i=0;i<this.elements.length;i++){
         myAddEvent(this.elements[i],'click',fn);
     }

     return this;//函数的链式操作
 };

 vQuery.prototype.show=function(){
     var i=0;

     for(i=0;i<this.elements.length;i++){
         this.elements[i].style.display='block';
     }

     return this;//函数的链式操作
 };

 vQuery.prototype.hide=function(){
     var i=0;

     for(i=0;i<this.elements.length;i++){
         this.elements[i].style.display='none';
     }

     return this;//函数的链式操作
 };

 vQuery.prototype.hover=function(fnOver,fnOut){
     var i=0;

     for(i=0;i<this.elements.length;i++){
         myAddEvent(this.elements[i],'mouseover',fnOver);
         myAddEvent(this.elements[i],'mouseout',fnOut);
     }

     return this;
 };

 vQuery.prototype.css=function(attr,value){
     if(arguments.length==2){//设置样式
         var i=0;

         for(i=0;i<this.elements.length;i++){
             this.elements[i].style[attr]=value;
         }
     }else{//获取样式

         if(typeof attr=='string'){
             return getStyle(this.elements[0],attr);
         }else{
             for(i=0;i<this.elements.length;i++){
                 var k='';

                 for(k in attr){
                     this.elements[i].style[k]=attr[k];
                 }
             }
         }
     }
     return this;//函数的链式操作
 };

 vQuery.prototype.attr=function(attr,value){
     if(arguments.length==2){//设置属性
         var i=0;

         for(i=0;i<this.elements.length;i++){
             this.elements[i][attr]=value;
         }
     }else{//获取属性

             return this.elements[0][attr];

     }

     return this;//函数的链式操作
 };

 vQuery.prototype.toggle=function(){
     var i=0;
     var _arguments=arguments;//同this一样，arguments也要设置一个变量

     for(i=0;i<this.elements.length;i++){
         addToggle(this.elements[i]);
     }
     function addToggle(obj){
         var count=0;
         myAddEvent(obj,'click',function(){//console.log(arguments);
             _arguments[count++%_arguments.length].call(obj);//alert(count++);
         });
     }

     return this;//函数的链式操作
 };

 vQuery.prototype.eq=function(n){
     return $(this.elements[n]);
 };

 function appendArr(arr1,arr2){
     var i=0;
     for(i=0;i<arr2.length;i++){
         arr1.push(arr2[i]);
     }
 }

 vQuery.prototype.find=function(str){
     var i=0;
     var aResult=[];//存放临时数据

     for(i=0;i<this.elements.length;i++){
         switch(str.charAt(0)){
             case '.':
                 var aEle=getByClass(this.elements[i],str.substring(1));

                 aResult=aResult.concat(aEle);console.log(aResult);
                 break;
             default:
                 var aEle=this.elements[i].getElementsByTagName(str);

                 //aResult=aResult.concat(aEle);
                 appendArr(aResult,aEle);
         }
     }

     var newVquery=$();
     newVquery.elements=aResult;
     return newVquery;
 };

 function getIndex(obj){
     var aBrother=obj.parentNode.children;
     var i=0;

     for(i=0;i<aBrother.length;i++){
         if(aBrother[i]==obj){
             return i;
         }
     }
 }

 vQuery.prototype.index=function(){
     return getIndex(this.elements[0]);
 };

 vQuery.prototype.bind=function(sEv,fn){
     var i=0;

     for(i=0;i<this.elements.length;i++){
         myAddEvent(this.elements[i],sEv,fn);
     }
 };

 vQuery.prototype.extend=function(name,fn){
     vQuery.prototype[name]=fn;//扩展插件
 }

 function $(vArg){
     return new vQuery(vArg);
 }

三、应用

1.简单的选项卡

 $(function(){

     var aBtn=$('#tab').find('ul').find('li');
     var aDiv=$('#tab').find('.box').find('.content');

     aBtn.click(function(){
         aBtn.attr('className','link');
         $(this).attr('className','hover');
         aDiv.hide();
         aDiv.eq($(this).index()).css('display','block');
     });
 });

2.淘宝幻灯片上下滑动效果

 $().extend('size',function(){//添加插件
     return this.elements.length;
 });
 $(function(){
     var aBtn=$('#play').find('ol').find('li');
     var oUl=$('#play').find('ul');
     var aLi=oUl.find('li');
     var iNow=0;
     var timer=null;

     aBtn.click(function(){
         iNow=$(this).index();
         tab();
     });
     function tab(){
         aBtn.attr('className','');
         aBtn.eq(iNow).attr('className','active');//console.log($(this));

         oUl.animate({top:-150*iNow});
     }
     function timerInter(){
         iNow++;

         if(iNow==aBtn.size()){
             iNow=0;
         }

         tab();
     }
     timer=setInterval(timerInter,2000);

     $('#play').hover(function(){
         clearInterval(timer);
     },function(){
         timer=setInterval(timerInter,2000);
     });
 });