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 // 获取与设置 innerHTML 144 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 = 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 = text; 165 } 166 } else { // 获取 167 var value = []; 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 // 获取与设置 CSS 178 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 = ‘‘; 183 for (var i = 0; i < cssKey.length; i ++) { 184 if (cssPattern.test(cssKey[i])) { 185 _cssKey = cssPattern.exec(cssKey[i])[1]; 186 _cssValue = 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‘, // W3C 451 ‘filter = alpha(opacity = 40)‘// IE 6/7/8 452 ]).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 : ruleNumber 573 } 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)) { // name 635 position = namePattern.exec(position)[1]; 636 selector = $().getName(position).getNodes(); 637 } else if (tagNamePattern.test(position)) { // tagName 638 position = tagNamePattern.exec(position)[2]; 639 selector = $().getTagName(position).getNodes(); 640 } else if (classPattern.test(position)) { // class 641 position = classPattern.exec(position)[2]; 642 selector = $().getClass(position).getNodes(); 643 } else if (idPattern.test(position)) { // id 644 position = idPattern.exec(position)[1]; 645 selector = $().getId(position).getNodes(); 646 } else { // id 647 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 = ‘‘; 661 if (attributePattern.test(attributes)) { 662 attributeKey = attributePattern.exec(attributes)[1]; 663 attributeValue = 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 = ‘‘; 667 if (/(;\s*)/.test(attributeValue)) { // 集群 668 attributeValue = 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 = 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 = 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 : height 764 }; 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 : outerY 785 }; 786 }; 787 788 // 库方法: 获取网页可视区尺寸 789 Base.getInnerRectangle = function () { 790 var innerWidth = Tool.getInnerWidth(); 791 var innerHeight = Tool.getInnerHeight(); 792 return { 793 innerWidth : innerWidth, 794 innerHeight : innerHeight 795 }; 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‘) { // W3C 123 elementNode.removeEventListener(eventName, method, false); 124 } else if (typeof elementNode.detachEvent != ‘undefined‘) { // IE 6/7/8 125 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 = 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‘) { // 非 Firefox 155 mode ? this.loginEvent(elementNode, ‘mousewheel‘, method) : this.logoutEvent(elementNode, ‘mousewheel‘, method); 156 } else { // Firefox 157 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‘) { // W3C 164 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‘) { // W3C 174 return window.innerWidth; 175 } else { // IE 6/7/8 176 return document.documentElement.clientWidth; 177 } 178 }, 179 180 // 跨浏览器获取网页可视区高度尺寸 181 getInnerHeight : function () { 182 if (typeof window.innerHeight != ‘undefined‘) { // W3C 183 return window.innerHeight; 184 } else { // IE 6/7/8 185 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 / Safari 203 document.body.scrollLeft = x; // Chrome / Safari 204 } 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‘) { // IE 222 elementNode.setCapture(); 223 } 224 }, 225 226 // IE 专属事件: 浏览器外捕获鼠标弹起 227 releaseCaptureIE : function (elementNode) { 228 if (typeof elementNode.releaseCapture != ‘undefined‘) { // IE 229 elementNode.releaseCapture(); 230 } 231 } 232 };
关于 BETA 2.0 原型版核心源码与实例演示的获取请移动至官网下载！
感谢大家积极评测给予意见！
CNBlogs 博客：http://www.cnblogs.com/shibuyi/
CSDN 博客：http://blog.csdn.net/louis_shi/
ITeye 博客：http://shibuyi.iteye.com/