`
石不易
  • 浏览: 7711 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

【JavaScript 封装库】Prototype 原型版发布!

阅读更多
/*
	源码作者: 石不易(Louis Shi)
	联系方式: http://www.shibuyi.net
	===================================================================================
	程序名称: JavaScript 封装库 Prototype 版
	迭代版本: 无
	功能总数: 14 个
	功能介绍: 
		1. 实现代码连缀
		2. id / name / tagName / class 节点获取
		3. class 选择器添加与移除
		4. css 规则添加与移除
		5. 设置与获取元素内部文本
		6. 设置与获取css
		7. 实现 click 事件
*/

// 实例化入口
function $() {
	return new Base();
}

// 封装库构造方法
function Base() {
	this.elements = [];
}

// 获取id元素节点
Base.prototype.getId = function (id) {
	this.elements.push(document.getElementById(id));
	return this;
};

// 获取name元素节点
Base.prototype.getName = function (name, position) {
	if (typeof position != 'undefined') { // 局部
		var nodes = $().getTagName('*', position).elements;
		for (var i = 0; i < nodes.length; i ++) {
			if (nodes[i].getAttribute('name') == name) this.elements.push(nodes[i]);
		}
	} else { // 全局
		var nodes = document.getElementsByName(name);
		for (var i = 0; i < nodes.length; i ++) {
			this.elements.push(nodes[i]);
		}
	}
	return this;
};

// 获取tagName元素节点
Base.prototype.getTagName = function (tagName, position) {
	if (typeof position != 'undefined') { // 局部
		var nodes = $().getId(position).elements[0].getElementsByTagName(tagName);
	} else { // 全局
		var nodes = document.getElementsByTagName(tagName);
	}
	for (var i = 0; i < nodes.length; i ++) {
		this.elements.push(nodes[i]);
	}
	return this;
};

// 获取class元素节点
Base.prototype.getClass = function (className, position) {
	if (typeof position != 'undefined') { // 局部
		var nodes = $().getTagName('*', position).elements;
	} else { // 全局
		var nodes = $().getTagName('*').elements;
	}
	for (var i = 0; i < nodes.length; i ++) {
		if (nodes[i].className == className) this.elements.push(nodes[i]);
	}
	return this;
};

// 获取与设置innerHTML
Base.prototype.html = function (text) {
	if (typeof text != 'undefined') { // 设置
		for (var i = 0; i < this.elements.length; i ++) {
			this.elements[i].innerHTML = text;
		}
	} else { // 获取
		var html = [];
		for (var i = 0; i < this.elements.length; i ++) {
			html.push(this.elements[i].innerHTML);
		}
		return html;
	}
	return this;
};

// 获取与设置CSS
Base.prototype.css = function (cssKey, cssValue) {
	if (typeof cssValue != 'undefined' || cssKey instanceof Array) { // 设置
		for (var i = 0; i < this.elements.length; i ++) {
			if (cssKey instanceof Array) {
				var _cssKye, _cssValue, _css;
				for (var j = 0; j < cssKey.length; j ++) {
					if (cssKey[j].match(/([a-z]+)\s*=\s*([\w#]+)/i) != null) { // ['color=red', 'backgroundColor = green']
						_css = cssKey[j].split(/\s*=\s*/);
						_cssKey = _css[0];
						_cssValue = _css[1];
						this.elements[i].style[_cssKey] = _cssValue;
					}
				}
			} else {
				this.elements[i].style[cssKey] = cssValue;
			}
		}
	} else { // 获取
		var css = [];
		for (var i = 0; i < this.elements.length; i ++) {
			if (typeof window.getComputedStyle != 'undefined') { // W3C
				css.push(window.getComputedStyle(this.elements[i], null)[cssKey]);
			} else if (typeof this.elements[i].currentStyle != 'undefined') { // IE 6/7/8
				css.push(this.elements[i].currentStyle[cssKey]);
			}
		}
		return css;
	}
	return this;
};

// 检测class选择器
Base.prototype.hasClass = function (className) {
	var results = [];
	for (var i = 0; i < this.elements.length; i ++) {
		results.push(!!this.elements[i].className.match(new RegExp('(\\s|^)' + className + '(\\s|$)')));
	}
	return results;
};

// 添加class选择器
Base.prototype.addClass = function (className) {
	var space = '';
	var results = this.hasClass(className);
	for (var i = 0; i < results.length; i ++) {
		if (!results[i]) {
			if (this.elements[i].className != '') space = ' ';
			this.elements[i].className += space + className;
		}
	}
	return this;
};

// 移除class选择器
Base.prototype.removeClass = function (className) {
	var results = this.hasClass(className);
	for (var i = 0; i < results.length; i ++) {
		if (results[i]) this.elements[i].className = this.elements[i].className.replace(new RegExp('(\\s|^)' + className + '(\\s|$)'), '');
	}
	return this;
};

// 添加样式规则Rule
Base.prototype.addRule = function (ruleName, ruleText, index, position) {
	if (typeof index == 'undefined') index = 0;
	if (typeof position == 'undefined') position = 0;
	var sheet = document.styleSheets[index];
	if (typeof sheet != 'undefined') {
		if (typeof sheet.insertRule != 'undefined') { // W3C
			sheet.insertRule(ruleName + ' {' + ruleText + '}', position);
		} else if (sheet.addRule != 'undefined') { // IE 6/7/8
			sheet.addRule(ruleName, ruleText, position);
		}
	}
	return this;
};

// 移除样式规则Rule
Base.prototype.removeRule = function (index, position) {
	if (typeof index == 'undefined') index = 0;
	if (typeof position == 'undefined') position = 0;
	var sheet = document.styleSheets[index];
	if (typeof sheet != 'undefined') {
		if (typeof sheet.deleteRule != 'undefined') { // W3C
			sheet.deleteRule(position);
		} else if (typeof sheet.removeRule != 'undefined') { // IE 6/7/8
			sheet.removeRule(position);
		}
	}
	return this;
};

// 鼠标 click 事件
Base.prototype.click = function (method) {
	if (method instanceof Function) {
		for (var i = 0; i < this.elements.length; i ++) {
			this.elements[i].onclick = method;
		}
	}
	return this;
};

 

关于 Prototype 原型版核心源码与实例演示的获取请移动至官网下载!

 

感谢大家积极评测给予意见!

 

官网地址:http://www.shibuyi.net

 

CNBlogs 博客:http://www.cnblogs.com/shibuyi/

 

CSDN 博客:http://blog.csdn.net/louis_shi/

 

ITeye 博客:http://shibuyi.iteye.com/

 

2
0
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics