JQuery部分功能底层实现

// 为指定对象添加指定方法与执行方法后的回调函数(对象、事件、回调函数)
function myAddEvent(obj, event, callback) {
    // 兼容IE写法，attachEvent会把绑定函数的this换成window
    if (obj.attachEvent) {
        // 在 attachEvent 方法中，事件是以 “on” 开头的
        obj.attachEvent('on' + event, function (e) {

            // 行间、套一层、定时器、绑定这四种情况不能直接用this
            // call()调用比普通的函数参数调用多一个参数就是this

            // 在执行函数时将obj传入替换this(此处为window)
            // callback如果要传参数，可以这样callback.call(obj,a,b)

            // 当调用callback.call(obj)返回的是false
            if (false == callback.call(obj)) {

                // callback.apply(obj,[a,b])
                // call与apply第一个参数都为this,applay第二个参数为一个数组

                // 阻止事件冒泡
                e.cancelBubble = true;

                // 阻止事件默认
                return false;
            }
        });
    } else {

        obj.addEventListener(event, function (e) {
            if (false == callback.call(obj)) {
                // 阻止事件冒泡
                e.cancelBubble = true;
                // 阻止事件默认
                e.preventDefault();
            }
        }, false);
    }
};

// 通过父级与class名获取元素
function getByClass(parent, name) {
    var list = parent.getElementsByTagName('*');
    var result = [];
    for (var i = 0; i < list.length; i++) {
        if (list[i].className == name) {
            result.push(list[i]);
        }
    };
    return result;
};

// 获取传入对象的属性
function getStyle(obj, attr) {
    if (obj.currentStyle) {
        return obj.currentStyle[attr];
    } else {
        return getComputedStyle(obj, false)[attr];
    }
};

// 选择对象方法
function JQuery(type) {

    // 用来保存选中的元素
    this.elements = [];

    // 判断传入的参数
    switch (typeof type) {
        // 如果是方法
        case 'function':
            myAddEvent(window, 'load', type);
            break;
        // 如果是字符串
        case 'string':
            // 判断传入字符串的第一个字符
            switch (type.charAt(0)) {
                // ID
                case '#':
                    var obj = document.getElementById(type.substring(1));
                    this.elements.push(obj);
                    break;
                // class
                case '.':
                    this.elements = getByClass(document, type.substring(1));
                    break;
                // tagName
                default:
                    this.elements = document.getElementsByTagName(type);
            }
            break;
        // 如果是对象
        case 'object':
            this.elements.push(type);
    }
};


// 添加click事件
JQuery.prototype.click = function (callback) {
    for (var i = 0; i < this.elements.length; i++) {
        // 为每一个选择的元素添加click方法
        myAddEvent(this.elements[i], 'click', callback);
    };
    return this;
};


// 添加显示方法
JQuery.prototype.show = function () {
    for (var i = 0; i < this.elements.length; i++) {
        this.elements[i].style.display = 'block';
    };
    return this;
};


// 添加隐藏方法
JQuery.prototype.hide = function () {
    for (var i = 0; i < this.elements.length; i++) {
        this.elements[i].style.display = 'none';
    };
    return this;
};


// 添加鼠标移入移出方法
JQuery.prototype.hover = function (callbackOver, callbackOut) {
    for (var i = 0; i < this.elements.length; i++) {
        // 鼠标移入时执行第一个回调函数
        myAddEvent(this.elements[i], 'mouseover', callbackOver);
        // 鼠标移出时执行第二个回调函数
        myAddEvent(this.elements[i], 'mouseout', callbackOut);
    }
    return this;
};


// 设置与获取样式属性
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') {
            // return this.elements[0].style[attr];
            // style只能获取行间样式,只能用getStyle来获取样式
            return getStyle(this.elements[0], attr);
            // 批量设置样式(传入类型为对象格式)
        } else {
            for (var i = 0; i < this.elements.length; i++) {
                for (var k in attr) {
                    this.elements[i].style[k] = attr[k];
                }
            }
        }
    };
    // 在调用函数后返回this实现链式调用
    return this;
};


