封装自己的js库

最新推荐文章于 2024-09-06 17:19:50 发布

编程之上

最新推荐文章于 2024-09-06 17:19:50 发布

阅读量1.3k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/ruizhengyun/article/details/45040765

版权

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

摘要由CSDN通过智能技术生成

<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(selec