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') { // 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/
新闻热点
疑难解答