仿JQuery源码封装的库函数

最近通过研究JQ，有一种想要自己封装一个库函数的冲动，因此，自己DIY了一个库函数。

API说明：

$()  :   类似于jquery中的$

$().getId(id) : 通过id获取元素

$().getClassName(className) : 通过className获取元素集合

$().css(param1[,params2])  :  可以设置或者获取css样式

$().html(param1[,params2])  :  可以设置或者获取html文本

$().addClass(className) :  添加类名

$().removeClass(className) :  移除类名

$().hover(over,out) : 添加移入移出事件

$().ajax(obj) : 设置ajax

现在来看源码：

//1.简单的对象封装
// var Tool = {
// 	getId : function(id){
// 		return document.getElementById(id);
// 	},
// 	getClass : function(className){
// 		return document.getElementsByClassName(className);
// 	},
// 	getTagName : function(tagName){
// 		return document.getElementsByTagName(tagName);
// 	},
// 	getId : function(name){
// 		return document.getElementsByName(name);
// 	}
// };
// 
//2.通过原型封装
var $ = function(_this){
	//修复，同时修改共享中的this.elems样式
	return new Tool(_this);
}
//工具类
function Tool(_this){
	//连缀功能,私有化属性
	this.elems = [];
	//封装this
	if(_this != undefined){
		this.elems.unshift(_this);
	}
	//获取ID
	this.getId = function(id){
		this.elems = [];
		this.elems.push(document.getElementById(id));
		return this;
	};
	//获取TagName
	this.getTagName = function(tagName){
		this.elems = [];
		var tags = document.getElementsByTagName(tagName);
		for(var i=0;i<tags.length;i++){
			this.elems.push(tags[i]);
		}
		return this;
	};
	//获取className
	this.getClass = function(className,id){
		this.elems = [];
		var node = null;
		if(arguments.length == 2){
			node = document.getElementById(id);
		}else{
			node = document;
		}
		//首先获取所有节点
		var elements = node.getElementsByTagName("*");
		//将类名相同的节点加入到this.elems数组中
		for (var i = 0; i < elements.length; i++) {
			if(elements[i].className == className){
				this.elems.push(elements[i]);
			}
		}

		return this;
	}
	//获取某一个节点
	this.eq = function(num){
		var element = this.elems[num];
		this.elems = [];
		this.elems.push(element);
		return this;
	}
}
//设置样式
Tool.prototype.css = function(key,value){
	//elem.style['color'] = 'red';
	// this.elems[0].style[key] = value;//获取第0个元素

	for(var i=0;i<this.elems.length;i++){
		if(arguments.length==1){
			
			if(typeof window.getComputedStyle != 'undefined'){
				//W3C
				return window.getComputedStyle(this.elems[i],null)[key];	
			}else if(typeof this.elems[i].currentStyle !='undefined'){
				//IE	
				return this.elems[i].currentStyle[key];
			}
		}
		this.elems[i].style[key] = value;
	}
	return this;
}
//添加class
Tool.prototype.addClass = function(className){
	// var reg = /\s|^(className)|\s$ /g;
	for (var i = 0; i < this.elems.length; i++) {
		//避免重复添加类
		if(!this.elems[i].className.match(className)){
			this.elems[i].className +=" "+ className;//添加多个className
		}
		
	}
	return this;
}
//移除class
Tool.prototype.removeClass = function(className){
	for (var i = 0; i < this.elems.length; i++) {
		//查找相同className的类名
		var str = this.elems[i].className;
		//匹配指定className,移除class
		if(str.match(new RegExp('(\\s|^)'+ className +'(\\s|$)'))){
			str = str.replace(new RegExp('(\\s|^)'+ className+'(\\s|$)'),'');
			this.elems[i].className = str;
		}
		
	}
	return this;
}
//设置html
Tool.prototype.html = function(value){

	if(arguments.length == 0){
		return this.elems[0].innerHTML;
	}
	for(var i=0;i<this.elems.length;i++){
		this.elems[i].innerHTML = value;
	}
	return this;
}
//设置样式
Tool.prototype.click = function(fn){

	
	for(var i=0;i<this.elems.length;i++){
		this.elems[i].onclick = fn;
	}
	return this;
}
//设置移入移出事件
Tool.prototype.hover = function(over,out){
	for (var i = 0; i < this.elems.length; i++) {
		this.elems[i].onmouseover = over;
		this.elems[i].onmouseout = out;
	}
	return this;
}
//设置显示事件
Tool.prototype.show = function(){
	for (var i = 0; i < this.elems.length; i++) {
		this.elems[i].style.display = 'block';
	}
	return this;
}
//设置隐藏事件
Tool.prototype.hide = function(){
	for (var i = 0; i < this.elems.length; i++) {
		this.elems[i].style.display = 'none';
	}
	return this;
}
//居中显示
Tool.prototype.center = function(top,left){
	for (var i = 0; i < this.elems.length; i++) {
		this.elems[i].style.top = top + 'px';
		this.elems[i].style.left = left + 'px';
	}
	return this;
}
//监听resize方法
Tool.prototype.resize = function(fn){
	
	window.onresize = fn;

	return this;
}
//获取xhr对象
function getXhrObject(){
	//高版本浏览器
	if(typeof XMLHttpRequest != 'undefined'){
		return new XMLHttpRequest();
	}else if(typeof ActiveXObject != 'undefined'){

		var version = [
						'MSXML2.XMLHttp6.0',
						'MSXML2.XMLHttp3.0',
						'MSXML2.XMLHttp'
					  ];
		for (var i = 0; i < version.length; i++) {
			try{
				return new ActiveXObject(version[i]);
			}catch(e){
				continue;
			}
		}

	}else{
		throw new Error("不兼容xhr对象");
	}
}
//ajax方法
Tool.prototype.ajax  = function(obj){
	var xhr = getXhrObject();
	if(obj.method.toUpperCase == 'GET'){
		url += obj.url +'?random='+ Math.random()+'&'+obj.params;
		xhr.onreadystatechange = function(){
			if(xhr.readystate == 4 && xhr.status == 200){
				// 执行代码
				// console.log(xhr.responseText);
				obj.success(xhr.responseText);              //回调函数
			}
		}
		xhr.open(obj.method,url,true);//readystate:1
		xhr.send(null);
	}else if(obj.method.toUpperCase == 'POST'){
		var url = obj.url +　Math.ramdom();
		xhr.open(obj.method,url,true);//异步请求
		xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
		//设置请求头信息
		// xhr.setRequestHeader('Content-Type','text/html');
		//4.send方法
		xhr.send(obj.params);//发送请求，get不需要数据提交
		//异步监听onreadystatechange事件
		xhr.onreadystatechange = function(){
			if(xhr.readystate == 4){
				// 1:open 2:send
				if(xhr.status == 200){
					//400 成功
					obj.success(xhr.responseText); //回调函数
				}else{
					console.log("错误信息"+xhr.statusText)
				}
			}
		}
	}
}
// ajax({
// 	method:'get',
// 	url:'message.json',
// 	params:'name=lee&age=12',
// 	success:function(data){
// 		console.log(data);
// 	}
// });

