自制JS库详解-优快云博客

/*
	使用原生JS开发一个库:
	JS库：按照一定逻辑将日常开发中常用功能给封装起来
	常见的JS库：jQuery  YUI   WEUI  prototype .....

	常见功能：getID  getTagName  getIndex   设置属性、设置样式.....
*/
//库对象
//创建Base对象实例
function $(selector){
	return new Base(selector);
}

//构造函数
function Base(selector){
	this.eles=[];
	if (typeof selector=='object') {
	    this.eles.push(selector);//将节点对象保存起来
	}else if (typeof selector==='string') {
		this.getElementBySelector(selector);
	}
}

//在原型上添加方法

//根据选择器查找元素
Base.prototype.getElementBySelector=function(selector){
	var os=document.querySelectorAll(selector);
	//遍历 存入属性数组
	for(var i=0;i<os.length;i++){
		this.eles.push(os[i]);
	}
	return this;
};

Base.prototype.getId=function(id){
	var o=document.querySelector(id);
		this.eles.push(o);//将节点对象添加到数组中
		return this;
};
/*
  一个参数：在全文查找
  两个参数：在指定节点下查找
*/
Base.prototype.getTag=function(tagName,parentNode){
	 var os;//保存节点
	 if (parentNode!=undefined) {
	 	 //在指定节点下查找节点对象
         os=parentNode.querySelectorAll(tagName);
	 }else{
	 	 //在全局中查找
	 	 os=document.querySelectorAll(tagName);
	 }
        //遍历集合，将节点对象保存在eles中
        for(var i=0;i<os.length;i++){
        	this.eles.push(os[i]);
        }
        return this;//返回this，目的就是为了继续调用该对象的其他方法
};

Base.prototype.getClass=function(className,parentNode){
	 var oc;//保存节点
	 if (parentNode!=undefined) {
	 	 //在指定节点下查找节点对象
         oc=parentNode.querySelectorAll(className);
	 }else{
	 	 //在全局中查找
	 	 oc=document.querySelectorAll(className);
	 }
        //遍历集合，将节点对象保存在eles中
        for(var i=0;i<oc.length;i++){
        	this.eles.push(oc[i]);
        }
        return this;//返回this，目的就是为了继续调用该对象的其他方法
};
Base.prototype.getName=function(name,parentNode){
	 var on;//保存节点
	 if (parentNode!=undefined) {
	 	 //在指定节点下查找节点对象
         on=parentNode.querySelectorAll(name);
	 }else{
	 	 //在全局中查找
	 	 on=document.querySelectorAll(name);
	 }
        //遍历集合，将节点对象保存在eles中
        for(var i=0;i<on.length;i++){
        	this.eles.push(on[i]);
        }
        return this;//返回this，目的就是为了继续调用该对象的其他方法
};

//设置样式
// 若有一个参数，功能为：批量设置样式或者获取指定样式值
// 若有两个参数，功能为：设置单个样式
Base.prototype.css=function(per,value){
	if (value!=undefined) {
		//两个参数，设置单个样式
		//遍历节点对象
        for(var i=0;i<this.eles.length;i++){
        	this.eles[i].style[per]=value;
        }
	}else if (typeof per=="object") {
		//一个参数，批量设置
         for(var j=0;j<this.eles.length;j++){
         	for(var m in per){
                  this.eles[j].style[m]=per[m];
         	}
         }
	}else{
		//一个参数，获取样式
		//获取第一个元素节点的值
		var o=this.eles[0];
		var s=o.style[per]?o.style[per]:window.getComputedStyle(o,null)[per];
		return s;

	}
	  
        return this;//为了连缀
};

