首页 > 代码库 > 【JavaScript 封装库】BETA 2.0 测试版发布！
【JavaScript 封装库】BETA 2.0 测试版发布！
1 /* 2 源码作者: 石不易(Louis Shi) 3 联系方式: http://www.shibuyi.net 4 =================================================================================================== 5 程序名称: JavaScript 封装库 BETA 2.0 版 6 迭代版本: BETA 1.0 7 功能总数: 50 个 8 新增总数: 6 个 9 删除总数: 0 个 10 追加功能: 11 1. 库方法: 设置与获取滚动条 12 2. 库方法: 定位器筛选 13 3. 库方法: 检测元素从属关系(直接从属) 14 4. 库方法: 获取网页可视区尺寸 15 5. 库方法: 禁止页面滚动(修正浏览器BUG) 16 ... 17 优化功能: 18 1. 取消了“隶属方法”, 增加了“库方法”并与“特效”和“事件”组成集合, 封装库结构更加清晰 19 2. 元素节点获取更加智能, 支持 class / name / tagName / id 在内的局部搜索 20 3. 添加与删除元素节点更加方便容易, 支持 class / name / tagName / id 直接定位 21 ... 22 删除功能: 23 无 24 */ 25 26 // 实例化封装库 27 function $(_this) { 28 return new Base(_this); 29 } 30 31 // 封装库构造方法 32 function Base(_this) { 33 this.elements = []; 34 if (typeof _this == ‘object‘ && _this !== null) this.elements.push(_this); 35 } 36 37 // 获取元素节点 38 Base.prototype.getNodes = function () { 39 if (this.elements.length == 0) return ‘没有任何节点对象‘; 40 if (this.elements.length == 1) return this.elements[0]; 41 return this.elements; 42 }; 43 44 // 获取 id 元素节点 45 Base.prototype.getId = function (ids) { 46 if (ids instanceof Array) { // 集群 47 for (var i in ids) { 48 this.getId(ids[i]); 49 } 50 } else { // 单个 51 var node = document.getElementById(ids); 52 if (node === null) return this; 53 for (var i =0; i < this.elements.length; i ++) { 54 if (this.elements[i] == node) return this; 55 } 56 this.elements.push(node); 57 } 58 return this; 59 }; 60 61 // 获取 name 元素节点 62 Base.prototype.getName = function (name, position) { 63 var nodes = [], selector = []; 64 if (typeof position != ‘undefined‘) { // 局部 65 selector = Base.positioner(position); 66 if (selector instanceof Array) { // 集群 67 for (var i = 0; i < selector.length; i ++) { 68 nodes.push(selector[i].getElementsByTagName(‘*‘)); 69 } 70 } else { // 单个 71 if (typeof selector == ‘object‘) nodes = selector.getElementsByTagName(‘*‘); // 防止 IE 无法识别 name 属性 72 } 73 } else { // 全局 74 nodes = document.getElementsByName(name); 75 } 76 for (var i = 0; i < nodes.length; i ++) { 77 if (typeof nodes[i].length != ‘undefined‘ && typeof nodes[i].item != ‘undefined‘) { // 多集群 78 for (var j = 0; j < nodes[i].length; j ++) { 79 if (nodes[i][j].getAttribute(‘name‘) == name) this.elements.push(nodes[i][j]); 80 } 81 } else { // 单集群 82 if (nodes[i].getAttribute(‘name‘) == name) this.elements.push(nodes[i]); 83 } 84 } 85 return this; 86 }; 87 88 // 获取 tagName 元素节点 89 Base.prototype.getTagName = function (tagName, position) { 90 var nodes = [], selector = []; 91 if (typeof position != ‘undefined‘) { // 局部 92 selector = Base.positioner(position); 93 if (selector instanceof Array) { // 集群 94 for (var i = 0; i < selector.length; i ++) { 95 nodes.push(selector[i].getElementsByTagName(tagName)); 96 } 97 } else { // 单个 98 if (typeof selector == ‘object‘) nodes = selector.getElementsByTagName(tagName); // 防止 IE 无法识别 name 属性 99 }100 } else { // 全局101 nodes = document.getElementsByTagName(tagName);102 }103 for (var i = 0; i < nodes.length; i ++) {104 if (typeof nodes[i].length != ‘undefined‘ && typeof nodes[i].item != ‘undefined‘) { // 多集群105 for (var j = 0; j < nodes[i].length; j ++) {106 this.elements.push(nodes[i][j]);107 }108 } else { // 单集群109 this.elements.push(nodes[i]);110 }111 }112 return this;113 };114 115 // 获取 class 元素节点116 Base.prototype.getClass = function (className, position) {117 var nodes = [], selector = [];118 if (typeof position != ‘undefined‘) { // 局部119 selector = Base.positioner(position);120 if (selector instanceof Array) { // 集群121 for (var i = 0; i < selector.length; i ++) {122 nodes.push(selector[i].getElementsByTagName(‘*‘));123 }124 } else { // 单个125 if (typeof selector == ‘object‘) nodes = selector.getElementsByTagName(‘*‘); // 防止 IE 无法识别 name 属性126 }127 } else { // 全局128 nodes = $().getTagName(‘*‘).getNodes();129 }130 for (var i = 0; i < nodes.length; i ++) {131 if (typeof nodes[i] == ‘undefined‘) continue; // 兼容 IE 识别空元素132 if (typeof nodes[i].length != ‘undefined‘ && typeof nodes[i].item != ‘undefined‘) { // 多集群133 for (var j = 0; j < nodes[i].length; j ++) {134 if (Base.hasClass(nodes[i][j], className)) this.elements.push(nodes[i][j]);135 }136 } else { // 单集群137 if (Base.hasClass(nodes[i], className)) this.elements.push(nodes[i]);138 }139 }140 return this;141 };142 143 // 获取与设置 innerHTML144 Base.prototype.html = function (text) {145 if (typeof text != ‘undefined‘) { // 设置146 for (var i = 0; i < this.elements.length; i ++) {147 this.elements[i].innerHTML = text;148 }149 } else { // 获取150 var html = [];151 for (var i = 0; i < this.elements.length; i ++) {152 html.push(this.elements[i].innerHTML);153 }154 if (html.length == 1) return html[0];155 return html;156 }157 return this;158 };159 160 // 获取与设置 value (表单)161 Base.prototype.value = http://www.mamicode.com/function (text) {162 if (typeof text != ‘undefined‘) { // 设置163 for (var i = 0; i < this.elements.length; i ++) {164 if (typeof this.elements[i].value != ‘undefined‘) this.elements[i].value =http://www.mamicode.com/ text;165 }166 } else { // 获取167 var value =http://www.mamicode.com/ [];168 for (var i = 0; i < this.elements.length; i ++) {169 if (typeof this.elements[i].value != ‘undefined‘) value.push(this.elements[i].value);170 }171 if (value.length == 1) return value[0];172 return value;173 }174 return this;175 };176 177 // 获取与设置 CSS178 Base.prototype.css = function (cssKey, cssValue) {179 if (typeof cssValue != ‘undefined‘ || cssKey instanceof Array) { // 设置180 if (cssKey instanceof Array) { // 集群181 var cssPattern = /^([a-z]+)\s*=\s*([\w\(\)\‘\"\\\/\-#\.=%\s]+)$/i;182 var _cssKey = ‘‘, _cssValue = http://www.mamicode.com/‘‘;183 for (var i = 0; i < cssKey.length; i ++) {184 if (cssPattern.test(cssKey[i])) {185 _cssKey = cssPattern.exec(cssKey[i])[1];186 _cssValue = http://www.mamicode.com/cssPattern.exec(cssKey[i])[2];187 for (var j = 0; j < this.elements.length; j ++) {188 this.elements[j].style[_cssKey] = _cssValue;189 }190 }191 }192 } else { // 单个193 for (var i = 0; i < this.elements.length; i ++) {194 this.elements[i].style[cssKey] = cssValue;195 }196 }197 } else { // 获取198 var css = [];199 for (var i = 0; i < this.elements.length; i ++) {200 css.push(Tool.getStyle(this.elements[i], cssKey));201 }202 if (css.length == 1) return css[0];203 return css;204 }205 return this;206 };207 208 // 添加 class 选择器209 Base.prototype.addClass = function (className) {210 if (className instanceof Array) { // 集群211 for (var i = 0; i < className.length; i ++) {212 this.addClass(className[i]);213 }214 } else { // 单个215 var space = ‘‘;216 for (var i = 0; i < this.elements.length; i ++) {217 if (this.elements[i].className != ‘‘) space = ‘ ‘;218 if (!Base.hasClass(this.elements[i], className)) this.elements[i].className += space + className;219 space = ‘‘;220 }221 }222 return this;223 };224 225 // 移除 class 选择器226 Base.prototype.removeClass = function (className) {227 if (className instanceof Array) { // 集群228 for (var i = 0; i < className.length; i ++) {229 this.removeClass(className[i]);230 }231 } else { // 单个232 var elementNode = {};233 for (var i = 0; i < this.elements.length; i ++) {234 elementNode = this.elements[i];235 if (Base.hasClass(elementNode, className)) {236 elementNode.className = elementNode.className.replace(new RegExp(‘\\s+‘ + className + ‘\\s+‘, ‘i‘), ‘ ‘);237 elementNode.className = elementNode.className.replace(new RegExp(‘(\\s+|^)‘ + className + ‘($|\\s+)‘, ‘i‘), ‘‘);238 }239 }240 }241 return this;242 };243 244 // 添加样式规则245 Base.prototype.addRule = function (ruleName, ruleText, rulePosition, sheetIndex) {246 if (ruleName instanceof Array) { // 集群247 if (!ruleText instanceof Array || ruleName.length != ruleText.length) return this;248 for (var i = 0; i < ruleName.length; i ++) {249 this.addRule(ruleName[i], ruleText[i], rulePosition, sheetIndex);250 }251 } else { // 单个252 var rule = Base.checkRule(rulePosition, sheetIndex);253 if (typeof rule.sheet != ‘undefined‘) {254 Tool.addRule(rule.sheet, ruleName, ruleText, rule.position);255 }256 }257 return this;258 };259 260 // 移除样式规则261 Base.prototype.removeRule = function (rulePosition, ruleNumber, sheetIndex) {262 var rule = Base.checkRule(rulePosition, sheetIndex, ruleNumber);263 if (typeof rule.sheet != ‘undefined‘) {264 for (var i = 0; i < rule.number; i ++) {265 Tool.removeRule(rule.sheet, rule.position);266 }267 }268 return this;269 };270 271 /*272 事件集合273 */274 // 鼠标 click 事件275 Base.prototype.click = function (method, mode) {276 if (typeof mode == ‘undefined‘) mode = true;277 if (typeof method == ‘function‘) {278 for (var i = 0; i < this.elements.length; i ++) {279 mode ? Tool.loginEvent(this.elements[i], ‘click‘, method) : Tool.logoutEvent(this.elements[i], ‘click‘, method);280 }281 }282 return this;283 };284 285 // 鼠标 mouseover 事件286 Base.prototype.mouseover = function (method, mode) {287 if (typeof mode == ‘undefined‘) mode = true;288 if (typeof method == ‘function‘) {289 for (var i = 0; i < this.elements.length; i ++) {290 mode ? Tool.loginEvent(this.elements[i], ‘mouseover‘, method) : Tool.logoutEvent(this.elements[i], ‘mouseover‘, method);291 }292 }293 return this;294 };295 296 // 鼠标 mouseout 事件297 Base.prototype.mouseout = function (method, mode) {298 if (typeof mode == ‘undefined‘) mode = true;299 if (typeof method == ‘function‘) {300 for (var i = 0; i < this.elements.length; i ++) {301 mode ? Tool.loginEvent(this.elements[i], ‘mouseout‘, method) : Tool.logoutEvent(this.elements[i], ‘mouseout‘, method);302 }303 }304 return this;305 };306 307 // 鼠标 mousedown 事件308 Base.prototype.mousedown = function (method, mode) {309 if (typeof mode == ‘undefined‘) mode = true;310 if (typeof method == ‘function‘) {311 for (var i = 0; i < this.elements.length; i ++) {312 mode ? Tool.loginEvent(this.elements[i], ‘mousedown‘, method) : Tool.logoutEvent(this.elements[i], ‘mousedown‘, method);313 }314 }315 return this;316 };317 318 // 鼠标 mousemove 事件319 Base.prototype.mousemove = function (method, mode) {320 if (typeof mode == ‘undefined‘) mode = true;321 if (typeof method == ‘function‘) {322 for (var i = 0; i < this.elements.length; i ++) {323 mode ? Tool.loginEvent(this.elements[i], ‘mousemove‘, method) : Tool.logoutEvent(this.elements[i], ‘mousemove‘, method);324 }325 }326 return this;327 };328 329 // 鼠标 mouseup 事件330 Base.prototype.mouseup = function (method, mode) {331 if (typeof mode == ‘undefined‘) mode = true;332 if (typeof method == ‘function‘) {333 for (var i = 0; i < this.elements.length; i ++) {334 mode ? Tool.loginEvent(this.elements[i], ‘mouseup‘, method) : Tool.logoutEvent(this.elements[i], ‘mouseup‘, method);335 }336 }337 return this;338 };339 340 // 鼠标 mousewheel 事件341 Base.prototype.mousewheel = function (method, mode) {342 if (typeof mode == ‘undefined‘) mode = true;343 if (typeof method == ‘function‘) {344 for (var i = 0; i < this.elements.length; i ++) {345 Tool.mousewheel(this.elements[i], method, mode);346 }347 }348 return this;349 };350 351 // 元素 load 事件352 Base.prototype.load = function (method, mode) {353 if (typeof mode == ‘undefined‘) mode = true;354 if (typeof method == ‘function‘) {355 for (var i = 0; i < this.elements.length; i ++) {356 mode ? Tool.loginEvent(this.elements[i], ‘load‘, method) : Tool.logoutEvent(this.elements[i], ‘load‘, method);357 }358 }359 return this;360 };361 362 // 元素 scroll 事件363 Base.prototype.scroll = function (method, mode) {364 if (typeof mode == ‘undefined‘) mode = true;365 if (typeof method == ‘function‘) {366 for (var i = 0; i < this.elements.length; i ++) {367 mode ? Tool.loginEvent(this.elements[i], ‘scroll‘, method) : Tool.logoutEvent(this.elements[i], ‘scroll‘, method);368 }369 }370 return this;371 };372 373 // 窗框 resize 事件374 Base.prototype.resize = function (method, mode) {375 if (typeof mode == ‘undefined‘) mode = true;376 if (typeof method == ‘function‘) {377 for (var i = 0; i < this.elements.length; i ++) {378 mode ? Tool.loginEvent(this.elements[i], ‘resize‘, method) : Tool.logoutEvent(this.elements[i], ‘resize‘, method);379 }380 }381 return this;382 };383 384 /*385 特效集合386 */387 // 特效: 元素隐藏388 Base.prototype.hide = function () {389 for (var i = 0; i < this.elements.length; i ++) {390 $(this.elements[i]).css(‘display‘, ‘none‘);391 }392 return this;393 };394 395 // 特效: 元素显示396 Base.prototype.show = function () {397 for (var i = 0; i < this.elements.length; i ++) {398 $(this.elements[i]).css(‘display‘, ‘block‘);399 }400 return this;401 };402 403 // 特效: 鼠标移入移出 (下拉菜单)404 Base.prototype.hover = function (overMethod, outMethod) {405 this.mouseover(overMethod);406 this.mouseout(outMethod);407 return this;408 };409 410 // 特效: 定位居中411 Base.prototype.center = function () {412 var innerRectangle = Base.getInnerRectangle();413 var scroll = Base.scroll();414 var rectangle = {}, outerX = 0, outerY = 0;415 for (var i = 0; i < this.elements.length; i ++) {416 Base.setAbsolutePosition(this.elements[i]);417 rectangle = Base.getRectangle(this.elements[i]);418 outerX = (innerRectangle.innerWidth - rectangle.width) / 2;419 outerY = (innerRectangle.innerHeight - rectangle.height) / 2;420 if (outerX < 0) outerX = 0;421 if (outerY < 0) outerY = 0;422 $(this.elements[i]).css([‘left = ‘ + ( scroll.scrollX + outerX) + ‘px‘, ‘top = ‘ + (scroll.scrollY + outerY) + ‘px‘]);423 }424 return this;425 };426 427 // 特效: 遮罩锁屏428 Base.prototype.lock = function () {429 var screenLock = $().getId(‘screenLock‘).getNodes();430 if (typeof screenLock == ‘object‘) {431 if (Base.trim($(Base.commentNode(screenLock)).html()) != 0) {432 Base.removeElement(screenLock);433 screenLock = Base.addElement(‘div‘, ‘id = screenLock‘);434 }435 } else {436 screenLock = Base.addElement(‘div‘, ‘id = screenLock‘);437 }438 var scroll = Base.scroll();439 $(document.documentElement).css(‘overflow‘, ‘hidden‘);440 Base.scroll(scroll.scrollX, scroll.scrollY);441 var innerRectangle = Base.getInnerRectangle();442 Base.setAbsolutePosition(screenLock);443 $(screenLock).css([444 ‘zIndex = 9998‘, 445 ‘left = ‘ + scroll.scrollX + ‘px‘,446 ‘top = ‘ + scroll.scrollY + ‘px‘,447 ‘width = ‘ + innerRectangle.innerWidth + ‘px‘, 448 ‘height = ‘ + innerRectangle.innerHeight + ‘px‘, 449 ‘backgroundColor = black‘,450 ‘opacity = 0.4‘, // W3C451 ‘filter = alpha(opacity = 40)‘// IE 6/7/8452 ]).show();453 Base.fixed(screenLock);454 return this;455 };456 457 // 特效: 清屏销锁458 Base.prototype.unlock = function () {459 var screenLock = $().getId(‘screenLock‘).getNodes();460 if (typeof screenLock == ‘object‘) {461 var scroll = Base.scroll();462 $(document.documentElement).css(‘overflow‘, ‘auto‘);463 Base.scroll(scroll.scrollX, scroll.scrollY);464 $(screenLock).hide();465 }466 return this;467 };468 469 // 特效: 元素拖拽470 Base.prototype.drag = function (mode) {471 if (typeof mode == ‘undefined‘) mode = true;472 var down = function (event) {473 _this = mode ? this : this.parentNode;474 Base.setAbsolutePosition(_this);475 if (Base.trim($(Base.commentNode(_this)).html()).length == 0) event.preventDefault();476 var outerRectangle = Base.getOuterRectangle(_this);477 var fixedX = event.clientX - outerRectangle.outerX;478 var fixedY = event.clientY - outerRectangle.outerY;479 var scroll = Base.scroll();480 Tool.setCaptureIE(_this);481 var move = function (event) {482 var innerRectangle = Base.getInnerRectangle();483 var rectangle = Base.getRectangle(_this);484 var outerX = event.clientX - fixedX;485 var outerY = event.clientY - fixedY;486 var minX = scroll.scrollX, minY = scroll.scrollY;487 var maxX = innerRectangle.innerWidth - rectangle.width + scroll.scrollX;488 var maxY = innerRectangle.innerHeight - rectangle.height + scroll.scrollY;489 if (outerX < minX) outerX = minX; else if (outerX > maxX) outerX = maxX;490 if (outerY < minY) outerY = minY; else if (outerY > maxY) outerY = maxY;491 $(_this).css([‘left = ‘ + outerX + ‘px‘, ‘top = ‘ + outerY + ‘px‘]);492 };493 $(document).mousemove(move);494 var up = function () {495 Tool.releaseCaptureIE(_this);496 $(document).mousemove(move, false);497 $(document).mouseup(up, false);498 };499 $(document).mouseup(up);500 };501 this.mousedown(down);502 return this;503 };504 505 // 特效: 禁止元素溢出506 Base.prototype.overflow = function () {507 var scroll = Base.scroll();508 var rectangle = {}, outerRectangle = {}, minX = 0, minY = 0, maxX = 0, maxY = 0, outerX = 0, outerY = 0;509 var innerRectangle = Base.getInnerRectangle();510 for (var i = 0; i < this.elements.length; i ++) {511 Base.setAbsolutePosition(this.elements[i]);512 rectangle = Base.getRectangle(this.elements[i]);513 outerRectangle = Base.getOuterRectangle(this.elements[i]);514 outerX = outerRectangle.outerX;515 outerY = outerRectangle.outerY;516 minX = scroll.scrollX;517 minY = scroll.scrollY;518 maxX = innerRectangle.innerWidth - rectangle.width + scroll.scrollX;519 maxY = innerRectangle.innerHeight - rectangle.height + scroll.scrollY;520 if (outerX < minX) outerX = minX; else if (outerX > maxX) outerX = maxX;521 if (outerY < minY) outerY = minY; else if (outerY > maxY) outerY = maxY;522 $(this.elements[i]).css([‘left = ‘ + outerX + ‘px‘, ‘top = ‘ + outerY + ‘px‘]);523 }524 return this;525 };526 527 /*528 库方法集合529 */530 // 库方法: 重置滚动条531 Base.scrollInitialization = function () {532 Tool.scrollInitializationX();533 Tool.scrollInitializationY();534 };535 536 // 库方法: 设置与获取滚动条537 Base.scroll = function (x, y) {538 if (typeof x == ‘number‘ && typeof y == ‘number‘) { // 设置539 Tool.scrollX(x);540 Tool.scrollY(y);541 } else { // 获取542 return {543 scrollX : Tool.scrollX(),544 scrollY : Tool.scrollY()545 }546 }547 };548 549 // 库方法: 检测 class 元素节点550 Base.hasClass = function (elementNode, className) {551 if ((new RegExp(‘(^|\\s+)‘ + className + ‘(\\s+|$)‘, ‘i‘)).test(elementNode.className)) return true;552 return false;553 };554 555 // 库方法: 检测样式规则556 Base.checkRule = function (rulePosition, sheetIndex, ruleNumber) {557 if (typeof sheetIndex == ‘undefined‘ || isNaN(sheetIndex)) sheetIndex = 0;558 var sheetObject = document.styleSheets[sheetIndex];559 var rules = Tool.getRules(sheetObject);560 if (rules == 0) {561 rulePosition = 0;562 ruleNumber = 0;563 }564 if (typeof rulePosition == ‘undefined‘ || isNaN(rulePosition)) rulePosition = 0;565 if (rules < rulePosition) rulePosition = rules;566 if (typeof ruleNumber == ‘undefined‘ || isNaN(ruleNumber)) ruleNumber = 1;567 if (rules < ruleNumber) ruleNumber = rules;568 if (rules - rulePosition < ruleNumber) ruleNumber = rules - rulePosition;569 return {570 position : rulePosition,571 sheet : sheetObject,572 number : ruleNumber573 }574 };575 576 // 库方法: 字符串截取577 Base.substring = function (string, index) {578 if (typeof string != ‘string‘) return string;579 if (string.indexOf(index) != -1) string = string.replace(index, ‘‘);580 return string;581 };582 583 // 库方法: 屏蔽两边空格584 Base.trim = function (string) {585 if (typeof string != ‘string‘) return string;586 var leftPattern = /^([\s\t]+)/, rightPattern = /([\s\t]+)$/;587 if (leftPattern.test(string)) string = string.replace(leftPattern, ‘‘);588 if (rightPattern.test(string)) string = string.replace(rightPattern, ‘‘);589 return string;590 };591 592 // 库方法: 屏蔽空白文本节点593 Base.spaceNode = function (elementNode) {594 if (typeof elementNode != ‘object‘) return elementNode;595 var childs = elementNode.childNodes;596 var pattern = /^[\s\t]+$/;597 for (var i = 0; i < childs.length; i ++) {598 if (childs[i].nodeType == 3 && pattern.test(childs[i].nodeValue)) elementNode.removeChild(childs[i]);599 }600 return elementNode;601 }602 603 // 库方法: 屏蔽注释节点604 Base.commentNode = function (elementNode) {605 if (typeof elementNode != ‘object‘) return elementNode;606 var childs = elementNode.childNodes;607 var position = ‘‘;608 if (elementNode.id != ‘‘) {609 position = elementNode.id;610 } else if (elementNode.className != ‘‘) {611 position = ‘class = ‘ + elementNode.className;612 } else {613 position = ‘tagName = ‘ + elementNode.tagName;614 }615 var comments = $().getTagName(‘!‘, position).getNodes();616 if (comments instanceof Array) { // 兼容 IE 617 for (var i = 0; i < comments.length; i ++) {618 elementNode.removeChild(comments[i]);619 }620 }621 for (var j = 0; j < childs.length; j ++) {622 if (childs[j].nodeType == 8) elementNode.removeChild(childs[j]);623 }624 return elementNode;625 };626 627 // 库方法: 定位器筛选628 Base.positioner = function (position) {629 var namePattern = /^name\s*=\s*(\w+)$/i;630 var tagNamePattern = /^tag(Name)?\s*=\s*(\w+)$/i;631 var classPattern = /^class(Name)?\s*=\s*(\w+)$/i;632 var idPattern = /^id\s*=\s*(\w+)$/i;633 var selector = [];634 if (namePattern.test(position)) { // name635 position = namePattern.exec(position)[1];636 selector = $().getName(position).getNodes();637 } else if (tagNamePattern.test(position)) { // tagName638 position = tagNamePattern.exec(position)[2];639 selector = $().getTagName(position).getNodes();640 } else if (classPattern.test(position)) { // class641 position = classPattern.exec(position)[2];642 selector = $().getClass(position).getNodes();643 } else if (idPattern.test(position)) { // id644 position = idPattern.exec(position)[1];645 selector = $().getId(position).getNodes();646 } else { // id647 selector = $().getId(position).getNodes();648 }649 return selector;650 }651 652 // 库方法: 添加属性653 Base.addAttribute = function (elementNode, attributes) {654 if (attributes instanceof Array) {655 for (var i = 0; i < attributes.length; i ++) {656 this.addAttribute(elementNode, attributes[i]);657 }658 } else {659 var attributePattern = /^([a-z]+)\s*=\s*([\w\-\\\/=\s\‘;\.:\"\)\(]+)$/i;660 var attributeKey = ‘‘, attributeValue = http://www.mamicode.com/‘‘;661 if (attributePattern.test(attributes)) {662 attributeKey = attributePattern.exec(attributes)[1];663 attributeValue = http://www.mamicode.com/attributePattern.exec(attributes)[2];664 if (attributeKey == ‘style‘) { // CSS IE 6/7 特殊处理665 var cssPattern = /^([a-z]+)\s*:\s*([\w\(\)\‘\"\\\/\-#\.=%\s]+)$/i;666 var cssKey = ‘‘, cssValue = http://www.mamicode.com/‘‘;667 if (/(;\s*)/.test(attributeValue)) { // 集群668 attributeValue = http://www.mamicode.com/attributeValue.replace(/(;/s*)/g, ‘|‘);669 var css = attributeValue.split(‘|‘);670 for (var i = 0; i < css.length; i ++) {671 if (cssPattern.test(css[i])) {672 cssKey = cssPattern.exec(css[i])[1];673 cssValue = http://www.mamicode.com/cssPattern.exec(css[i])[2];674 $(elementNode).css(cssKey, cssValue);675 }676 }677 } else { // 单个678 if (cssPattern.test(attributeValue)) {679 cssKey = cssPattern(attributeValue).exec(attributeValue)[1];680 cssValue = http://www.mamicode.com/cssPattern(attributeValue).exec(attributeValue)[2];681 $(elementNode).css(cssKey, cssValue);682 }683 }684 } else {685 elementNode.setAttribute(attributeKey, attributeValue);686 }687 }688 }689 690 };691 692 // 库方法: 创建元素节点693 Base.addElement = function (elementName, attributes, html, parentElement) {694 if (typeof parentElement == ‘undefined‘ && typeof parentElement != ‘string‘ && typeof parentElement != ‘object‘) parentElement = document.body;695 if (typeof parentElement == ‘string‘) parentElement = Base.positioner(parentElement);696 var elementNode = document.createElement(elementName);697 if (typeof html != ‘undefined‘) $(elementNode).html(html);698 if (typeof attributes != ‘undefined‘) Base.addAttribute(elementNode, attributes);699 if (parentElement instanceof Array) { // 集群700 for (var i = 0; i < parentElement.length; i ++) {701 parentElement[i].appendChild(elementNode);702 }703 } else { // 单个704 parentElement.appendChild(elementNode);705 }706 return elementNode;707 };708 709 // 库方法: 删除元素节点710 Base.removeElement = function (attributes, parentElement) {711 if (typeof parentElement == ‘string‘) parentElement = Base.positioner(parentElement);712 if (attributes instanceof Array) { // 集群713 for (var i = 0; i < attributes.length; i ++) {714 this.removeElement(attributes[i], parentElement);715 }716 } else { // 单个717 elementNode = typeof attributes == ‘object‘ ? attributes : Base.positioner(attributes);718 if (elementNode instanceof Array) { // 集群719 var sevedNode = [];720 for (var i = 0; i < elementNode.length; i ++) {721 sevedNode = elementNode;722 this.removeElement(elementNode[i], parentElement);723 elementNode = sevedNode;724 }725 } else { // 单个726 if (typeof parentElement == ‘undefined‘) parentElement = elementNode.parentNode;727 if (parentElement instanceof Array) { // 集群728 for (var i = 0; i < parentElement.length; i ++) {729 if (typeof parentElement[i] == ‘object‘ && Base.hasChildNode(parentElement[i], elementNode)) parentElement[i].removeChild(elementNode);730 }731 } else { // 单个732 if (typeof parentElement == ‘object‘ && Base.hasChildNode(parentElement, elementNode)) parentElement.removeChild(elementNode);733 }734 }735 }736 };737 738 // 库方法: 检测元素从属关系(直接从属)739 Base.hasChildNode = function (parentElement, elementNode) {740 var childs = parentElement.childNodes;741 for (var i = 0; i < childs.length; i ++) {742 if (childs[i] == elementNode) return true;743 }744 return false;745 };746 747 // 库方法: 获取元素大小尺寸748 Base.getRectangle = function (elementNode) {749 var width = 0, height = 0, display = ‘‘, _this = {};750 _this = $(elementNode);751 width = _this.css(‘width‘);752 height = _this.css(‘height‘);753 display = _this.css(‘display‘);754 if (width == ‘auto‘ || height == ‘auto‘) {755 if (display == ‘none‘) _this.show();756 width = elementNode.offsetWidth;757 height = elementNode.offsetHeight;758 }759 width = this.substring(width, ‘px‘);760 height = this.substring(height, ‘px‘);761 return {762 width : width,763 height : height764 };765 };766 767 // 库方法: 获取元素外边距尺寸768 Base.getOuterRectangle = function (elementNode) {769 this.setAbsolutePosition(elementNode);770 var outerX = 0, outerY = 0, display = ‘‘, _this = {};771 _this = $(elementNode);772 outerX = _this.css(‘left‘);773 outerY = _this.css(‘top‘);774 display = _this.css(‘display‘);775 if (outerX == ‘auto‘ || outerY == ‘auto‘) {776 if (display == ‘none‘) _this.show();777 outerX = elementNode.offsetLeft;778 outerY = elementNode.offsetTop;779 }780 outerX = this.substring(outerX, ‘px‘);781 outerY = this.substring(outerY, ‘px‘);782 return {783 outerX : outerX,784 outerY : outerY785 };786 };787 788 // 库方法: 获取网页可视区尺寸789 Base.getInnerRectangle = function () {790 var innerWidth = Tool.getInnerWidth();791 var innerHeight = Tool.getInnerHeight();792 return {793 innerWidth : innerWidth,794 innerHeight : innerHeight795 };796 };797 798 // 库方法: 设置元素绝对定位799 Base.setAbsolutePosition = function (elementNode) {800 if ($(elementNode).css(‘position‘) != ‘absolute‘) {801 $(elementNode).css([‘position = absolute‘, ‘left = 0‘, ‘top = 0‘]);802 }803 };804 805 // 库方法: 禁止页面滚动(修正浏览器BUG)806 Base.fixed = function (elementNode) {807 // IE 禁止方式808 $(elementNode).mousedown(function () {809 $(elementNode).mousemove(function (event) {810 event.preventDefault();811 });812 });813 // Chrome 禁止方式814 $(elementNode).mousewheel(function (event) {815 event.preventDefault();816 });817 };
1 /* 2 源码作者: 石不易(Louis Shi) 3 联系方式: http://www.shibuyi.net 4 =================================================================================================== 5 程序名称: JavaScript 工具库(跨浏览器兼容) BETA 2.0 版 6 迭代版本: BETA 1.0 7 功能总数: 18 个 8 新增总数: 3 个 9 删除总数: 2 个 10 追加功能: 11 1. 跨浏览器检测元素从属关系(直接从属+间接从属) 12 2. 跨浏览器获取与设置滚动条(x轴+y轴) 13 ... 14 优化功能: 15 1. 跨浏览器现代事件绑定(注册事件+注销事件) 16 2. 跨浏览器配备事件对象(IE 6/7/8 专属) 17 ... 18 删除功能: 19 1. 跨浏览器取消事件冒泡 20 2. 跨浏览器取消事件默认行为 21 ... 22 */ 23 // 工具库 24 var Tool = { 25 26 // 数组排序 27 sort : function () { 28 return { 29 minToMax : function (min, max) { // 正序: 从小到大 30 if (min < max) { 31 return -1; 32 } else if (min > max) { 33 return 1; 34 } else { 35 return 0; 36 } 37 }, 38 maxToMin : function (min, max) { // 倒序: 从大到小 39 if (min < max) { 40 return 1; 41 } else if (min > max) { 42 return -1; 43 } else { 44 return 0; 45 } 46 } 47 } 48 }, 49 50 // 跨浏览器获取计算后的 CSS 样式 51 getStyle : function (elementNode, cssKey) { 52 if (typeof window.getComputedStyle != ‘undefined‘) { // W3C 53 return window.getComputedStyle(elementNode, null)[cssKey]; 54 } else if (typeof elementNode.currentStyle != ‘undefined‘) { // IE 6/7/8 55 return elementNode.currentStyle[cssKey]; 56 } 57 }, 58 59 // 跨浏览器添加样式规则 60 addRule : function (sheet, ruleName, ruleText, rulePosition) { 61 if (typeof sheet.insertRule != ‘undefined‘) { // W3C 62 sheet.insertRule(ruleName + ‘ {‘ + ruleText + ‘}‘, rulePosition); 63 } else if (typeof sheet.addRule != ‘undefined‘) { // IE 6/7/8 64 sheet.addRule(ruleName, ruleText, rulePosition); 65 } 66 }, 67 68 // 跨浏览器移除样式规则 69 removeRule : function (sheet, rulePosition) { 70 if (typeof sheet.deleteRule != ‘undefined‘) { // W3C 71 sheet.deleteRule(rulePosition); 72 } else if (typeof sheet.removeRule != ‘undefined‘) { // IE 6/7/8 73 sheet.removeRule(rulePosition); 74 } 75 }, 76 77 // 跨浏览器获取样式规则总数 78 getRules : function (sheet) { 79 if (typeof sheet.cssRules != ‘undefined‘) { // W3C 80 return sheet.cssRules.length; 81 } else if (typeof sheet.rules != ‘undefined‘) { // IE 6/7/8 82 return sheet.rules.length; 83 } 84 }, 85 86 // 事件绑定计数器 87 eventId : 0, 88 89 // 跨浏览器现代事件绑定: 注册事件 90 loginEvent : function (elementNode, eventName, method) { 91 if (eventName.indexOf(‘on‘) == 0) eventName = eventName.substring(2, eventName.length); 92 if (typeof elementNode.addEventListener != ‘undefined‘) { // W3C 93 elementNode.addEventListener(eventName, method, false); 94 } else if (typeof elementNode.attachEvent != ‘undefined‘) { // IE 6/7/8 95 // 创建哈希表，存储事件数组 96 if (typeof elementNode.hashTable != ‘object‘) elementNode.hashTable = {}; 97 // 创建事件数组，储存事件方法 98 if (typeof elementNode.hashTable[eventName] != ‘object‘) elementNode.hashTable[eventName] = []; 99 // 获取事件数组100 var events = elementNode.hashTable[eventName];101 // 检测同一节点、同一事件是否方法重复102 for (var i = 0; i < events.length; i ++) {103 if (events[i] == method) return false;104 }105 // 储存事件方法106 events[this.eventId ++] = method;107 var _this = this;108 // 执行事件方法109 elementNode[‘on‘ + eventName] = function () {110 var event = _this.eventIE(window.event);111 for (var i = 0; i < events.length; i ++) {112 if (typeof events[i] != ‘undefined‘) events[i].call(this, event);113 }114 };115 116 }117 },118 119 // 跨浏览器现代事件绑定: 注销事件120 logoutEvent : function (elementNode, eventName, method) {121 if (eventName.indexOf(‘on‘) == 0) eventName = eventName.substring(2, eventName.length);122 if (typeof elementNode.removeEventListener != ‘undefined‘) { // W3C123 elementNode.removeEventListener(eventName, method, false);124 } else if (typeof elementNode.detachEvent != ‘undefined‘) { // IE 6/7/8125 if (typeof elementNode.hashTable != ‘undefined‘ && typeof elementNode.hashTable[eventName] != ‘undefined‘) {126 var events = elementNode.hashTable[eventName];127 for (var i = 0; i < events.length; i ++) {128 if (events[i] == method) delete events[i];129 }130 }131 }132 },133 134 // 跨浏览器配备事件对象(IE 6/7/8 专属)135 eventIE : function (event) {136 // 配备取消事件冒泡137 event.stopPropagation = function () {138 event.cancelBubble = true;139 };140 141 // 配备取消事件默认行为142 event.preventDefault = function () {143 event.returnValue = http://www.mamicode.com/false;144 };145 146 // 配备获取事件绑定对象147 event.target = event.srcElement;148 149 return event;150 },151 152 // 跨浏览器鼠标滚轮(中键)事件153 mousewheel : function (elementNode, method, mode) {154 if (typeof elementNode.onmousewheel != ‘undefined‘) { // 非 Firefox155 mode ? this.loginEvent(elementNode, ‘mousewheel‘, method) : this.logoutEvent(elementNode, ‘mousewheel‘, method);156 } else { // Firefox157 mode ? this.loginEvent(elementNode, ‘DOMMouseScroll‘, method) : this.logoutEvent(elementNode, ‘DOMMouseScroll‘, method);158 }159 },160 161 // 跨浏览器检测元素从属关系(直接从属+间接从属)162 hasChildNode : function (parentElement, elementNode) {163 if (typeof parentElement.contains != ‘undefined‘) { // W3C164 return parentElement.contains(elementNode);165 } else if (typeof parentElement.compareDocumentPosition != ‘undefined‘) { // 低版本浏览器166 return parentElement.compareDocumentPosition(elementNode) == 20;167 }168 return false;169 },170 171 // 跨浏览器获取网页可视区宽度尺寸172 getInnerWidth : function () {173 if (typeof window.innerWidth != ‘undefined‘) { // W3C174 return window.innerWidth;175 } else { // IE 6/7/8176 return document.documentElement.clientWidth;177 }178 },179 180 // 跨浏览器获取网页可视区高度尺寸181 getInnerHeight : function () {182 if (typeof window.innerHeight != ‘undefined‘) { // W3C183 return window.innerHeight;184 } else { // IE 6/7/8185 return document.documentElement.clientHeight;186 }187 },188 189 // 跨浏览器重置横向窗体滚动条190 scrollInitializationX : function () {191 this.scrollX(0);192 },193 194 // 跨浏览器重置纵向窗体滚动条195 scrollInitializationY : function () {196 this.scrollY(0); 197 },198 199 // 跨浏览器获取与设置滚动条X轴200 scrollX : function (x) {201 if (typeof x != ‘undefined‘) { // 设置202 document.documentElement.scrollLeft = x; // 非 Chrome / Safari203 document.body.scrollLeft = x; // Chrome / Safari204 } else { // 获取205 return document.documentElement.scrollLeft == 0 ? document.body.scrollLeft : document.documentElement.scrollLeft;206 }207 },208 209 // 跨浏览器获取与设置滚动条Y轴210 scrollY : function (y) {211 if (typeof y != ‘undefined‘) { // 设置212 document.documentElement.scrollTop = y; 213 document.body.scrollTop = y;214 } else { // 获取215 return document.documentElement.scrollTop == 0 ? document.body.scrollTop : document.documentElement.scrollTop;216 }217 },218 219 // IE 专属事件: 浏览器外捕获鼠标按下220 setCaptureIE : function (elementNode) {221 if (typeof elementNode.setCapture != ‘undefined‘) { // IE222 elementNode.setCapture();223 }224 },225 226 // IE 专属事件: 浏览器外捕获鼠标弹起227 releaseCaptureIE : function (elementNode) {228 if (typeof elementNode.releaseCapture != ‘undefined‘) { // IE229 elementNode.releaseCapture();230 }231 }232 };
关于 BETA 2.0 原型版核心源码与实例演示的获取请移动至官网下载！
感谢大家积极评测给予意见！
官网地址：http://www.shibuyi.net
CNBlogs 博客：http://www.cnblogs.com/shibuyi/
CSDN 博客：http://blog.csdn.net/louis_shi/
ITeye 博客：http://shibuyi.iteye.com/
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。