var utils = (function () {
var flag = "getComputedStyle" in window;
//->listToArray:把類數(shù)組集合轉(zhuǎn)換為數(shù)組
function listToArray(likeAry) {
if (flag) {
return Array.prototype.slice.call(likeAry, 0);
}
var ary = [];
for (var i = 0; i < likeAry.length; i++) {
ary[ary.length] = likeAry[i];
}
return ary;
}
//->formatJSON:把JSON格式字符串轉(zhuǎn)換為JSON格式對象
function formatJSON(jsonStr) {
return "JSON" in window ? JSON.parse(jsonStr) : eval("(" + jsonStr + ")");
}
//->offset:獲取頁面中任意元素距離BODY的偏移
function offset(curEle) {
var disLeft = curEle.offsetLeft, disTop = curEle.offsetTop, par = curEle.offsetParent;
while (par) {
if (navigator.userAgent.indexOf("MSIE 8") === -1) {
disLeft += par.clientLeft;
disTop += par.clientTop;
}
disLeft += par.offsetLeft;
disTop += par.offsetTop;
par = par.offsetParent;
}
return {left: disLeft, top: disTop};
}
//->win:操作瀏覽器的盒子模型信息
function win(attr, value) {
if (typeof value === "undefined") {
return document.documentElement[attr] || document.body[attr];
}
document.documentElement[attr] = value;
document.body[attr] = value;
}
//->children:獲取所有的元素子節(jié)點
function children(curEle, tagName) {
var ary = [];
if (!flag) {
var nodeList = curEle.childNodes;
for (var i = 0, len = nodeList.length; i < len; i++) {
var curNode = nodeList[i];
curNode.nodeType === 1 ? ary[ary.length] = curNode : null;
}
nodeList = null;
} else {
ary = this.listToArray(curEle.children);
}
if (typeof tagName === "string") {
for (var k = 0; k < ary.length; k++) {
var curEleNode = ary[k];
if (curEleNode.nodeName.toLowerCase() !== tagName.toLowerCase()) {
ary.splice(k, 1);
k--;
}
}
}
return ary;
}
//->prev:獲取上一個哥哥元素節(jié)點
//->首先獲取當(dāng)前元素的上一個哥哥節(jié)點,判斷是否為元素節(jié)點,不是的話基于當(dāng)前的繼續(xù)找上面的哥哥節(jié)點...一直到找到哥哥元素節(jié)點為止,如果沒有哥哥元素節(jié)點,返回null即可
function prev(curEle) {
if (flag) {
return curEle.previousElementSibling;
}
var pre = curEle.previousSibling;
while (pre && pre.nodeType !== 1) {
pre = pre.previousSibling;
}
return pre;
}
//->next:獲取下一個弟弟元素節(jié)點
function next(curEle) {
if (flag) {
return curEle.nextElementSibling;
}
var nex = curEle.nextSibling;
while (nex && nex.nodeType !== 1) {
nex = nex.nextSibling;
}
return nex;
}
//->prevAll:獲取所有的哥哥元素節(jié)點
function prevAll(curEle) {
var ary = [];
var pre = this.prev(curEle);
while (pre) {
ary.unshift(pre);
pre = this.prev(pre);
}
return ary;
}
//->nextAll:獲取所有的弟弟元素節(jié)點
function nextAll(curEle) {
var ary = [];
var nex = this.next(curEle);
while (nex) {
ary.push(nex);
nex = this.next(nex);
}
return ary;
}
//->sibling:獲取相鄰的兩個元素節(jié)點
function sibling(curEle) {
var pre = this.prev(curEle);
var nex = this.next(curEle);
var ary = [];
pre ? ary.push(pre) : null;
nex ? ary.push(nex) : null;
return ary;
}
//->siblings:獲取所有的兄弟元素節(jié)點
function siblings(curEle) {
return this.prevAll(curEle).concat(this.nextAll(curEle));
}
//->index:獲取當(dāng)前元素的索引
function index(curEle) {
return this.prevAll(curEle).length;
}
//->firstChild:獲取第一個元素子節(jié)點
function firstChild(curEle) {
var chs = this.children(curEle);
return chs.length > 0 ? chs[0] : null;
}
//->lastChild:獲取最后一個元素子節(jié)點
function lastChild(curEle) {
var chs = this.children(curEle);
return chs.length > 0 ? chs[chs.length - 1] : null;
}
//->append:向指定容器的末尾追加元素
function append(newEle, container) {
container.appendChild(newEle);
}
//->prepend:向指定容器的開頭追加元素
//->把新的元素添加到容器中第一個子元素節(jié)點的前面,如果一個元素子節(jié)點都沒有,就放在末尾即可
function prepend(newEle, container) {
var fir = this.firstChild(container);
if (fir) {
container.insertBefore(newEle, fir);
return;
}
container.appendChild(newEle);
}
//->insertBefore:把新元素(newEle)追加到指定元素(oldEle)的前面
function insertBefore(newEle, oldEle) {
oldEle.parentNode.insertBefore(newEle, oldEle);
}
//->insertAfter:把新元素(newEle)追加到指定元素(oldEle)的后面
//->相當(dāng)于追加到oldEle弟弟元素的前面,如果弟弟不存在,也就是當(dāng)前元素已經(jīng)是最后一個了,我們把新的元素放在最末尾即可
function insertAfter(newEle, oldEle) {
var nex = this.next(oldEle);
if (nex) {
oldEle.parentNode.insertBefore(newEle, nex);
return;
}
oldEle.parentNode.appendChild(newEle);
}
//->hasClass:驗證當(dāng)前元素中是否包含className這個樣式類名
function hasClass(curEle, className) {
var reg = new RegExp("(^| +)" + className + "( +|$)");
return reg.test(curEle.className);
}
//->addClass:給元素增加樣式類名
function addClass(curEle, className) {
var ary = className.replace(/(^ +| +$)/g, "").split(/ +/g);
for (var i = 0, len = ary.length; i < len; i++) {
var curName = ary[i];
if (!this.hasClass(curEle, curName)) {
curEle.className += " " + curName;
}
}
}
//->removeClass:給元素移除樣式類名
function removeClass(curEle, className) {
var ary = className.replace(/(^ +| +$)/g, "").split(/ +/g);
for (var i = 0, len = ary.length; i < len; i++) {
var curName = ary[i];
if (this.hasClass(curEle, curName)) {
var reg = new RegExp("(^| +)" + curName + "( +|$)", "g");
curEle.className = curEle.className.replace(reg, " ");
}
}
}
//->getElementsByClass:通過元素的樣式類名獲取一組元素集合
function getElementsByClass(strClass, context) {
context = context || document;
if (flag) {
return this.listToArray(context.getElementsByClassName(strClass));
}
//->IE6~8
var ary = [], strClassAry = strClass.replace(/(^ +| +$)/g, "").split(/ +/g);
var nodeList = context.getElementsByTagName("*");
for (var i = 0, len = nodeList.length; i < len; i++) {
var curNode = nodeList[i];
var isOk = true;
for (var k = 0; k < strClassAry.length; k++) {
var reg = new RegExp("(^| +)" + strClassAry[k] + "( +|$)");
if (!reg.test(curNode.className)) {
isOk = false;
break;
}
}
if (isOk) {
ary[ary.length] = curNode;
}
}
return ary;
}
//->getCss:獲取元素的樣式值
function getCss(attr) {
var val = null, reg = null;
if (flag) {
val = window.getComputedStyle(this, null)[attr];
} else {
if (attr === "opacity") {
val = this.currentStyle["filter"];
reg = /^alpha\(opacity=(\d+(?:\.\d+)?)\)$/;
val = reg.test(val) ? reg.exec(val)[1] / 100 : 1;
} else {
val = this.currentStyle[attr];
}
}
reg = /^(-?\d+(\.\d+)?)(px|pt|em|rem)?$/;
return reg.test(val) ? parseFloat(val) : val;
}
//->setCss:給當(dāng)前元素的某一個樣式屬性設(shè)置值(增加在行內(nèi)樣式上的)
function setCss(attr, value) {
if (attr === "float") {
this["style"]["cssFloat"] = value;
this["style"]["styleFloat"] = value;
return;
}
if (attr === "opacity") {
this["style"]["opacity"] = value;
this["style"]["filter"] = "alpha(opacity=" + value * 100 + ")";
return;
}
var reg = /^(width|height|top|bottom|left|right|((margin|padding)(Top|Bottom|Left|Right)?))$/;
if (reg.test(attr)) {
if (!isNaN(value)) {
value += "px";
}
}
this["style"][attr] = value;
}
//->setGroupCss:給當(dāng)前元素批量的設(shè)置樣式屬性值
function setGroupCss(options) {
for (var key in options) {
if (options.hasOwnProperty(key)) {
setCss.call(this, key, options[key]);
}
}
}
//->css:此方法實現(xiàn)了獲取、單獨設(shè)置读整、批量設(shè)置元素的樣式值
function css(curEle) {
var argTwo = arguments[1], ary = Array.prototype.slice.call(arguments, 1);
if (typeof argTwo === "string") {
if (typeof arguments[2] === "undefined") {
return getCss.apply(curEle, ary);
}
setCss.apply(curEle, ary);
}
argTwo = argTwo || 0;
if (argTwo.toString() === "[object Object]") {
setGroupCss.apply(curEle, ary);
}
}
//->把外界需要使用的方法暴露給utils
return {
win: win,
offset: offset,
listToArray: listToArray,
formatJSON: formatJSON,
children: children,
prev: prev,
next: next,
prevAll: prevAll,
nextAll: nextAll,
sibling: sibling,
siblings: siblings,
index: index,
firstChild: firstChild,
lastChild: lastChild,
append: append,
prepend: prepend,
insertBefore: insertBefore,
insertAfter: insertAfter,
hasClass: hasClass,
addClass: addClass,
removeClass: removeClass,
getElementsByClass: getElementsByClass,
css: css
}
})();