//追加class
Base.prototype.addClass=function(cls){
	//遍历
	for(var i=0;i<this.eles.length;i++){
		//class='';class='one';
		//class='on' class='one on';
		//获取节点对象修改之前的class值
		var preClass=this.eles[i].className;
		if (preClass=='') {
			//原先没有class值
			this.eles[i].className=cls;
		}else{
			//节点改变前，有class，---->追加
			this.eles[i].className=preClass+' '+cls
		}
	}
	return this;
}
//移除class
Base.prototype.removeClass=function(cls){
	for(var i=0;i<this.eles.length;i++){
		var preClass=this.eles[i].className;//改变之前的class值
		var arr=preClass.split(' ');//利用空格将class拆分成数组
		//多个class
		if (arr.length!=1) {
			arr.splice(arr.indexOf(cls),1)//删除数组中需要祛除的class值
			var newClass=arr.join(' ');//转成字符串class
			this.eles[i].className=newClass;
		}else{
			//单个class
			this.eles[i].className='';
		}
	}
	return this;
};
//设置节点对象的内容
Base.prototype.val=function(value){
	//有参数时，设置
	if (value!=undefined) {
		for(var i=0;i<this.eles.length;i++){
		this.eles[i].innerHTML=value;
	    }
	}else{
		//无参数时，获取
		return this.eles[0].innerHTML;
	}
	
	return this;
}
//设置属性
// 若有一个参数，功能为：批量设置属性或者获取指定属性值
// 若有两个参数，功能为：设置单个属性
Base.prototype.attr=function(per,value){
	if (value!=undefined) {
		//两个参数，设置单个属性
		//遍历节点对象
        for(var i=0;i<this.eles.length;i++){
        	//对象[属性名]
        	this.eles[i][per]=value;
        }
	}else if (typeof per=="object") {
		//一个参数，批量设置
         for(var j=0;j<this.eles.length;j++){
         	for(var m in per){
                  this.eles[j][m]=per[m];
         	}
         }
	}else{
		//一个参数，获取属性
		// return this.eles[0][per];//绝对路径
		return this.eles[0].getAttribute(per);//相对路径
	}
        return this;//为了连缀
};

//事件

Base.prototype.click=function(fn){
	//遍历节点对象
	for(var i=0;i<this.eles.length;i++){
		this.eles[i].onclick=fn;
	}
	return this;
};
//鼠标进入事件
Base.prototype.mouseenter=function(fn_enter){
	for(var i=0;i<this.eles.length;i++){
		this.eles[i].onmouseenter=fn_enter;
	}
	return this;
};
//鼠标离开事件
Base.prototype.mouseleave=function(fn_leave){
	for(var i=0;i<this.eles.length;i++){
		this.eles[i].onmouseleave=fn_leave;
	}
	return this;
};
//hover事件
Base.prototype.hover=function(fn_enter,fn_leave){
	for(var i=0;i<this.eles.length;i++){
		this.eles[i].onmouseenter=fn_enter;
		this.eles[i].onmouseleave=fn_leave;
	}
	return this;
};
//获取第一个节点对象
Base.prototype.first=function(){
	var o=this.eles[0];
	this.eles=[]//清空数组
	this.eles.push(o);
	return this;
};
//获取最后一个节点对象
Base.prototype.last=function(){
	var lastNode=this.eles[this.eles.length-1];
	this.eles=[]//清空数组
	this.eles.push(lastNode);
	return this;
};
/*
	查找指定索引节点对象
	@parms  index  索引  
*/
Base.prototype.eq=function(index){
	var o=this.eles[index];
	this.eles=[];
	this.eles.push(o);
	return this;
}
//获取节点对象的个数
Base.prototype.size=function(){
	return this.eles.length;
};
//获取指定节点的位置
Base.prototype.index=function(){

};
//查找兄弟节点
Base.prototype.siblings=function(){
	var node=this.eles[0];//当前节点
	var allNode=node.parentNode.children;//父节点的所有孩子节点
	this.eles=[];//清空
	//遍历所有的节点
	for(var i=0;i<allNode.length;i++){
		if (allNode[i]!=node) {
			this.eles.push(allNode[i]);//将兄弟节点存入属性数组中
		}
	}
	return this;
};

//效果
//显示
Base.prototype.show=function(){
	for(var i=0;i<this.eles.length;i++){
		this.eles[i].style.display='block';
	}
	return this;
};

Base.prototype.hide=function(){
	for(var i=0;i<this.eles.length;i++){
		this.eles[i].style.display='none';
	}
	return this;
};

//切换
Base.prototype.toggle=function(){
	for(var i=0;i<this.eles.length;i++){
		var s=this.eles[i].style.display;//行内
		s=s==''?window.getComputedStyle(this.eles[i],null).display:s;
		if (s=='block') {
			this.eles[i].style.display='none';
		}else{
			this.eles[i].style.display='block';
		}

	}
	return this;
};