封装自己的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);
    });
});