首页 > 代码库 > 【JavaScript 封装库】Prototype 原型版发布!

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

  1 /*  2     源码作者: 石不易(Louis Shi)  3     联系方式: http://www.shibuyi.net  4     ===================================================================================================  5     程序名称: JavaScript 封装库 Prototype 版  6     迭代版本: 无  7     功能总数: 14 个  8     功能介绍:   9         1. 实现代码连缀 10         2. id / name / tagName / class 节点获取 11         3. class 选择器添加与移除 12         4. css 规则添加与移除 13         5. 设置与获取元素内部文本 14         6. 设置与获取css 15         7. 实现 click 事件 16 */ 17  18 // 实例化入口 19 function $() { 20     return new Base(); 21 } 22  23 // 封装库构造方法 24 function Base() { 25     this.elements = []; 26 } 27  28 // 获取id元素节点 29 Base.prototype.getId = function (id) { 30     this.elements.push(document.getElementById(id)); 31     return this; 32 }; 33  34 // 获取name元素节点 35 Base.prototype.getName = function (name, position) { 36     if (typeof position != ‘undefined‘) { // 局部 37         var nodes = $().getTagName(‘*‘, position).elements; 38         for (var i = 0; i < nodes.length; i ++) { 39             if (nodes[i].getAttribute(‘name‘) == name) this.elements.push(nodes[i]); 40         } 41     } else { // 全局 42         var nodes = document.getElementsByName(name); 43         for (var i = 0; i < nodes.length; i ++) { 44             this.elements.push(nodes[i]); 45         } 46     } 47     return this; 48 }; 49  50 // 获取tagName元素节点 51 Base.prototype.getTagName = function (tagName, position) { 52     if (typeof position != ‘undefined‘) { // 局部 53         var nodes = $().getId(position).elements[0].getElementsByTagName(tagName); 54     } else { // 全局 55         var nodes = document.getElementsByTagName(tagName); 56     } 57     for (var i = 0; i < nodes.length; i ++) { 58         this.elements.push(nodes[i]); 59     } 60     return this; 61 }; 62  63 // 获取class元素节点 64 Base.prototype.getClass = function (className, position) { 65     if (typeof position != ‘undefined‘) { // 局部 66         var nodes = $().getTagName(‘*‘, position).elements; 67     } else { // 全局 68         var nodes = $().getTagName(‘*‘).elements; 69     } 70     for (var i = 0; i < nodes.length; i ++) { 71         if (nodes[i].className == className) this.elements.push(nodes[i]); 72     } 73     return this; 74 }; 75  76 // 获取与设置innerHTML 77 Base.prototype.html = function (text) { 78     if (typeof text != ‘undefined‘) { // 设置 79         for (var i = 0; i < this.elements.length; i ++) { 80             this.elements[i].innerHTML = text; 81         } 82     } else { // 获取 83         var html = []; 84         for (var i = 0; i < this.elements.length; i ++) { 85             html.push(this.elements[i].innerHTML); 86         } 87         return html; 88     } 89     return this; 90 }; 91  92 // 获取与设置CSS 93 Base.prototype.css = function (cssKey, cssValue) { 94     if (typeof cssValue != ‘undefined‘ || cssKey instanceof Array) { // 设置 95         for (var i = 0; i < this.elements.length; i ++) { 96             if (cssKey instanceof Array) { 97                 var _cssKye, _cssValue, _css; 98                 for (var j = 0; j < cssKey.length; j ++) { 99                     if (cssKey[j].match(/([a-z]+)\s*=\s*([\w#]+)/i) != null) { // [‘color=red‘, ‘backgroundColor = green‘]100                         _css = cssKey[j].split(/\s*=\s*/);101                         _cssKey = _css[0];102                         _cssValue = http://www.mamicode.com/_css[1];103                         this.elements[i].style[_cssKey] = _cssValue;104                     }105                 }106             } else {107                 this.elements[i].style[cssKey] = cssValue;108             }109         }110     } else { // 获取111         var css = [];112         for (var i = 0; i < this.elements.length; i ++) {113             if (typeof window.getComputedStyle != ‘undefined‘) { // W3C114                 css.push(window.getComputedStyle(this.elements[i], null)[cssKey]);115             } else if (typeof this.elements[i].currentStyle != ‘undefined‘) { // IE 6/7/8116                 css.push(this.elements[i].currentStyle[cssKey]);117             }118         }119         return css;120     }121     return this;122 };123 124 // 检测class选择器125 Base.prototype.hasClass = function (className) {126     var results = [];127     for (var i = 0; i < this.elements.length; i ++) {128         results.push(!!this.elements[i].className.match(new RegExp(‘(\\s|^)‘ + className + ‘(\\s|$)‘)));129     }130     return results;131 };132 133 // 添加class选择器134 Base.prototype.addClass = function (className) {135     var space = ‘‘;136     var results = this.hasClass(className);137     for (var i = 0; i < results.length; i ++) {138         if (!results[i]) {139             if (this.elements[i].className != ‘‘) space = ‘ ‘;140             this.elements[i].className += space + className;141         }142     }143     return this;144 };145 146 // 移除class选择器147 Base.prototype.removeClass = function (className) {148     var results = this.hasClass(className);149     for (var i = 0; i < results.length; i ++) {150         if (results[i]) this.elements[i].className = this.elements[i].className.replace(new RegExp(‘(\\s|^)‘ + className + ‘(\\s|$)‘), ‘‘);151     }152     return this;153 };154 155 // 添加样式规则Rule156 Base.prototype.addRule = function (ruleName, ruleText, index, position) {157     if (typeof index == ‘undefined‘) index = 0;158     if (typeof position == ‘undefined‘) position = 0;159     var sheet = document.styleSheets[index];160     if (typeof sheet != ‘undefined‘) {161         if (typeof sheet.insertRule != ‘undefined‘) { // W3C162             sheet.insertRule(ruleName + ‘ {‘ + ruleText + ‘}‘, position);163         } else if (sheet.addRule != ‘undefined‘) { // IE 6/7/8164             sheet.addRule(ruleName, ruleText, position);165         }166     }167     return this;168 };169 170 // 移除样式规则Rule171 Base.prototype.removeRule = function (index, position) {172     if (typeof index == ‘undefined‘) index = 0;173     if (typeof position == ‘undefined‘) position = 0;174     var sheet = document.styleSheets[index];175     if (typeof sheet != ‘undefined‘) {176         if (typeof sheet.deleteRule != ‘undefined‘) { // W3C177             sheet.deleteRule(position);178         } else if (typeof sheet.removeRule != ‘undefined‘) { // IE 6/7/8179             sheet.removeRule(position);180         }181     }182     return this;183 };184 185 // 鼠标 click 事件186 Base.prototype.click = function (method) {187     if (method instanceof Function) {188         for (var i = 0; i < this.elements.length; i ++) {189             this.elements[i].onclick = method;190         }191     }192     return this;193 };

 

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

 

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

 

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

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

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

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