/* 源码作者: 石不易(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 原型版核心源码与实例演示的获取请移动至官网下载!
感谢大家积极评测给予意见!
CNBlogs 博客:http://www.cnblogs.com/shibuyi/
CSDN 博客:http://blog.csdn.net/louis_shi/
ITeye 博客:http://shibuyi.iteye.com/
相关推荐
JavaScript 封装库:BETA 4.0 版
javascript prototype原型操作笔记.docx
JavaScript中的prototype(原型)属性研究
主要介绍了JavaScript使用prototype原型实现的封装继承多态,涉及javascript prototype与面向对象程序设计相关操作技巧,需要的朋友可以参考下
主要介绍了javascript 对象 与 prototype 原型用法,结合实例形式分析了javascript 对象 与 prototype 原型实现对象创建、继承、拷贝等相关操作技巧,需要的朋友可以参考下
主要介绍了JavaScript中的prototype原型学习指南,包括原型链与原型继承等重要知识,需要的朋友可以参考下
javascript的prototype原型简单介绍: prototype原型是javascript中特别重要的概念,属于必须要掌握,如果没有良好的掌握的话,进一步用好或者学好js基本是不可能的实现的事情,并且此概念稍有难度,可能对于初次接触...
prototype js脚本库prototype js脚本库prototype js脚本库prototype js脚本库
用过JavaScript的同学们肯定都对prototype如雷贯耳,但是这究竟是个什么东西却让初学者莫衷一是,只知道函数都会有一个prototype属性,可以为其添加函数供实例访问,其它的就不清楚了,最近看了一些 JavaScript高级...
详解JavaScript中基于原型prototype的继承特性_.docx
最新版Javascript库!支持Cookie、Ajax、BlockUI and so on.
前端面试题,包含JavaScript的闭包,作用域,原型,原型链,上下文环境以及DOM,BOM封装函数深度克隆,以及一些常见的·JS问题,试题简单但是容易混淆,作为前端工程师必考题
JavaScript中的prototype概念恰如其分地反映了这个词的内含,我们不能将其理解为C++的prototype那种预先声明的概念。 JavaScript 的所有function类型的对象都有一个prototype属性。这个prototype属性本身又是一个...
主要介绍了JavaScript中的原型prototype完全解析,prototype可是js界"一切皆对象"论调的重要支撑,讲解了__proto__属性和原型链等干货,需要的朋友可以参考下
JavaScript_Prototype(源代码+中文手册)
HTML UI控件 推荐3款javascript封装库+UI界面控件,当然少不了鼎鼎大名的jQuery
轻松建立有高度互动的web2.0特性的富客户端页面