【JavaScript 封装库】BETA 2.0 测试版发布！
浏览数：29 /
时间：2015年06月08日
/*
源码作者: 石不易(Louis Shi)
联系方式: http://www.shibuyi.net
===================================================================================================
程序名称: JavaScript 封装库 BETA 2.0 版
迭代版本: BETA 1.0
功能总数: 50 个
新增总数: 6 个
删除总数: 0 个
追加功能:
1. 库方法: 设置与获取滚动条
2. 库方法: 定位器筛选
3. 库方法: 检测元素从属关系(直接从属)
4. 库方法: 获取网页可视区尺寸
5. 库方法: 禁止页面滚动(修正浏览器BUG)
...
优化功能:
1. 取消了“隶属方法”, 增加了“库方法”并与“特效”和“事件”组成集合, 封装库结构更加清晰
2. 元素节点获取更加智能, 支持 class / name / tagName / id 在内的局部搜索
3. 添加与删除元素节点更加方便容易, 支持 class / name / tagName / id 直接定位
...
删除功能:
无
*/
// 实例化封装库
function $(_this) {
return new Base(_this);
}
// 封装库构造方法
function Base(_this) {
this.elements = [];
if (typeof _this == ‘object‘ && _this !== null) this.elements.push(_this);
}
// 获取元素节点
Base.prototype.getNodes = function () {
if (this.elements.length == 0) return ‘没有任何节点对象‘;
if (this.elements.length == 1) return this.elements[0];
return this.elements;
};
// 获取 id 元素节点
Base.prototype.getId = function (ids) {
if (ids instanceof Array) { // 集群
for (var i in ids) {
this.getId(ids[i]);
}
} else { // 单个
var node = document.getElementById(ids);
if (node === null) return this;
for (var i =0; i < this.elements.length; i ++) {
if (this.elements[i] == node) return this;
}
this.elements.push(node);
}
return this;
};
// 获取 name 元素节点
Base.prototype.getName = function (name, position) {
var nodes = [], selector = [];
if (typeof position != ‘undefined‘) { // 局部
selector = Base.positioner(position);
if (selector instanceof Array) { // 集群
for (var i = 0; i < selector.length; i ++) {
nodes.push(selector[i].getElementsByTagName(‘*‘));
}
} else { // 单个
if (typeof selector == ‘object‘) nodes = selector.getElementsByTagName(‘*‘); // 防止 IE 无法识别 name 属性
}
} else { // 全局
nodes = document.getElementsByName(name);
}
for (var i = 0; i < nodes.length; i ++) {
if (typeof nodes[i].length != ‘undefined‘ && typeof nodes[i].item != ‘undefined‘) { // 多集群
for (var j = 0; j < nodes[i].length; j ++) {
if (nodes[i][j].getAttribute(‘name‘) == name) this.elements.push(nodes[i][j]);
}
} else { // 单集群
if (nodes[i].getAttribute(‘name‘) == name) this.elements.push(nodes[i]);
}
}
return this;
};
// 获取 tagName 元素节点
Base.prototype.getTagName = function (tagName, position) {
var nodes = [], selector = [];
if (typeof position != ‘undefined‘) { // 局部
selector = Base.positioner(position);
if (selector instanceof Array) { // 集群
for (var i = 0; i < selector.length; i ++) {
nodes.push(selector[i].getElementsByTagName(tagName));
}
} else { // 单个
if (typeof selector == ‘object‘) nodes = selector.getElementsByTagName(tagName); // 防止 IE 无法识别 name 属性
}
} else { // 全局
nodes = document.getElementsByTagName(tagName);
}
for (var i = 0; i < nodes.length; i ++) {
if (typeof nodes[i].length != ‘undefined‘ && typeof nodes[i].item != ‘undefined‘) { // 多集群
for (var j = 0; j < nodes[i].length; j ++) {
this.elements.push(nodes[i][j]);
}
} else { // 单集群
this.elements.push(nodes[i]);
}
}
return this;
};
// 获取 class 元素节点
Base.prototype.getClass = function (className, position) {
var nodes = [], selector = [];
if (typeof position != ‘undefined‘) { // 局部
selector = Base.positioner(position);
if (selector instanceof Array) { // 集群
for (var i = 0; i < selector.length; i ++) {
nodes.push(selector[i].getElementsByTagName(‘*‘));
}
} else { // 单个
if (typeof selector == ‘object‘) nodes = selector.getElementsByTagName(‘*‘); // 防止 IE 无法识别 name 属性
}
} else { // 全局
nodes = $().getTagName(‘*‘).getNodes();
}
for (var i = 0; i < nodes.length; i ++) {
if (typeof nodes[i] == ‘undefined‘) continue; // 兼容 IE 识别空元素
if (typeof nodes[i].length != ‘undefined‘ && typeof nodes[i].item != ‘undefined‘) { // 多集群
for (var j = 0; j < nodes[i].length; j ++) {
if (Base.hasClass(nodes[i][j], className)) this.elements.push(nodes[i][j]);
}
} else { // 单集群
if (Base.hasClass(nodes[i], className)) this.elements.push(nodes[i]);
}
}
return this;
};
// 获取与设置 innerHTML
Base.prototype.html = function (text) {
if (typeof text != ‘undefined‘) { // 设置
for (var i = 0; i < this.elements.length; i ++) {
this.elements[i].innerHTML = text;
}
} else { // 获取
var html = [];
for (var i = 0; i < this.elements.length; i ++) {
html.push(this.elements[i].innerHTML);
}
if (html.length == 1) return html[0];
return html;
}
return this;
};
// 获取与设置 value (表单)
Base.prototype.value = function (text) {
if (typeof text != ‘undefined‘) { // 设置
for (var i = 0; i < this.elements.length; i ++) {
if (typeof this.elements[i].value != ‘undefined‘) this.elements[i].value = text;
}
} else { // 获取
var value = [];
for (var i = 0; i < this.elements.length; i ++) {
if (typeof this.elements[i].value != ‘undefined‘) value.push(this.elements[i].value);
}
if (value.length == 1) return value[0];
return value;
}
return this;
};
// 获取与设置 CSS
Base.prototype.css = function (cssKey, cssValue) {
if (typeof cssValue != ‘undefined‘ || cssKey instanceof Array) { // 设置
if (cssKey instanceof Array) { // 集群
var cssPattern = /^([a-z]+)\s*=\s*([\w\(\)\‘\"\\\/\-#\.=%\s]+)$/i;
var _cssKey = ‘‘, _cssValue = ‘‘;
for (var i = 0; i < cssKey.length; i ++) {
if (cssPattern.test(cssKey[i])) {
_cssKey = cssPattern.exec(cssKey[i])[1];
_cssValue = cssPattern.exec(cssKey[i])[2];
for (var j = 0; j < this.elements.length; j ++) {
this.elements[j].style[_cssKey] = _cssValue;
}
}
}
} else { // 单个
for (var i = 0; i < this.elements.length; i ++) {
this.elements[i].style[cssKey] = cssValue;
}
}
} else { // 获取
var css = [];
for (var i = 0; i < this.elements.length; i ++) {
css.push(Tool.getStyle(this.elements[i], cssKey));
}
if (css.length == 1) return css[0];
return css;
}
return this;
};
// 添加 class 选择器
Base.prototype.addClass = function (className) {
if (className instanceof Array) { // 集群
for (var i = 0; i < className.length; i ++) {
this.addClass(className[i]);
}
} else { // 单个
var space = ‘‘;
for (var i = 0; i < this.elements.length; i ++) {
if (this.elements[i].className != ‘‘) space = ‘ ‘;
if (!Base.hasClass(this.elements[i], className)) this.elements[i].className += space + className;
space = ‘‘;
}
}
return this;
};
// 移除 class 选择器
Base.prototype.removeClass = function (className) {
if (className instanceof Array) { // 集群
for (var i = 0; i < className.length; i ++) {
this.removeClass(className[i]);
}
} else { // 单个
var elementNode = {};
for (var i = 0; i < this.elements.length; i ++) {
elementNode = this.elements[i];
if (Base.hasClass(elementNode, className)) {
elementNode.className = elementNode.className.replace(new RegExp(‘\\s+‘ + className + ‘\\s+‘, ‘i‘), ‘ ‘);
elementNode.className = elementNode.className.replace(new RegExp(‘(\\s+|^)‘ + className + ‘($|\\s+)‘, ‘i‘), ‘‘);
}
}
}
return this;
};
// 添加样式规则
Base.prototype.addRule = function (ruleName, ruleText, rulePosition, sheetIndex) {
if (ruleName instanceof Array) { // 集群
if (!ruleText instanceof Array || ruleName.length != ruleText.length) return this;
for (var i = 0; i < ruleName.length; i ++) {
this.addRule(ruleName[i], ruleText[i], rulePosition, sheetIndex);
}
} else { // 单个
var rule = Base.checkRule(rulePosition, sheetIndex);
if (typeof rule.sheet != ‘undefined‘) {
Tool.addRule(rule.sheet, ruleName, ruleText, rule.position);
}
}
return this;
};
// 移除样式规则
Base.prototype.removeRule = function (rulePosition, ruleNumber, sheetIndex) {
var rule = Base.checkRule(rulePosition, sheetIndex, ruleNumber);
if (typeof rule.sheet != ‘undefined‘) {
for (var i = 0; i < rule.number; i ++) {
Tool.removeRule(rule.sheet, rule.position);
}
}
return this;
};
/*
事件集合
*/
// 鼠标 click 事件
Base.prototype.click = function (method, mode) {
if (typeof mode == ‘undefined‘) mode = true;
if (typeof method == ‘function‘) {
for (var i = 0; i < this.elements.length; i ++) {
mode ? Tool.loginEvent(this.elements[i], ‘click‘, method) : Tool.logoutEvent(this.elements[i], ‘click‘, method);
}
}
return this;
};
// 鼠标 mouseover 事件
Base.prototype.mouseover = function (method, mode) {
if (typeof mode == ‘undefined‘) mode = true;
if (typeof method == ‘function‘) {
for (var i = 0; i < this.elements.length; i ++) {
mode ? Tool.loginEvent(this.elements[i], ‘mouseover‘, method) : Tool.logoutEvent(this.elements[i], ‘mouseover‘, method);
}
}
return this;
};
// 鼠标 mouseout 事件
Base.prototype.mouseout = function (method, mode) {
if (typeof mode == ‘undefined‘) mode = true;
if (typeof method == ‘function‘) {
for (var i = 0; i < this.elements.length; i ++) {
mode ? Tool.loginEvent(this.elements[i], ‘mouseout‘, method) : Tool.logoutEvent(this.elements[i], ‘mouseout‘, method);
}
}
return this;
};
// 鼠标 mousedown 事件
Base.prototype.mousedown = function (method, mode) {
if (typeof mode == ‘undefined‘) mode = true;
if (typeof method == ‘function‘) {
for (var i = 0; i < this.elements.length; i ++) {
mode ? Tool.loginEvent(this.elements[i], ‘mousedown‘, method) : Tool.logoutEvent(this.elements[i], ‘mousedown‘, method);
}
}
return this;
};
// 鼠标 mousemove 事件
Base.prototype.mousemove = function (method, mode) {
if (typeof mode == ‘undefined‘) mode = true;
if (typeof method == ‘function‘) {
for (var i = 0; i < this.elements.length; i ++) {
mode ? Tool.loginEvent(this.elements[i], ‘mousemove‘, method) : Tool.logoutEvent(this.elements[i], ‘mousemove‘, method);
}
}
return this;
};
// 鼠标 mouseup 事件
Base.prototype.mouseup = function (method, mode) {
if (typeof mode == ‘undefined‘) mode = true;
if (typeof method == ‘function‘) {
for (var i = 0; i < this.elements.length; i ++) {
mode ? Tool.loginEvent(this.elements[i], ‘mouseup‘, method) : Tool.logoutEvent(this.elements[i], ‘mouseup‘, method);
}
}
return this;
};
// 鼠标 mousewheel 事件
Base.prototype.mousewheel = function (method, mode) {
if (typeof mode == ‘undefined‘) mode = true;
if (typeof method == ‘function‘) {
for (var i = 0; i < this.elements.length; i ++) {
Tool.mousewheel(this.elements[i], method, mode);
}
}
return this;
};
// 元素 load 事件
Base.prototype.load = function (method, mode) {
if (typeof mode == ‘undefined‘) mode = true;
if (typeof method == ‘function‘) {
for (var i = 0; i < this.elements.length; i ++) {
mode ? Tool.loginEvent(this.elements[i], ‘load‘, method) : Tool.logoutEvent(this.elements[i], ‘load‘, method);
}
}
return this;
};
// 元素 scroll 事件
Base.prototype.scroll = function (method, mode) {
if (typeof mode == ‘undefined‘) mode = true;
if (typeof method == ‘function‘) {
for (var i = 0; i < this.elements.length; i ++) {
mode ? Tool.loginEvent(this.elements[i], ‘scroll‘, method) : Tool.logoutEvent(this.elements[i], ‘scroll‘, method);
}
}
return this;
};
// 窗框 resize 事件
Base.prototype.resize = function (method, mode) {
if (typeof mode == ‘undefined‘) mode = true;
if (typeof method == ‘function‘) {
for (var i = 0; i < this.elements.length; i ++) {
mode ? Tool.loginEvent(this.elements[i], ‘resize‘, method) : Tool.logoutEvent(this.elements[i], ‘resize‘, method);
}
}
return this;
};
/*
特效集合
*/
// 特效: 元素隐藏
Base.prototype.hide = function () {
for (var i = 0; i < this.elements.length; i ++) {
$(this.elements[i]).css(‘display‘, ‘none‘);
}
return this;
};
// 特效: 元素显示
Base.prototype.show = function () {
for (var i = 0; i < this.elements.length; i ++) {
$(this.elements[i]).css(‘display‘, ‘block‘);
}
return this;
};
// 特效: 鼠标移入移出 (下拉菜单)
Base.prototype.hover = function (overMethod, outMethod) {
this.mouseover(overMethod);
this.mouseout(outMethod);
return this;
};
// 特效: 定位居中
Base.prototype.center = function () {
var innerRectangle = Base.getInnerRectangle();
var scroll = Base.scroll();
var rectangle = {}, outerX = 0, outerY = 0;
for (var i = 0; i < this.elements.length; i ++) {
Base.setAbsolutePosition(this.elements[i]);
rectangle = Base.getRectangle(this.elements[i]);
outerX = (innerRectangle.innerWidth - rectangle.width) / 2;
outerY = (innerRectangle.innerHeight - rectangle.height) / 2;
if (outerX < 0) outerX = 0;
if (outerY < 0) outerY = 0;
$(this.elements[i]).css([‘left = ‘ + ( scroll.scrollX + outerX) + ‘px‘, ‘top = ‘ + (scroll.scrollY + outerY) + ‘px‘]);
}
return this;
};
// 特效: 遮罩锁屏
Base.prototype.lock = function () {
var screenLock = $().getId(‘screenLock‘).getNodes();
if (typeof screenLock == ‘object‘) {
if (Base.trim($(Base.commentNode(screenLock)).html()) != 0) {
Base.removeElement(screenLock);
screenLock = Base.addElement(‘div‘, ‘id = screenLock‘);
}
} else {
screenLock = Base.addElement(‘div‘, ‘id = screenLock‘);
}
var scroll = Base.scroll();
$(document.documentElement).css(‘overflow‘, ‘hidden‘);
Base.scroll(scroll.scrollX, scroll.scrollY);
var innerRectangle = Base.getInnerRectangle();
Base.setAbsolutePosition(screenLock);
$(screenLock).css([
‘zIndex = 9998‘,
‘left = ‘ + scroll.scrollX + ‘px‘,
‘top = ‘ + scroll.scrollY + ‘px‘,
‘width = ‘ + innerRectangle.innerWidth + ‘px‘,
‘height = ‘ + innerRectangle.innerHeight + ‘px‘,
‘backgroundColor = black‘,
‘opacity = 0.4‘, // W3C
‘filter = alpha(opacity = 40)‘// IE 6/7/8
]).show();
Base.fixed(screenLock);
return this;
};
// 特效: 清屏销锁
Base.prototype.unlock = function () {
var screenLock = $().getId(‘screenLock‘).getNodes();
if (typeof screenLock == ‘object‘) {
var scroll = Base.scroll();
$(document.documentElement).css(‘overflow‘, ‘auto‘);
Base.scroll(scroll.scrollX, scroll.scrollY);
$(screenLock).hide();
}
return this;
};
// 特效: 元素拖拽
Base.prototype.drag = function (mode) {
if (typeof mode == ‘undefined‘) mode = true;
var down = function (event) {
_this = mode ? this : this.parentNode;
Base.setAbsolutePosition(_this);
if (Base.trim($(Base.commentNode(_this)).html()).length == 0) event.preventDefault();
var outerRectangle = Base.getOuterRectangle(_this);
var fixedX = event.clientX - outerRectangle.outerX;
var fixedY = event.clientY - outerRectangle.outerY;
var scroll = Base.scroll();
Tool.setCaptureIE(_this);
var move = function (event) {
var innerRectangle = Base.getInnerRectangle();
var rectangle = Base.getRectangle(_this);
var outerX = event.clientX - fixedX;
var outerY = event.clientY - fixedY;
var minX = scroll.scrollX, minY = scroll.scrollY;
var maxX = innerRectangle.innerWidth - rectangle.width + scroll.scrollX;
var maxY = innerRectangle.innerHeight - rectangle.height + scroll.scrollY;
if (outerX < minX) outerX = minX; else if (outerX > maxX) outerX = maxX;
if (outerY < minY) outerY = minY; else if (outerY > maxY) outerY = maxY;
$(_this).css([‘left = ‘ + outerX + ‘px‘, ‘top = ‘ + outerY + ‘px‘]);
};
$(document).mousemove(move);
var up = function () {
Tool.releaseCaptureIE(_this);
$(document).mousemove(move, false);
$(document).mouseup(up, false);
};
$(document).mouseup(up);
};
this.mousedown(down);
return this;
};
// 特效: 禁止元素溢出
Base.prototype.overflow = function () {
var scroll = Base.scroll();
var rectangle = {}, outerRectangle = {}, minX = 0, minY = 0, maxX = 0, maxY = 0, outerX = 0, outerY = 0;
var innerRectangle = Base.getInnerRectangle();
for (var i = 0; i < this.elements.length; i ++) {
Base.setAbsolutePosition(this.elements[i]);
rectangle = Base.getRectangle(this.elements[i]);
outerRectangle = Base.getOuterRectangle(this.elements[i]);
outerX = outerRectangle.outerX;
outerY = outerRectangle.outerY;
minX = scroll.scrollX;
minY = scroll.scrollY;
maxX = innerRectangle.innerWidth - rectangle.width + scroll.scrollX;
maxY = innerRectangle.innerHeight - rectangle.height + scroll.scrollY;
if (outerX < minX) outerX = minX; else if (outerX > maxX) outerX = maxX;
if (outerY < minY) outerY = minY; else if (outerY > maxY) outerY = maxY;
$(this.elements[i]).css([‘left = ‘ + outerX + ‘px‘, ‘top = ‘ + outerY + ‘px‘]);
}
return this;
};
/*
库方法集合
*/
// 库方法: 重置滚动条
Base.scrollInitialization = function () {
Tool.scrollInitializationX();
Tool.scrollInitializationY();
};
// 库方法: 设置与获取滚动条
Base.scroll = function (x, y) {
if (typeof x == ‘number‘ && typeof y == ‘number‘) { // 设置
Tool.scrollX(x);
Tool.scrollY(y);
} else { // 获取
return {
scrollX : Tool.scrollX(),
scrollY : Tool.scrollY()
}
}
};
// 库方法: 检测 class 元素节点
Base.hasClass = function (elementNode, className) {
if ((new RegExp(‘(^|\\s+)‘ + className + ‘(\\s+|$)‘, ‘i‘)).test(elementNode.className)) return true;
return false;
};
// 库方法: 检测样式规则
Base.checkRule = function (rulePosition, sheetIndex, ruleNumber) {
if (typeof sheetIndex == ‘undefined‘ || isNaN(sheetIndex)) sheetIndex = 0;
var sheetObject = document.styleSheets[sheetIndex];
var rules = Tool.getRules(sheetObject);
if (rules == 0) {
rulePosition = 0;
ruleNumber = 0;
}
if (typeof rulePosition == ‘undefined‘ || isNaN(rulePosition)) rulePosition = 0;
if (rules < rulePosition) rulePosition = rules;
if (typeof ruleNumber == ‘undefined‘ || isNaN(ruleNumber)) ruleNumber = 1;
if (rules < ruleNumber) ruleNumber = rules;
if (rules - rulePosition < ruleNumber) ruleNumber = rules - rulePosition;
return {
position : rulePosition,
sheet : sheetObject,
number : ruleNumber
}
};
// 库方法: 字符串截取
Base.substring = function (string, index) {
if (typeof string != ‘string‘) return string;
if (string.indexOf(index) != -1) string = string.replace(index, ‘‘);
return string;
};
// 库方法: 屏蔽两边空格
Base.trim = function (string) {
if (typeof string != ‘string‘) return string;
var leftPattern = /^([\s\t]+)/, rightPattern = /([\s\t]+)$/;
if (leftPattern.test(string)) string = string.replace(leftPattern, ‘‘);
if (rightPattern.test(string)) string = string.replace(rightPattern, ‘‘);
return string;
};
// 库方法: 屏蔽空白文本节点
Base.spaceNode = function (elementNode) {
if (typeof elementNode != ‘object‘) return elementNode;
var childs = elementNode.childNodes;
var pattern = /^[\s\t]+$/;
for (var i = 0; i < childs.length; i ++) {
if (childs[i].nodeType == 3 && pattern.test(childs[i].nodeValue)) elementNode.removeChild(childs[i]);
}
return elementNode;
}
// 库方法: 屏蔽注释节点
Base.commentNode = function (elementNode) {
if (typeof elementNode != ‘object‘) return elementNode;
var childs = elementNode.childNodes;
var position = ‘‘;
if (elementNode.id != ‘‘) {
position = elementNode.id;
} else if (elementNode.className != ‘‘) {
position = ‘class = ‘ + elementNode.className;
} else {
position = ‘tagName = ‘ + elementNode.tagName;
}
var comments = $().getTagName(‘!‘, position).getNodes();
if (comments instanceof Array) { // 兼容 IE
for (var i = 0; i < comments.length; i ++) {
elementNode.removeChild(comments[i]);
}
}
for (var j = 0; j < childs.length; j ++) {
if (childs[j].nodeType == 8) elementNode.removeChild(childs[j]);
}
return elementNode;
};
// 库方法: 定位器筛选
Base.positioner = function (position) {
var namePattern = /^name\s*=\s*(\w+)$/i;
var tagNamePattern = /^tag(Name)?\s*=\s*(\w+)$/i;
var classPattern = /^class(Name)?\s*=\s*(\w+)$/i;
var idPattern = /^id\s*=\s*(\w+)$/i;
var selector = [];
if (namePattern.test(position)) { // name
position = namePattern.exec(position)[1];
selector = $().getName(position).getNodes();
} else if (tagNamePattern.test(position)) { // tagName
position = tagNamePattern.exec(position)[2];
selector = $().getTagName(position).getNodes();
} else if (classPattern.test(position)) { // class
position = classPattern.exec(position)[2];
selector = $().getClass(position).getNodes();
} else if (idPattern.test(position)) { // id
position = idPattern.exec(position)[1];
selector = $().getId(position).getNodes();
} else { // id
selector = $().getId(position).getNodes();
}
return selector;
}
// 库方法: 添加属性
Base.addAttribute = function (elementNode, attributes) {
if (attributes instanceof Array) {
for (var i = 0; i < attributes.length; i ++) {
this.addAttribute(elementNode, attributes[i]);
}
} else {
var attributePattern = /^([a-z]+)\s*=\s*([\w\-\\\/=\s\‘;\.:\"\)\(]+)$/i;
var attributeKey = ‘‘, attributeValue = ‘‘;
if (attributePattern.test(attributes)) {
attributeKey = attributePattern.exec(attributes)[1];
attributeValue = attributePattern.exec(attributes)[2];
if (attributeKey == ‘style‘) { // CSS IE 6/7 特殊处理
var cssPattern = /^([a-z]+)\s*:\s*([\w\(\)\‘\"\\\/\-#\.=%\s]+)$/i;
var cssKey = ‘‘, cssValue = ‘‘;
if (/(;\s*)/.test(attributeValue)) { // 集群
attributeValue = attributeValue.replace(/(;\s*)/g, ‘|‘);
var css = attributeValue.split(‘|‘);
for (var i = 0; i < css.length; i ++) {
if (cssPattern.test(css[i])) {
cssKey = cssPattern.exec(css[i])[1];
cssValue = cssPattern.exec(css[i])[2];
$(elementNode).css(cssKey, cssValue);
}
}
} else { // 单个
if (cssPattern.test(attributeValue)) {
cssKey = cssPattern(attributeValue).exec(attributeValue)[1];
cssValue = cssPattern(attributeValue).exec(attributeValue)[2];
$(elementNode).css(cssKey, cssValue);
}
}
} else {
elementNode.setAttribute(attributeKey, attributeValue);
}
}
}
};
// 库方法: 创建元素节点
Base.addElement = function (elementName, attributes, html, parentElement) {
if (typeof parentElement == ‘undefined‘ && typeof parentElement != ‘string‘ && typeof parentElement != ‘object‘) parentElement = document.body;
if (typeof parentElement == ‘string‘) parentElement = Base.positioner(parentElement);
var elementNode = document.createElement(elementName);
if (typeof html != ‘undefined‘) $(elementNode).html(html);
if (typeof attributes != ‘undefined‘) Base.addAttribute(elementNode, attributes);
if (parentElement instanceof Array) { // 集群
for (var i = 0; i < parentElement.length; i ++) {
parentElement[i].appendChild(elementNode);
}
} else { // 单个
parentElement.appendChild(elementNode);
}
return elementNode;
};
// 库方法: 删除元素节点
Base.removeElement = function (attributes, parentElement) {
if (typeof parentElement == ‘string‘) parentElement = Base.positioner(parentElement);
if (attributes instanceof Array) { // 集群
for (var i = 0; i < attributes.length; i ++) {
this.removeElement(attributes[i], parentElement);
}
} else { // 单个
elementNode = typeof attributes == ‘object‘ ? attributes : Base.positioner(attributes);
if (elementNode instanceof Array) { // 集群
var sevedNode = [];
for (var i = 0; i < elementNode.length; i ++) {
sevedNode = elementNode;
this.removeElement(elementNode[i], parentElement);
elementNode = sevedNode;
}
} else { // 单个
if (typeof parentElement == ‘undefined‘) parentElement = elementNode.parentNode;
if (parentElement instanceof Array) { // 集群
for (var i = 0; i < parentElement.length; i ++) {
if (typeof parentElement[i] == ‘object‘ && Base.hasChildNode(parentElement[i], elementNode)) parentElement[i].removeChild(elementNode);
}
} else { // 单个
if (typeof parentElement == ‘object‘ && Base.hasChildNode(parentElement, elementNode)) parentElement.removeChild(elementNode);
}
}
}
};
// 库方法: 检测元素从属关系(直接从属)
Base.hasChildNode = function (parentElement, elementNode) {
var childs = parentElement.childNodes;
for (var i = 0; i < childs.length; i ++) {
if (childs[i] == elementNode) return true;
}
return false;
};
// 库方法: 获取元素大小尺寸
Base.getRectangle = function (elementNode) {
var width = 0, height = 0, display = ‘‘, _this = {};
_this = $(elementNode);
width = _this.css(‘width‘);
height = _this.css(‘height‘);
display = _this.css(‘display‘);
if (width == ‘auto‘ || height == ‘auto‘) {
if (display == ‘none‘) _this.show();
width = elementNode.offsetWidth;
height = elementNode.offsetHeight;
}
width = this.substring(width, ‘px‘);
height = this.substring(height, ‘px‘);
return {
width : width,
height : height
};
};
// 库方法: 获取元素外边距尺寸
Base.getOuterRectangle = function (elementNode) {
this.setAbsolutePosition(elementNode);
var outerX = 0, outerY = 0, display = ‘‘, _this = {};
_this = $(elementNode);
outerX = _this.css(‘left‘);
outerY = _this.css(‘top‘);
display = _this.css(‘display‘);
if (outerX == ‘auto‘ || outerY == ‘auto‘) {
if (display == ‘none‘) _this.show();
outerX = elementNode.offsetLeft;
outerY = elementNode.offsetTop;
}
outerX = this.substring(outerX, ‘px‘);
outerY = this.substring(outerY, ‘px‘);
return {
outerX : outerX,
outerY : outerY
};
};
// 库方法: 获取网页可视区尺寸
Base.getInnerRectangle = function () {
var innerWidth = Tool.getInnerWidth();
var innerHeight = Tool.getInnerHeight();
return {
innerWidth : innerWidth,
innerHeight : innerHeight
};
};
// 库方法: 设置元素绝对定位
Base.setAbsolutePosition = function (elementNode) {
if ($(elementNode).css(‘position‘) != ‘absolute‘) {
$(elementNode).css([‘position = absolute‘, ‘left = 0‘, ‘top = 0‘]);
}
};
// 库方法: 禁止页面滚动(修正浏览器BUG)
Base.fixed = function (elementNode) {
// IE 禁止方式
$(elementNode).mousedown(function () {
$(elementNode).mousemove(function (event) {
event.preventDefault();
});
});
// Chrome 禁止方式
$(elementNode).mousewheel(function (event) {
event.preventDefault();
});
};/*
源码作者: 石不易(Louis Shi)
联系方式: http://www.shibuyi.net
===================================================================================================
程序名称: JavaScript 工具库(跨浏览器兼容) BETA 2.0 版
迭代版本: BETA 1.0
功能总数: 18 个
新增总数: 3 个
删除总数: 2 个
追加功能:
1. 跨浏览器检测元素从属关系(直接从属+间接从属)
2. 跨浏览器获取与设置滚动条(x轴+y轴)
...
优化功能:
1. 跨浏览器现代事件绑定(注册事件+注销事件)
2. 跨浏览器配备事件对象(IE 6/7/8 专属)
...
删除功能:
1. 跨浏览器取消事件冒泡
2. 跨浏览器取消事件默认行为
...
*/
// 工具库
var Tool = {
// 数组排序
sort : function () {
return {
minToMax : function (min, max) { // 正序: 从小到大
if (min < max) {
return -1;
} else if (min > max) {
return 1;
} else {
return 0;
}
},
maxToMin : function (min, max) { // 倒序: 从大到小
if (min < max) {
return 1;
} else if (min > max) {
return -1;
} else {
return 0;
}
}
}
},
// 跨浏览器获取计算后的 CSS 样式
getStyle : function (elementNode, cssKey) {
if (typeof window.getComputedStyle != ‘undefined‘) { // W3C
return window.getComputedStyle(elementNode, null)[cssKey];
} else if (typeof elementNode.currentStyle != ‘undefined‘) { // IE 6/7/8
return elementNode.currentStyle[cssKey];
}
},
// 跨浏览器添加样式规则
addRule : function (sheet, ruleName, ruleText, rulePosition) {
if (typeof sheet.insertRule != ‘undefined‘) { // W3C
sheet.insertRule(ruleName + ‘ {‘ + ruleText + ‘}‘, rulePosition);
} else if (typeof sheet.addRule != ‘undefined‘) { // IE 6/7/8
sheet.addRule(ruleName, ruleText, rulePosition);
}
},
// 跨浏览器移除样式规则
removeRule : function (sheet, rulePosition) {
if (typeof sheet.deleteRule != ‘undefined‘) { // W3C
sheet.deleteRule(rulePosition);
} else if (typeof sheet.removeRule != ‘undefined‘) { // IE 6/7/8
sheet.removeRule(rulePosition);
}
},
// 跨浏览器获取样式规则总数
getRules : function (sheet) {
if (typeof sheet.cssRules != ‘undefined‘) { // W3C
return sheet.cssRules.length;
} else if (typeof sheet.rules != ‘undefined‘) { // IE 6/7/8
return sheet.rules.length;
}
},
// 事件绑定计数器
eventId : 0,
// 跨浏览器现代事件绑定: 注册事件
loginEvent : function (elementNode, eventName, method) {
if (eventName.indexOf(‘on‘) == 0) eventName = eventName.substring(2, eventName.length);
if (typeof elementNode.addEventListener != ‘undefined‘) { // W3C
elementNode.addEventListener(eventName, method, false);
} else if (typeof elementNode.attachEvent != ‘undefined‘) { // IE 6/7/8
// 创建哈希表，存储事件数组
if (typeof elementNode.hashTable != ‘object‘) elementNode.hashTable = {};
// 创建事件数组，储存事件方法
if (typeof elementNode.hashTable[eventName] != ‘object‘) elementNode.hashTable[eventName] = [];
// 获取事件数组
var events = elementNode.hashTable[eventName];
// 检测同一节点、同一事件是否方法重复
for (var i = 0; i < events.length; i ++) {
if (events[i] == method) return false;
}
// 储存事件方法
events[this.eventId ++] = method;
var _this = this;
// 执行事件方法
elementNode[‘on‘ + eventName] = function () {
var event = _this.eventIE(window.event);
for (var i = 0; i < events.length; i ++) {
if (typeof events[i] != ‘undefined‘) events[i].call(this, event);
}
};
}
},
// 跨浏览器现代事件绑定: 注销事件
logoutEvent : function (elementNode, eventName, method) {
if (eventName.indexOf(‘on‘) == 0) eventName = eventName.substring(2, eventName.length);
if (typeof elementNode.removeEventListener != ‘undefined‘) { // W3C
elementNode.removeEventListener(eventName, method, false);
} else if (typeof elementNode.detachEvent != ‘undefined‘) { // IE 6/7/8
if (typeof elementNode.hashTable != ‘undefined‘ && typeof elementNode.hashTable[eventName] != ‘undefined‘) {
var events = elementNode.hashTable[eventName];
for (var i = 0; i < events.length; i ++) {
if (events[i] == method) delete events[i];
}
}
}
},
// 跨浏览器配备事件对象(IE 6/7/8 专属)
eventIE : function (event) {
// 配备取消事件冒泡
event.stopPropagation = function () {
event.cancelBubble = true;
};
// 配备取消事件默认行为
event.preventDefault = function () {
event.returnValue = false;
};
// 配备获取事件绑定对象
event.target = event.srcElement;
return event;
},
// 跨浏览器鼠标滚轮(中键)事件
mousewheel : function (elementNode, method, mode) {
if (typeof elementNode.onmousewheel != ‘undefined‘) { // 非 Firefox
mode ? this.loginEvent(elementNode, ‘mousewheel‘, method) : this.logoutEvent(elementNode, ‘mousewheel‘, method);
} else { // Firefox
mode ? this.loginEvent(elementNode, ‘DOMMouseScroll‘, method) : this.logoutEvent(elementNode, ‘DOMMouseScroll‘, method);
}
},
// 跨浏览器检测元素从属关系(直接从属+间接从属)
hasChildNode : function (parentElement, elementNode) {
if (typeof parentElement.contains != ‘undefined‘) { // W3C
return parentElement.contains(elementNode);
} else if (typeof parentElement.compareDocumentPosition != ‘undefined‘) { // 低版本浏览器
return parentElement.compareDocumentPosition(elementNode) == 20;
}
return false;
},
// 跨浏览器获取网页可视区宽度尺寸
getInnerWidth : function () {
if (typeof window.innerWidth != ‘undefined‘) { // W3C
return window.innerWidth;
} else { // IE 6/7/8
return document.documentElement.clientWidth;
}
},
// 跨浏览器获取网页可视区高度尺寸
getInnerHeight : function () {
if (typeof window.innerHeight != ‘undefined‘) { // W3C
return window.innerHeight;
} else { // IE 6/7/8
return document.documentElement.clientHeight;
}
},
// 跨浏览器重置横向窗体滚动条
scrollInitializationX : function () {
this.scrollX(0);
},
// 跨浏览器重置纵向窗体滚动条
scrollInitializationY : function () {
this.scrollY(0);
},
// 跨浏览器获取与设置滚动条X轴
scrollX : function (x) {
if (typeof x != ‘undefined‘) { // 设置
document.documentElement.scrollLeft = x; // 非 Chrome / Safari
document.body.scrollLeft = x; // Chrome / Safari
} else { // 获取
return document.documentElement.scrollLeft == 0 ? document.body.scrollLeft : document.documentElement.scrollLeft;
}
},
// 跨浏览器获取与设置滚动条Y轴
scrollY : function (y) {
if (typeof y != ‘undefined‘) { // 设置
document.documentElement.scrollTop = y;
document.body.scrollTop = y;
} else { // 获取
return document.documentElement.scrollTop == 0 ? document.body.scrollTop : document.documentElement.scrollTop;
}
},
// IE 专属事件: 浏览器外捕获鼠标按下
setCaptureIE : function (elementNode) {
if (typeof elementNode.setCapture != ‘undefined‘) { // IE
elementNode.setCapture();
}
},
// IE 专属事件: 浏览器外捕获鼠标弹起
releaseCaptureIE : function (elementNode) {
if (typeof elementNode.releaseCapture != ‘undefined‘) { // IE
elementNode.releaseCapture();
}
}
};关于 BETA 2.0 原型版核心源码与实例演示的获取请移动至官网下载！
感谢大家积极评测给予意见！
CNBlogs 博客：http://www.cnblogs.com/shibuyi/
CSDN 博客：http://blog.csdn.net/louis_shi/
ITeye 博客：http://shibuyi.iteye.com/
本文出自 “石不易的心情博客” 博客，请务必保留此出处http://shibuyi.blog.51cto.com/9460768/1562092
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
