javascript之博客前端连缀，css自定义封装代码笔记

最新推荐文章于 2024-04-08 14:08:35 发布

chenchudongsg

最新推荐文章于 2024-04-08 14:08:35 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签：前端 javascript

本文链接：https://blog.youkuaiyun.com/chenchudongsg/article/details/39851893

javascript 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一个自定义的JavaScript封装库，该库提供了一系列实用的方法，如通过ID、标签名和类名选择DOM元素，以及操作这些元素的样式、内容和事件等。通过链式调用的方式简化了网页开发过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自定义base.js封装库：

/**
博客前端+封装库


var Base={
	$:function(id){
		return document.getElementById(id);
	},
	$$:function(name){
		 return document.getElementsByName(name);
	},
	$$$:function(tag){
		return document.getElementsByTagName(tag);
	}
};

var Base={
	getById:function(id){
		return document.getElementById(id);
	},
	getByName:function(name){
		 return document.getElementsByName(name);
	},
	getByTageName:function(tag){
		return document.getElementsByTagName(tag);
	}
};

*/
/********************自定义封装***************************/
function $(){
 return new Base();//每次创建一个Base对象，防止页面共用同一个Base对象
}
//基础库
function Base(){
	this.elements=[];//创建一个临时数组。存放元素节点对象
}
//通过id获取节点
Base.prototype.getById=function(id){
		this.elements.push(document.getElementById(id));
		return this;
	};

//通过元素名称获取节点
Base.prototype.getByTagName=function(tag){
        var	tags=document.getElementsByTagName(tag);
		for(var i=0;i<tags.length;i++){
			this.elements.push(tags[i]);
		}
		return this;
	};


//获取class节点数组
Base.prototype.getClass=function(className,idName){
		var node=null;
		if(arguments.length==2){//指定区域div中的所有class集合
			node=document.getElementById(idName);
		}else{
			node=document;
		}
		var all=node.getElementsByTagName('*');
		for(var i=0;i<all.length;i++){
			if(all[i].className==className){
				this.elements.push(all[i]);
			}
		}
		return this;
	}

//获取class节点集合中的某一个节点
Base.prototype.getElement=function(num){
		var element=this.elements[num];
		this.elements=[];//清空原来的节点集合
		this.elements[0]=element;
		return this;
	}

//添加class
Base.prototype.addClass=function(className){
	for(var i=0;i<this.elements.length;i++){
		if(this.elements[i].className.match(new RegExp('(\\s|^)'+className+ '(\\s|$)'))){//避免重复相同的class
			this.elements[i].className+=" "+className;
		}
	}
	return this;
}

//移除class
Base.prototype.removeClass=function(className){
	for(var i=0;i<this.elements.length;i++){
		if(this.elements[i].className.match(new RegExp('(\\s|^)'+className+ '(\\s|$)'))){//避免重复相同的class
			this.elements[i].className= this.elements[i].className.replace(new RegExp("\\s|^"+className+'(\\s|$)'));
		}
	}
	return this;
}

//设置样式
Base.prototype.css=function(attr,value){
	for(var i=0;i<this.elements.length;i++){
		if(arguments.length==1){
			//获取外部样式表的设置
			if(typeof window.getComputedStyle!='undefined'){//W3C
				return window.getComputedStyle(this.elements[i],null)[attr];
			}else if(typeof this.elements[i].currentStyle !='undefined'){//IE
				return this.elements[i].currentStyle[attr];
			}
			//return this.elements[i].style[attr];//获取css属性内容
		}
		this.elements[i].style[attr]=value;
	}
	return this;
}
//设置节点内容
Base.prototype.html=function(text){
	for(var i=0;i<this.elements.length;i++){
		if(arguments.length==0){
			return this.elements[i].innerHTML;//获取节点内容
		}
		this.elements[i].innerHTML=text;
	}
	return this;
}
//设置点击事件
Base.prototype.click=function(fn){
	 for(var i=0;i<this.elements.length;i++){
		this.elements[i].onclick=fn;
	}
	return this;
}

html内容：

<!DOCTYPE html>
<html>
<head>
	 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	 <link rel="stylesheet" type="text/css" href="style.css">
	<script type="text/javascript" src="Base.js"></script>
	<script type="text/javascript" src="demo3.js"></script>
	<script type="text/javascript">
	</script>
</head>
	<body>	
		<div id="box">
			盒子
		</div>
		<div id="aaa">
			<p class='pclass'>段落1</p>
			<p class='pclass'>段落1</p>
			<p class='pclass'>段落1</p>
		</div>

		<div id="bbb">
			<p class='pclass'>段落1</p>
			<p class='pclass'>段落1</p>
			<p class='pclass'>段落1</p>
		</div>
		
	</body>
</html>

demo3.js:

/***************连缀：链式编程*************************/
/*
	Base.getById('box').css('colr','red').html('').click(function(){
		alert('');
	}));
	Base.getById('box');//返回的divEelement
	Base.getById('box').css('colr','red');//返回的是Base对象
*/

window.onload=function(){
	//alert($().getById('box'));
	//$().getById('box').css('color','red').css('backgroundColor','black');
	//$().getByTagName('p').css('color','green').html('标题').click(function(){
		//alert('测试');
	//});
	//$().getById('box').css('font-size','20px');
	//获取外部样式表的属性值
	//alert($().getById('box').css('font-size'));

	//$().getClass('pclass').css('color','red');

	$().getClass('pclass').getElement(2).css('color','red');
	$().getClass('pclass','aaa').css('color','red');
	
};