【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 = _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') { // W3C

114                 css.push(window.getComputedStyle(this.elements[i], null)[cssKey]);

115             } else if (typeof this.elements[i].currentStyle != 'undefined') { // IE 6/7/8

116                 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 // 添加样式规则Rule

156 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') { // W3C

162             sheet.insertRule(ruleName + ' {' + ruleText + '}', position);

163         } else if (sheet.addRule != 'undefined') { // IE 6/7/8

164             sheet.addRule(ruleName, ruleText, position);

165         }

166     }

167     return this;

168 };

169 

170 // 移除样式规则Rule

171 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') { // W3C

177             sheet.deleteRule(position);

178         } else if (typeof sheet.removeRule != 'undefined') { // IE 6/7/8

179             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/