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;
}
}
$.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;
}
}
});
以上的方法只需要引入就可以用$.方法名调用,用起来还是比较方便的