模拟jQuery的一些功能

//getStyle

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

//getByClass

function getByClass(oParent,sClass){
    var arr = [];
    var aEle = oParent.getElementsByTagName("*");
    for(var i = 0;i < aEle.length;i ++){
        if(aEle[i].className == sClass){
            arr.push(aEle[i])
        }
    }
    return arr;
}

//myAddEvent

function myAddEvent(obj,sEv,fn){
    //改造后return false 能同时具有阻止冒泡和默认事件的作用
    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 jQuery(vArg){
    this.elements = [];
    switch(typeof vArg){//typeof
        case "function":
            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));
                    break;
                default:
                    this.elements = document.getElementsByTagName(vArg);
            }
            break;
        case "object":
            this.elements.push(vArg);
    }
}

//$拥有jQuery功能

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

//click()

jQuery.prototype.click = function(fn){
    for(var i = 0;i < this.elements.length;i ++){
        myAddEvent(this.elements[i],'click',fn);
    }
    return this;//支持链式操作
};

//css()

jQuery.prototype.css = function(attr,value){
    if(arguments.length == 2){
        for(var i = 0;i < this.elements.length;i ++){
            this.elements[i].style[attr] = value;
        }
    }
    else{
        if(typeof attr == "string"){//typeof
            return getStyle(this.elements[0],attr);//获取时不能链式操作，因为到这里就返回了。带单位
        }
        else{
            for(var i = 0;i < this.elements.length;i ++){
                var k = "";
                for(k in attr){
                    this.elements[i].style[k] = attr[k];
                }
            }
        }
    }
    return this;
};

//toggle()　　>>　　0>fn1; 1>fn2; 2>fn3

jQuery.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);
        });
    }
    return this;
};

//attr()

jQuery.prototype.attr = function(name,value){
    if(arguments.length == 2){
        for(var i = 0;i < this.elements.length;i ++){
            this.elements[i][name] = value;
        }
    }
    else{
        return this.elements[0][name];
    }
    return this;
};

//eq()

jQuery.prototype.eq = function(num){
    return $(this.elements[num]);//普通的dom对象变成jQuery对象。单一dom对象的处理方式
};

//find()

jQuery.prototype.find = function(str){
    var aResult = [];
    for(var 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);
            default:
                var aEle = this.elements[i].getElementsByTagName(str);
                appendArr(aResult,aEle);
        }
    }
    var newJquery = $();
    newJquery.elements = aResult;//数组dom对象的处理方式
    return newJquery;
};

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

//index()

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

//getIndex()

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

//bind()

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

//extend()

jQuery.prototype.extend = function(name,fn){
    jQuery.prototype[name] = fn;
};

//size()

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

//animate()插件

$().extend("animate",function(json){
    for(var i = 0;i < this.elements.length;i ++){
        startMove(this.elements[i],json);
    }
    function startMove(obj,json,fnEnd){
        clearInterval(obj.timer);
        obj.timer = setInterval(function(){
            var oStop = true;
            for( var attr in json){
                var cur = 0;
                if(attr == "opacity"){
                    cur = Math.round( parseFloat( getStyle(obj,attr) ) * 100 );
                }
                else{
                    cur = parseInt( getStyle(obj,attr) );
                }

                var speed = (json[attr] - cur) / 7;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

                if(cur != json[attr]){
                    oStop = false;
                }
                if(attr == "opacity"){
                    obj.style.filter = 'alpha(opacity:'+(cur+speed)+')';
                    obj.style.opacity = (cur + speed) / 100;
                }
                else{
                    obj.style[attr] = cur + speed + "px";
                }
            }
            if(oStop){
                clearInterval(obj.timer);
                fnEnd&&fnEnd();
            }
        },30);
    }
});

//drag()插件

$().extend('drag',function(){
    for(var i = 0;i < this.elements.length;i++){
        drag(this.elements[i]);
    }
    function drag(obj){
        var disX = 0;
        var disY = 0;
        obj.onmousedown = function(ev){
            //这里位置的计算一定是mousedown的时候
            var oEvent = ev || event;
            disX = oEvent.clientX - parseInt( getStyle(obj,"left") );
            disY = oEvent.clientY - parseInt( getStyle(obj,"top") );

            if(obj.setCapture){
                obj.onmousemove = mouseMove;
                obj.onmouseup = mouseUp;
                obj.setCapture();
            }
            else{
                document.onmousemove = mouseMove;
                document.onmouseup = mouseUp;
            }
            function mouseMove(ev){
                var oEvent = ev || event;

                obj.style.top = oEvent.clientY - disY + "px";
                obj.style.left = oEvent.clientX - disX + "px";
            }
            function mouseUp(){
                this.onmousemove = this.onmouseup = null;
                if(obj.releaseCapture){
                    obj.releaseCapture();
                }
            }
            return false;
        };
    }
});