简易封装js库

function myAddEvent(obj, sEv, fn)  //事件绑定
{
    if(obj.attachEvent)
    {
        obj.attachEvent('on' + sEv, function(){
            if(false==fn.call(obj))
            {
                event.cancelBubble=true;
                return false;
            };
        });
    }
    else
    {
        obj.addEventListener(sEv, function(ev){
            if(false==fn.call(obj))
            {
                ev.cancelBubble=true;
                ev.preventDefault();
            };
        }, false);
    }
};

function getByClass(oParent, sClass)  //用class选取元素
{
    var aEle=oParent.getElementsByTagName('*');
    var aResult=[];
    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': //传过来的如果是个函数
            myAddEvent(window,'load',vArg);
            break;
        case 'string':  //传过来的如果是字符串类型
            switch(vArg.charAt(0))
            {
                case '#':  //ID
                    var obj=document.getElementById(vArg.substring(1));
                    this.elements.push(obj);
                    break;
                case '.':  //class
                    this.elements=getByClass(document, vArg.substring(1));
                    break;
                default:  //tagName
                    this.elements=document.getElementsByTagName(vArg);
            }
            break;
        case 'object':
            this.elements.push(vArg);
            break;
    }
};

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.toggle=function()
{
    var i =0;
    var _arguments=arguments; //存在arguments为了防止调用addToggle获取不到arguments

    for(i=0; i<this.elements.length; i++)
    {
        addToggle(this.elements[i]);
    }

    function addToggle(obj)
    {
        var count=0;
        myAddEvent(obj, 'click', function(){
            _arguments[count++ % _arguments.length].call(obj);
        });
    }
    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.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 '.':  //class
                var aEle=getByClass(this.elements[i], str.substring(1));
                aResult=aResult.concat(aEle);
                break;
            default:  //标签
                var aEle=this.elements[i].getElementsByTagName(str);
                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]);
}
function $(vArg)
{
    return new VQuery(vArg);
};

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;
}

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

$().extend('animate', function(json){
    var i=0;

    for(i=0; i<this.elements.length; i++)
    {
        startMove(this.elements[i], json);
    }
});

//运动框架

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

function startMove(obj,json,fn){
    clearInterval(obj.timer);
    obj.timer = setInterval(function(){
        var bStop=true; //这一次运动就结束了,所有值都到达了。
        for(var attr in json){

            //1.取当前的值
            var iCur=0;
            if(attr == 'opacity'){
                iCur=parseInt(parseFloat(getStyle(obj,attr))*100);
            } else{
                iCur=parseInt(getStyle(obj,attr));
            }

            //2.算速度
            var iSpeed=(json[attr]-iCur)/8;
            iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);

            //3.检测停止
            if(iCur!=json[attr]){
                bStop=false;
            }

            if(attr=='opacity'){
                obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
                obj.style.opacity=(iCur+iSpeed)/100;
            } else{
                obj.style[attr]=iCur+iSpeed+'px';
            }
        }

        if(bStop){
            clearInterval(obj.timer);
            if(fn){
                fn();
            }
        }
    },30)
}

//运动框架结束

posted @ 2016-04-14 19:52  河北-齐哥  阅读(316)  评论(0编辑  收藏  举报