JavaScript——Day 29（jQuery元素選擇）

self-jQuery

(function () {
    function jQuery(selector) {
        return new jQuery.prototype.init(selector); // init的原型鏈上有css的方法
    }
    jQuery.prototype.init = function (selector) {
        // var this = {}
        // 選出 dom 標籤 並且包裝成jQuery對象 返回
        // id class
        this.length = 0;
        // null undefined
        if (selector == null) {
            return this;
        }
        if (typeof selector == 'string' && selector.indexOf('.') != -1) {
            var dom = document.getElementsByClassName(selector.slice(1));
        } else if (typeof selector == 'string' && selector.indexOf('#') != -1) {
            var dom = document.getElementById(selector.slice(1));
        }
        if (selector instanceof Element || dom.length == undefined) { // 只有一個dom
            this[0] = dom || selector;
            this.length++;
        } else { // 你有很多個dom Elements
            // 循環dom
            for (var i = 0; i < dom.length; i++) {
                this[i] = dom[i] || selector[i];
                this.length++;
            }
        }
        // return this;
    }

    jQuery.prototype.css = function (config) {
        // 循環操作每一個dom
        for (var i = 0; i < this.length; i++) {
            for (var attr in config) {
                this[i].style[attr] = config[attr]; // 這裏如果加了px那麼就只能修改像素值了 對於顏色透明度就會使其失效
            }
        }
        return this; // 鏈式操作的精髓 又返回了一個函數本身
    }

    jQuery.prototype.pushStack = function (dom) {
        // dom newObject
        if (dom.constructor != jQuery) {
            dom = jQuery(dom);
        }
        dom.prevObject = this;
        return dom;
    }

    jQuery.prototype.get = function (num) {
        return num == null ? [].slice.call(this, 0) : num >= 0 ? this[num] : this[num + this.length];
    }

    jQuery.prototype.eq = function (num) {
        var dom = num == null ? null : num >= 0 ? this[num] : this[num + this.length];
        return this.pushStack(dom);
    }
    
    jQuery.prototype.add = function (selector) {
        var curObj = jQuery(selector);
        var baseObj = this;
        var newObject = jQuery();
        for (var i = 0; i < curObj.length; i++) {
            newObject[newObject.length++] = curObj[i];
        }
        for (var i = 0; i < baseObj.length; i++) {
            newObject[newObject.length++] = baseObj[i];
        }
        //  newObject.prevObject = this;
        this.pushStack(newObject);

        return newObject;
    }
    jQuery.prototype.end = function () {
        return this.prevObject;
    }
    jQuery.prototype.init.prototype = jQuery.prototype; // init的原型鏈上有css的方法
    window.$ = window.jQuery = jQuery; // 內部jQuery的函數被保存到了window上所有沒有被釋放 就是閉包
})();