我的miniQuery

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了我的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);}});})();

以上是关于我的miniQuery的主要内容,如果未能解决你的问题,请参考以下文章

vbscript 我的代码片段

找到我的自定义代码片段 Xcode 6?

学习 PyQt5。在我的代码片段中找不到错误 [关闭]

每当我运行我的片段时,这行代码 mapFragment.setRetainInstance(true);正在崩溃我的应用程序? [关闭]

使用 C++ 反转句子中的每个单词需要对我的代码片段进行代码优化

如何有条件地将 C 代码片段编译到我的 Perl 模块?