样例代码 index.html

<!DOCTYPE html>
<html>
<head>
	<title>js常用方法</title>
	<style type="text/css">
		code{
			font-weight: bold;
		}
		.a{
			color:pink;
		}
		.b{
			font-size: 20px;
		}
		.c{
			color:white;
			background: black;
		}
		/*#main1{
			position: absolute;
		}*/
	</style>
</head>
<body>
	<header>
		<h1>js常用方法</h1>
		<hr>
	</header>
	<section>
		<div id="main1" >
			<p class="cc">1</p>
			<p class="cc">2</p>
			<p class="cc">3</p>
		</div>
		<div id="main2">
			<p class="cc">1</p>
			<p class="cc">2</p>
			<p class="cc">3</p>
		</div>
	</section>
</body>
<script type="text/javascript" src="js封装库.js"></script>
<script type="text/javascript">
	/*
	 		API调用
	 */
	
	// console.log($().getId("main").css('color','red'));
	// console.log($().getTagName("p").css('color','blue').html('aaa'));
	// console.log($().getTagName("p").css('background'));
	// console.log($().getClass("cc","main2").eq(1).css('color','red'));
	// $().getId("main1").css("color",'red');
	// $().getId("main2").css("color",'blue');
	// $().getId("main1").addClass("a").addClass("b");
	// $().getId("main1").removeClass("a");
	// $().getId("main1").hover(function(){
	// 	$().getId("main1").hide();
	// },function(){
	// 	$().getId("main1").show();
	// });
	// $().getId("main1").hover(function(){
	// 	$(this).getId("main1").hide();
	// },function(){
	// 	$(this).getId("main1").show();
	// });
	// $().getId("main1").center(100,200);
	// $().getId("main1").center(200,300).resize(function(){
	// 	$().getId("main1").center(200,300).center(300,400);
	// });
</script>
</html>

$().addClass(className) :  添加类名

$().addClass(className) :  添加类名