/*
学完了JS OOP的课程，写了一个自己的迷你版的JQuery。
以下就是代码咯！！
*/
(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;
data = eval ("(" + data + ")");
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);
}
});
})();
写得不好，不喜勿喷！！
网友评论