封装自己的js库

最新推荐文章于 2024-12-30 11:30:39 发布

原创最新推荐文章于 2024-12-30 11:30:39 发布 · 1.3k 阅读

2 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

47 篇文章

订阅专栏

这篇博客介绍如何封装一个基础的JavaScript库，包括选择器功能如通过ID、标签名和类名获取元素，以及添加、删除CSS规则和样式，设置HTML内容，触发点击事件等。示例代码展示了库的使用方法。

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

<script type="text/javascript">
//javascript 可作外部调用
//base.js
// 前台调用
var $ = function(){
	return new Base();
};
// 基础库，Base 基础库的核心对象
function Base(){
	// 创建一个数组，来保存获取的节点和节点数组,之所以放在对象里面是防止公有化
	this.elements = [];
}
// 获取ID
Base.prototype.getId = function(id){
	this.elements.push(document.getElementById(id));
	return this;
}
// 获取元素节点
Base.prototype.getTagName = function(tag){
	var tags = document.getElementsByTagName(tag)
	for(var i = 0;i < tags.length;i++){
		this.elements.push(tags[i]);
	}
	return this;
}
// 添加link或style规则
Base.prototype.addRule = function(num,selectorText,cssText,position){
	var sheet = document.styleSheets[num];
	if(typeof sheet.insertRule != 'undefined'){
		// w3c
		sheet.insertRule(selectorText +'{'+ cssText +'}',position);
	}else if(typeof sheet.addRule != 'undefined'){
		// ie
		sheet.addRule(selectorText,cssText,position);
	}
	return this;
}
// 移除link或style规则
Base.prototype.removeRule = function(num,index){
	var sheet = document.styleSheets[num];
	if(typeof sheet.deleteRule != 'undefined'){
		// w3d
		sheet.deleteRule(index);
	}else if(typeof sheet.removeRule != 'undefined'){
		// ie
		sheet.removeRule(index);
	}
	return this;
}
// 设置 css
Base.prototype.css = function(attr,value){
	for(var i = 0;i < this.elements.length;i++){
		if(arguments.length == 1){
			// return this.elements[i].style[attr];
			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];
			}
		}
		this.elements[i].style[attr] = value;
	}
	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|$)'))){
			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|$)'))){
			this.elements[i].className = this.elements[i].className.replace(new RegExp('(\\s|^)'+className+'(\\s|$)'),' ')
		}
	}
	return this;
}
// 获取class节点数组
Base.prototype.getClass = function(className,idName){
	var node = null;
	if(arguments.length == 2){
		node = document.getElementById(idName);
	}else{
		node = document;
	}
	var allClass = node.getElementsByTagName('*');
	for(var i = 0;i < allClass.length;i++){
		if(allClass[i].className == className){
			this.elements.push(allClass[i]);
		}
	}
	return this;
}
// 获取某一个节点
Base.prototype.getElement = function(num){
	var element = this.elements[num];
	this.elements = [];
	this.elements[0] = element;
	return this;
}
// 设置html
Base.prototype.html = function(str){
	for(var i = 0;i < this.elements.length;i++){
		if(arguments.length == 0){
			return this.elements.innerHTML
		}
		this.elements[i].innerHTML = str;
	}
	return this;
}
// 触发单击事件
Base.prototype.click = function(fn){
	for(var i = 0;i < this.elements.length;i++){
		this.elements[i].onclick = fn;
	}
	return this;
}
//demo.js
window.onload = function(){
	$().getClass('red','zone').html('name');
	$().getTagName('p').addClass('a').addClass('b').addClass('c').addClass('d');
	$().removeRule(0);
	$().addRule(0,"body","background:purple",0).addRule(0,"div","color:white",1);
}
</script>