模仿jQuer封装一些常用的方法

var $ = function(){};
$.prototype = {
$id:function(id){
return document.getElementById(id);
},
//去除左边空格
    ltrim:function(str){
        return str.replace(/(^\s*)/g,'');
    },
    //去除右边空格
    rtrim:function(str){
        return str.replace(/(\s*$)/g,'');
    },
    //去除空格
    trim:function(str){
        return str.replace(/(^\s*)|(\s*$)/g, '');
    },
    //ajax - 前面我们学习的
    myAjax:function(URL,fn){
        var xhr = createXHR(); //返回了一个对象，这个对象IE6兼容。
        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4){
                if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
                    fn(xhr.responseText);
                }else{
                    alert("错误的文件！");
                }
            }
        };
        xhr.open("get",URL,true);
        xhr.send();


        //闭包形式，因为这个函数只服务于ajax函数，所以放在里面
        function createXHR() {
            //本函数来自于《JavaScript高级程序设计 第3版》第21章
            if (typeof XMLHttpRequest != "undefined") {
                return new XMLHttpRequest();
            } else if (typeof ActiveXObject != "undefined") {
                if (typeof arguments.callee.activeXString != "string") {
                    var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0",
                            "MSXML2.XMLHttp"
                        ],
                        i, len;


                    for (i = 0, len = versions.length; i < len; i++) {
                        try {
                            new ActiveXObject(versions[i]);
                            arguments.callee.activeXString = versions[i];
                            break;
                        } catch (ex) {
                            //skip
                        }
                    }
                }


                return new ActiveXObject(arguments.callee.activeXString);
            } else {
                throw new Error("No XHR object available.");
            }
        }
    },
    //tab
    tab:function(id) {
    //如何获取某个父元素下面的子元素
    var box = document.getElementById(id);
    var spans = box.getElementsByTagName('span');
    var lis = box.getElementsByTagName('li');




    //两步走
    //第一步: 先把上半部分实现
    //群体绑定事件  -- 对所有的span绑定事件
    //群体绑定事件
    for(var i=0;i<spans.length;i++) {
        //相亲法则  -- 给男一号一个代号  --  怎么给 -- 自定义属性
        spans[i].index=i;
        spans[i].onmouseover = function() {
            //排他思想 --  将所有的span置为默认状态  --- 然后再将当前鼠标移上的span置为class -- select
            for(var i=0;i<spans.length;i++) {
                spans[i].className='';
                lis[i].className='';
            }
            this.className='select';
            lis[this.index].className='select';
        }
    }


},
    //简单的数据绑定formateString
    formateString:function(str, data){
    return str.replace(/@\((\w+)\)/g, function(match, key){
        return typeof data[key] === "undefined" ? '' : data[key]});
},
    //给一个对象扩充功能
    extendMany:function() {
    var key,i = 0,len = arguments.length,target = null,copy;
    if(len === 0){
        return;
    }else if(len === 1){
        target = this;
    }else{
        i++;
        target = arguments[0];
    }
    for(; i < len; i++){
        for(key in arguments[i]){
            copy = arguments[i][key];
            target[key] = copy;
        }
    }
    return target;
},
    extend:function(tar,source) {
    //遍历对象
    for(var i in source){
        tar[i] = source[i];
    }
    return tar;
},
    //随机数
    random: function (begin, end) {
        return Math.floor(Math.random() * (end - begin)) + begin;
    },
    //给一个对象扩充功能
    extendMany:function() {
        var key,i = 0,len = arguments.length,target = null,copy;
        if(len === 0){
            return;
        }else if(len === 1){
            target = this;
        }else{
            i++;
            target = arguments[0];
        }
        for(; i < len; i++){
            for(key in arguments[i]){
                copy = arguments[i][key];
                target[key] = copy;
            }
        }
        return target;
    },
    extend:function(tar,source) {
        //遍历对象
        for(var i in source){
            tar[i] = source[i];
        }
        return tar;
    },
    //数据类型检测
    isNumber:function (val){
        return typeof val === 'number' && isFinite(val)
    },
    isBoolean:function (val) {
        return typeof val ==="boolean";
    },
    isString:function (val) {
        return typeof val === "string";
    },
    isUndefined:function (val) {
        return typeof val === "undefined";
    },
    isObj:function (str){
        if(str === null || typeof str === 'undefined'){
            return false;
        }
        return typeof str === 'object';
    },
    isNull:function (val){
        return  val === null;
    },
    isArray:function (arr) {
        if(arr === null || typeof arr === 'undefined'){
            return false;
        }
        return arr.constructor === Array;
    }
}
// 在框架中实例化，这样外面使用的久不用实例化了
$ = new $();
// 定义事件对象 专门放在放置事件相关操作
$.extend($,{
on:function(id,type,fn){
var dom = $.isString(id)?document.getElementById(id):id;
if(dom.addEventListener){
dom.addEventListener(type,fn, false);
} else if(dom.attachEvent){
document.attachEvent('on'+type,fn);
}
},
// 解除绑定事件
un:function(id,type,fn){
var dom = $$.isString(id)?document.getElementById(id):id;
if(dom.removeEventListener){
dom.removeEventListener(type,fn);
} else if(dom.detachEvent){
dom.detachEvent(type,fn);
}
},
// 点击事件
click:function(id,fn){
this.on(id,'click',fn);
},
// 鼠标一上去事件
mouseover:function(id,fn){
this.on(id,'mouseover',fn);
},
//鼠标离开事件
mouseout:function(id,fn){
this.on(id,'mouseout',fn);
},
// 鼠标悬浮事件
hover:function(id,fnOver,fnOut){
if(fnOver){
this.on(id,'mouseover',fnOver);
}
if(fnOut){
this.on(id,'mouseout',fnOut);
}
},
//事件委托
delegate:function(pid,eventType,selector,fn){
var parent = $.$id(pid);
function handle(e){
var target = $.GetTarget(e);
if()
}
},
// 事件兼容
getEvent:function(event){
return event?event:window.event;
},
//  获取目标
getTarget:function(event){
var e = $.getEvent(event);
return e.target || e.srcElement;
},
// 组织默认行为
preventDefault:function(event){
var event = $.getEvent(event);
if(event.preventDefault()){
event.preventDefault();
} else{
event.returnValue = false;
}
},
// 阻止冒泡
stopPropagation:function(event){
vaer event = $.getEvent(event);
if(event.stopPropagation){
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}

});

以上的方法只需要引入就可以用$.方法名调用,用起来还是比较方便的