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);}});})();

  • 相关阅读:
    SCILAB简介[z]
    UG OPEN API编程基础 2约定及编程初步
    Office 2003与Office 2010不能共存的解决方案
    UG OPEN API 编程基础 3用户界面接口
    NewtonRaphson method
    UG OPEN API编程基础 13MenuScript应用
    UG OPEN API编程基础 14API、UIStyler及MenuScript联合开发
    UG OPEN API编程基础 4部件文件的相关操作
    UG OPEN API编程基础 1概述
    16 UG Open的MFC应用
  • 原文地址:https://www.cnblogs.com/lark-/p/7954064.html
Copyright © 2011-2022 走看看