一个类似JQuery的精简版框架

最近看了一段关于javascript的视频,讲的是一个VQuery.js的框架,这是一个类JQuery框架的缩水版,里面有一些通用的方法,这里记录了下来。VQuery方法是这个框架主要的方法,它接收三种类型的参数,具体看下面代码。

VQuery.js代码:

function myAddEvent(obj, sEv, fn)
{
    if(obj.attachEvent)
    {
//      obj.attachEvent('on'+sEv, fn);//ie上存在bug,当前对象会变为window;
        obj.attachEvent('on'+sEv, function(){
            fn.call(obj);
        })
    }else{
        obj.addEventListener(sEv, fn, false);
    }
}
function getByClass(oParent, sClass)
{
    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 getComputedSytle(obj,false)[attr];
    }
}

function VQuery(vArg)
{
    //保存选取的对象
    this.elements = [];
    switch(typeof vArg)
    {
        case 'function':
            window.onload = 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));
                    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);
    }
};

VQuery.prototype.show=function()
{
    var i = 0; 
    for(i = 0; i < this.elements.length; i++)
    {
        this.elements[i].style.display = 'block';
    }
};
//行间对象隐藏问题 例如span
VQuery.prototype.hide=function()
{
    var i = 0; 
    for(i = 0; i < this.elements.length; i++)
    {
        this.elements[i].style.display = 'none';
    }
}
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);
    }
}
VQuery.prototype.css=function(attr, value)
{
    if(arguments.length == 2) //设置样式
    {
        var i = 0;
        for(i = 0; i < this.elements.length; i++)
        {
            this.elements[i].sytle[attr] = value;
        }
    }else //获取样式
    {
        //sytle只能获取行间样式
        //return this.elements[0].sytle[attr]
        return getStyle(this.elements[i],attr);
    }
}
VQuery.prototype.attr=function(attr, value)
{
    alert(arguments.length)
    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];
    }
}


VQuery.prototype.toggle=function()
{
    var _arguments = arguments;
    for(var 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);    
        });

    }
}


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

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

VQuery.prototype.find=(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);
                brea;
            default:
                //aEle不是数组,不能作为concat函数的参数
                var aEle = this.elements.getElementsByTagName(str);
                //aResult = aResult.concat(aEle);
                appendArray(aResult, aEle);
        }
    }

    var newVQuery = s();
    newVQuery.elements = aResult;
    return newVQuery;
}

function getIndex(obj)
{
    var aBrother = obj.parentNode.children;
    for(var i=0; i < aBrother.length; i++)
    {
        if(aBrother[i] == obj)
        {
            return i;
        }
    }
}

VQuery.prototype.index()
{
    return getIndex(this.elements[0]);
}


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

function addClass(obj, sClass) { 
    var aClass = obj.className.split(' ');
    if (!obj.className) {
        obj.className = sClass;
        return;
    }
    for (var i = 0; i < aClass.length; i++) {
        if (aClass[i] === sClass) return;
    }
    obj.className += ' ' + sClass;
}

function removeClass(obj, sClass) { 
    var aClass = obj.className.split(' ');
    if (!obj.className) return;
    for (var i = 0; i < aClass.length; i++) {
        if (aClass[i] === sClass) {
            aClass.splice(i, 1);
            obj.className = aClass.join(' ');
            break;
        }
    }
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值