// 设置与获取属性
JQuery.prototype.attr = function (attr, value) {
    // 如果传入的参数为两个
    if (arguments.length == 2) {
        // 设置属性
        for (var i = 0; i < this.elements.length; i++) {
            this.elements[i][attr] = value;
        }
    } else {
        // 获取属性
        return this.elements[0][attr];
    };
    return this;
};


// 点击切换方法，一般会传两个函数(hide与show)
JQuery.prototype.toggle = function () {
 
    // 将toggle()的参数转存
    var _arguments = arguments;

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

    function addToggle(obj) {
        // count变量不能扔在外面，否则无法分别计数
        var count = 0;
        myAddEvent(obj, 'click', function () {
            // 分别执行toggle()传入的参数,用count模传入参数的length,然后将count加1
            // 用call替换执行函数的this
            _arguments[count++ % _arguments.length].call(obj);
        });
    };

    return this;
};


// 获取选择的当前对像集合中的某一个元素
JQuery.prototype.eq = function (n) {
    // 要加$()进行包装，以适应添加的方法
    return $(this.elements[n]);
};


// 第二个数组添加到第一个数组中
function appendArr(arr1, arr2) {
    for (var i = 0; i < arr2.length; i++) {
        arr1.push(arr2[i]);
    }
};


// 添加当前对象查找子节点的方法
JQuery.prototype.find = function (str) {

    var result = [];
    for (var i = 0; i < this.elements.length; i++) {
        switch (str.charAt(0)) {
            // class
            case '.':
                // 查找当前对象集合中，含有指定class的对象集合 
                var element = getByClass(this.elements[i], str.substring(1));
                // 结果打散拼接
                result = result.concat(element);
                break;
            // 标签
            default:
                var element = this.elements[i].getElementsByTagName(str);
                appendArr(result, element);
        }
    };
    // 声明变量赋值全局变量选择器给它
    var newJquery = $();
    // 替换当前选择器的elements，这样返回出去的东西才能使用JQuery的方法
    newJquery.elements = result;
    return newJquery;
};


// 返回当前对象的下标子方法
function getIndex(obj) {
    var brother = obj.parentNode.children;
    for (var i = 0; i < brother.length; i++) {
        if (brother[i] == obj) {
            return i;
        }
    }
};


// 返回当前对象的下标
JQuery.prototype.index = function () {
    return getIndex(this.elements[0]);
};

// 阻止事件冒泡与事件默认(事件名，函数)
JQuery.prototype.bind = function (event, callback) {
    for (var i = 0; i < this.elements.length; i++) {
        myAddEvent(this.elements[i], event, callback);
    }
};

// 给对象加壳
function $(obj){
    return new JQuery(obj);
};


// 插件机制
JQuery.prototype.extend = function (name, callback) {
    JQuery.prototype[name] = callback;
};


// 添加动画函数
$().extend('animate', function (json) {

    for (var 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, callback) {
        clearInterval(obj.timer);
        obj.timer = setInterval(function () {
            // 这一次运动就结束了,所有的值都到达了
            var stop = true;
            for (var attr in json) {
                // 取当前的值
                var current = 0;

                if (attr == 'opacity') {
                    current = parseInt(parseFloat(getStyle(obj, attr)) * 100);
                } else {
                    current = parseInt(getStyle(obj, attr));
                };

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

                // 检测停止
                if (current != json[attr]) {
                    stop = false;
                };

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

            if (stop) {
                clearInterval(obj.timer);
                if (callback) {
                    callback();
                }
            };
        }, 30)
    }
});


// 添加拖拽函数
$().extend('drag', function () {
    for (var i = 0; i < this.elements.length; i++) {
        drag(this.elements[i]);
    }

    function drag(obj) {
        obj.onmousedown = function (ev) {
            var myEvent = ev || event;
            var distanceX = myEvent.clientX - obj.offsetLeft;
            var distanceY = myEvent.clientY - obj.offsetTop;

            document.onmousemove = function (ev) {
                var myEvent = ev || event;
                obj.style.left = myEvent.clientX - distanceX + 'px';
                obj.style.top = myEvent.clientY - distanceY + 'px';
            };

            document.onmouseup = function () {
                document.onmousemove = null;
                document.onmouseup = null;
            };
        };
    }
});