最近通过研究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) : 添加类名