我的miniQuery

　　经过两周的JS OOP学习，为了记录这难忘的时刻，写了一个mini的Query
下面便是代码咯！
(function(){
    
    //构建变量保存window.
    var _$ = window.$;
    var _Query = window.Query;
    
    var Query = window.Query = window.$ = function(selector){
        return new Query.fn.init(selector);
    }
    
    //处理原型
    Query.fn = Query.prototype = {
        
        //给这个包添加一个初始化方法
        init : function(selector){
        
            //获取所有选择器指定的元素对象
            var eles = document.querySelectorAll(selector);
            
            //将所有元素添加到this中，形成对象型数组
            Array.prototype.push.apply(this,eles);
            
            //将this返回
            return this;
        },
        Query : "1.0.0",
        length : 0,
        size : function (){
            return this.length;
        }
    };
    
    //
    Query.fn.init.prototype = Query.fn;
    
    //实现继承，通过调用这个方法，可以不断的为Query添加功能
    //添加静态        //添加实例
    Query.exdent = Query.fn.exdent = function(){
        //参数是一个对象
        var o = (arguments[0] instanceof Object ? arguments[0] : {});
        //将对象的属性和属性值一个个动态添加到this中
        for(p in o){
            this[p] = o[p];
        }
    }
    
    //添加静态方法
    Query.exdent({
        //解决冲突
        noConflict: function( deep ) {
            window.$ = _$;

            if ( deep )
                window.jQuery = _Query;

            return jQuery;
        },
        //循环
        each : function(data, callback){
                for(d in data){
                    try{
                        callback(parseInt(d),data[d]);
                    } catch(e){
                        callback(d,data[d]);
                    }
                }
        },
        //去空格
        trim: function( text ) {
            return (text || "").replace( /^\s+|\s+$/g, "" );
        },
        //异步
        ajax : function(){
            var o = arguments[0];
            if(!(o instanceof Object)){
                return;
            }
            var req;
            if (window.ActiveXObject)
                req = new ActiveXObject("Microsoft.XMLHTTP");
            else if (window.XMLHttpRequest)
                req = new XMLHttpRequest();
                
            if(!o.method)
                o.method='GET';
            
            if(!o.contentType && o.method.toUpperCase()=='POST')
                o.contentType = 'application/x-www-form-urlencoded';

            if (o.callback){
                req.onreadystatechange = function(){
                    if(req.readyState==4&&req.status==200){
                        var data=req.responseText;
                        try{
                            data = eval ("(" + data + ")");
                        } catch(err){
                            consloe.log("JSON switch views");
                        }
                        o.callback(data);
                    }
                }
            }
            req.open(o.method,o.url);
            
            if (o.contentType)
                req.setRequestHeader('Content-Type',o.contentType);
            
            req.send(o.param);
        },
        //get异步
        get : function(url, param, callback){
            this.ajax({
                url : url + "?" + param,
                callback : callback,
            });
        },
        //post异步
        post : function(url, param, callback){
            this.ajax({
                url : url,
                callback : callback,
                param : param,
                method : "post"
            });
        }
    });
    
    //工具方法
    Query.fn.exdent({
        //获取元素
        get : function (num){
            if(!isNaN(num)){
                return this[num];
            }
        },
        //遍历元素
        each:function(callback){
            for(var i = 0 ;i< this.length; i++){
                callback(i,this[i]);
            }
        },
        //序列化表单
        serialize : function(){
            var ipts = this[0].elements;
            var params = '';
            for (var i = 0; i < ipts.length; i++) {
                var ipt = ipts[i];
                if (ipt.type=='text' ||
                    ipt.type=='file' ||
                    ipt.type=='password' ||
                    ipt.type=='hidden' ||
                    ipt.type=='textarea' ||
                    ipt.type=='select-one' ||
                    ipt.type=='radio' ||
                    ipt.type=='checkbox'&&ipt.checked)
                    {
                    params+= ipt.name + '=' + encodeURI(ipt.value) + "&";
                }
            }
            if (params!='') {
                params = params.substring(0, params.length-1);
            }
            return params;
        }
    });
    
    //节点方法
    Query.fn.exdent({
        //追加
        append : function() {
            var h = arguments[0];
            this.each(function(index, ele){
                if(h != undefined)
                    ele.innerHTML += h;
            });
            return this;
        },
        //移除
        remove : function(){
            this.each(function(index,ele){
                ele.parentNode.removeChild(ele);
            });
        },
        //文本
        text : function(){
            var t = arguments[0];
            if(t != undefined){
                this.each(function(index, ele){
                    ele.innerText = t;
                });
                return this;
            }else{
                return this[0].innerText;
            }
        },
        //html
        html : function(){
            var h = arguments[0];
            if(h != undefined){
                this.each(function(index, ele){
                    ele.innerHTML = h;
                });
                return this;
            }else{
                return this[0].innerHTML;
            }
        }
    });
    
    //元素样式方法
    Query.fn.exdent({
        //样式
        css : function (){
            var length = arguments.length;
            if(length == 1){
                if(arguments[0] instanceof Object){
                    for(var p in arguments[0]){
                        var o = arguments[0];
                        this.each(function(index, ele){
                            ele.style[p] = o[p];
                        });
                    }
                }else{
                    return this[0].style[arguments[0]];
                }
            }else if(length == 2){
                var name = arguments[0];
                var value = arguments[1];
                this.each(function(index, ele){
                    ele.style[name] = value;
                });
            }
            return this;
        },
        //属性
        prop : function(){
            var length = arguments.length;
            if(length == 1){
                if(arguments[0] instanceof Object){
                    for(var p in arguments[0]){
                        var o = arguments[0];
                        this.each(function(index, ele){
                            ele.setAttribute(p,o[p]);
                        });
                    }
                }else{
                    return this[0].getAttribute(arguments[0]);
                }
            }else if(length == 2){
                var name = arguments[0];
                var value = arguments[1];
                this.each(function(index, ele){
                    ele.setAttribute(name,value);
                });
            }
            return this;
        },
        //隐藏
        hide : function(){
            this.each(function(index, ele){
                ele.style.display = "none";
            });
            return this;
        },
        //显示
        show : function(){
            this.each(function(index, ele){
                ele.style.display = "block";
            });
            return this;
        }
    });
    
    //事件处理方法
    Query.fn.exdent({
        on : function(eventName, callback){
            var e = "on" + eventName;
            this.each(function(index, ele){
                ele[e] = callback;
            });
        }
    });
    
    //事件方法
    Query.fn.exdent({
        //鼠标经过
        mouseover : function(callback){
            this.on("mouseover",callback);
        },
        //鼠标移除
        mouseout : function(callback){
            this.on("mouseout",callback);
        },
        //鼠标按下
        mousedown : function(callback){
            this.on("mousedown",callback);
        },
        //鼠标松开
        mouseup : function(callback){
            this.on("mouseup",callback);
        },
        //鼠标移动
        mousemove : function(callback){
            this.on("mousemove",callback);
        },
        //点击
        click : function(callback){
            this.on("click",callback);
        },
        //双击
        dblclick : function(callback){
            this.on("dblclick",callback);
        },
        //提交按钮被点击
        submit : function(callback){
            this.on("submit",callback);
        },
        //鼠标悬停
        hover : function(over, out){
            this.mouseover(over);
            this.mouseout(out);
        },
        //获得焦点
        blur : function(callback){
            this.on("blur",callback);
        },
        //失去焦点
        focus : function(callback){
            this.on("focus",callback);
        },
        //内容被改变
        change : function(callback){
            this.on("change",callback);
        },
        //文本被选中
        select : function(callback){
            this.on("select",callback);
        },
        //关闭页面
        unload : function(callback){
            this.on("unload",callback);
        },
        //窗口大小被改变
        resize : function(callback){
            this.on("resize",callback);
        },
        //重置按钮被点击
        reset : function(callback){
            this.on("reset",callback);
        },
        //加载
        load : function(callback){
            this.on("load",callback);
        }
    });
})();
通过Query.exdent和Query.fn.endent方法，可以为Query添加无数静态方法，原型方法！有兴趣的朋友可以拿过去试一试！虽然有些东西考虑的不完善。。。
posted @ 2017-12-02 13:48 _LARK 阅读(322) 评论(0) 编辑收藏举报
刷新页面返回顶部
_LARK

我的miniQuery

公告
