zoukankan      html  css  js  c++  java
  • 我的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添加无数静态方法,原型方法!有兴趣的朋友可以拿过去试一试!虽然有些东西考虑的不完善。。。

    (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;}},//htmlhtml : 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);}});})();

  • 相关阅读:
    20165334 我期待的师生关系
    20165228 我期望的师生关系
    20165232 预备作业3 Linux安装及学习
    20165232 学习基础和c语言基础调查
    20165232 我期望的师生关系
    20165320 第一周学习总结
    20165320 预备作业3 :Linux安装及命令入门
    20165320 预备作业2:技能学习心得与C语言学习
    20165320 我期望的师生关系
    20165203 学习基础和C语言基础调查
  • 原文地址:https://www.cnblogs.com/lark-/p/7954064.html
Copyright © 2011-2022 走看看