jQuery编程模仿

停顿了一段学习的时间。看书也有些凌乱,现将目前接触到的querySelectorAll方法作为框架基础的小类库贴出,由于此方法只在最新浏览器中被使用。在开发中仍以jQuery选择器为主,此文只供私下学习。

(function(w){

    if(!String.trim || typeof String.trim !== 'function') {

        String.trim = function(str){

            switch(typeof str) {

                case 'number' : return '' + str;

                case 'string' : return str.replace(/^\s+|\s+$/g, '');

                default : return Object.prototype.toString.call(str); // 返回最原始的toString

            }

        };

    }

    var Garbin = function(obj) {

        this.data = obj;

    };

    var garbin = function(query){

        if(!String.trim(query) || typeof query !== 'string') return null;

        var obj = w.document.querySelectorAll(query);

        return new Garbin(obj);

    };

    garbin.extend = function(a, b) {

        if(!a) return null;

        if(!b) return a;

        for(var k in b) a[k] = b[k]; 

        return a;

    };

    garbin.extend(garbin, {

        merge : function(a, b) {

            for(var k in b) if(!a.hasOwnProperty(k)) a[k] = b[k];

            return a;

        }

    });

    garbin.fn = Garbin.prototype;

    garbin.extend(Garbin.prototype, {

        get : function(idx) {

            if(!idx || isNaN(idx)) throw new TypeError('Param is not a Number type.');

            if(!this.data) throw new Error('point-null Error.');

            return this.data.item(idx);

        },

        val : function(val) {

            var data = this.data;

            if(val) {

                for (var i = 0; i < data.length; i++) {

                    data[i].setAttribute('value', val);

                }

                return this;

            } else if(data){

                if(this.data.length === 1) return data[0].getAttribute('value');

                else {

                    var result = [];

                    for (var i = 0; i < data.length; i++) { result.push(data[i].getAttribute('value')); }

                    return result;

                }

            }

        },

        attr : function(keyOrData, value) {

            var data = this.data;

            if(!keyOrData) return this;

            if(!value) {

                if(typeof keyOrData === 'string') {

                    if(!data) return null;

                    if(data.length === 1) return data[0].getAttribute(keyOrData);

                    var result = [];

                    for (var i = 0; i < data.length; i++) {

                        result.push(data[i].getAttribute(keyOrData));

                    }

                    return result;

                } else {

                    for(var k in keyOrData) {

                        var v = keyOrData[k];

                        for (var i = 0; i < data.length; i++) {

                            data[i].setAttribute(k, v);

                        }

                    }

                    return this;

                } 

            }

            data[0].setAttribute(keyOrData, value);

            return this;

        },

        text : function(txt) {

            var data = this.data;

            if(!data) return this;

            var parseHTML = function(html) {

                if(!html) return null;

                return html.replace(/<.*>/, '');

            };

            if(!txt) {

                if(data.length === 1) return parseHTML(data[0].innerHTML);

                var result = [];

                for (var i = 0; i < data.length; i++) {

                    result.push(parseHTML(data[i].innerHTML));

                }

                return result;

            } else {

                var html = '<' + data[0].innerHTML.replace(/^[^<]*<|>[^>]*$/g, '');

                if(data.length === 1) data[0].innerHTML = txt + html;

                else {

                    for (var i = 0; i < data.length; i++) {

                        data[i].innerHTML = txt + html;

                    }

                }

                return this;

            }

        },

        html : function(html) {

            var data = this.data;

            if(!data || data.length < 1) return null;

            if(!html) {

                if(data.length === 1) return data[0].innerHTML;

                var result = [];

                for (var i = 0; i < data.length; i++) {

                    result.push(data[i].innerHTML);

                }

                return result;

            } else {

                if(data.length === 1) data[0].innerHTML = html;

                else {

                    for (var i = 0; i < data.length; i++) {

                        data[i].innerHTML = html;

                    }

                }

                return this;

            }

        },

        css : function(keyOrData, value) {

            var data = this.data;

            if(!keyOrData) return this;

            if(!value) {

                if(typeof keyOrData === 'string') {

                    if(!data) return null;

                    if(data.length === 1) return data[0].style[keyOrData];

                    var result = [];

                    for (var i = 0; i < data.length; i++) {

                        result.push(data[i].style[keyOrData]);

                    }

                    return result;

                } else {

                    for(var k in keyOrData) {

                        var v = keyOrData[k];

                        for (var i = 0; i < data.length; i++) {

                            data[i].style[k] = v;

                        }

                    }

                    return this;

                } 

            }

            data[0].style[keyOrData] = value;

            return this;

        },

        show : function() {

            return this.css('visibility', 'visible');

        },

        hide : function() {

            return this.css('visibility', 'hidden');

        },

        find : function(query) {

            if(!String.trim(query) || typeof query !== 'string') return null;

            var data = this.data;

            if(!data) return;

            if(data.length === 1) {

                return new Garbin(data[0].querySelectorAll(query));

            } else {

                var result = [];

                for (var i = 0; i < data.length; i++) {

                    var tmpArr = data[i].querySelectorAll(query);

                    for (var j = 0; j < tmpArr.length; j++) {

                        result.push(tmpArr.item(j));

                    }

                }

                return new Garbin(result);

            }

        }

    });

    garbin.extend(w, { garbin : garbin });

}(window));

 

你可能感兴趣的:(jquery)