var utils = (function () {
var frg = 'getComputedStyle' in window;//如果frg为true，说明是标准浏览器；否则是IE6-8浏览器
return {
//类数组转数组
makeArray: function (arg) {
var ary = [];
if (frg) {//标准浏览器
ary = Array.prototype.slice.call(arg);
} else {//IE6-8浏览器
for (var i = 0; i < arg.length; i++) {
ary.push(arg[i]);
}
}
return ary;
},
//把json格式的字符串转成JSON格式的对象
jsonParse: function (strJson) {
return 'JSON' in window ? JSON.parse(strJson) : eval('(' + strJson + ')');
//当你的json in window 的时候 返回的是json格式的字符串否则返回的是eval
},
//求[n,m]之间的随机数 包含n和m
rnd: function (n, m) {
n = Number(n);
m = Number(m);
//无效数字返回0-1之间随机数
if (isNaN(n) || isNaN(m)) {
return Math.random();
}
if (n > m) {// 传错的时候
var tmp = m;
m = n;
n = tmp;
}
return Math.round(Math.random() * (m - n) + n);
},
//getCss:获取非行间样式（也可以拿到行内样式）
//获取 某个元素身上的某个样式值
//元素必须作为参数，样式也是个参数 值是要得到的返回值
getCss: function (ele, attr) {//ele是元素 attr是某个属性名 需要 求的是属性值
var value = null, reg = null;
if (frg) {//frg代表标准
value = getComputedStyle(ele, false)[attr];
} else {//IE6-8
if (attr == 'opacity') {//opacity 是透明度
value = ele.currentStyle.filter;//在ie浏览器下做的兼容 filter是ie兼容的值 filter alpha(opacity=xx);ie浏览器下1=100
reg = /alpha(opacity=:)/;//filter:alpha(opacity=10)
return reg.test(value) ? RegExp.$1 / 100 : 1;
// 校验value合不合格
} else {//不是透明度的话正常写
value = ele.currentStyle[attr];
}
}
//单位处理 px pt rem em
reg = /^([+-]?(\d|([1-9]\d+))(.\d+)?)(px|pt|rem|em)$/;
return reg.test(value) ? parseFloat(value) : value;
},
//win:盒子模型。求的是可视区的宽高和被浏览器卷去的高度
//通过第二个参数来区分获取和设置
win: function (attr, value) {
//value==undefined ; typeof value=='undefined' ; value==null;
if (value == null) {
return document.body[attr] || document.documentElement[attr];
}
document.body[attr] = document.documentElement[attr] = value;
},
//offset:求定位元素到body的偏移量
offset: function (ele) {
var l = ele.offsetLeft;
var t = ele.offsetTop;
var par = ele.offsetParent;
while (par) {
if (window.navigator.userAgent.toUpperCase().indexOf('MSIE 8.0') == -1) {//说明不是IE8得累加边框
l += par.clientLeft;
t += par.clientTop;
}
l += par.offsetLeft;
t += par.offsetTop;
par = par.offsetParent;
}
return {left: l, top: t};
},
//setCss:给元素设置一个样式
setCss: function (ele, attr, value) {
//3.浮动
if (attr === 'float') {
ele.style.cssFloat = value;//firefox
ele.style.styleFloat = value;//ie
return;
}
//2.处理透明度
if (attr === 'opacity') {
ele.style[attr] = value;//标准浏览器
ele.style.filter = 'alpha(opacity=' + value * 100 + ')';
return;
}
//1.处理单位：width,height,left,top,right,bottom,margin,padding
var reg = /(width|height|top|right|bottom|left|((margin|padding)(Top|Right|Bottom|Left)?))/g;
/if(reg.test(attr) && !/(auto|%)/.test(value)){
value=parseInt(value)+'px';
}/
//富豪思想
if (reg.test(attr) && !isNaN(value)) {
value = value + 'px';
}
ele.style[attr] = value;//最核心的
},
//setGroupCss:给当前元素，设置一组样式
setGroupCss: function (ele, opt) {
for (var attr in opt) {
this.setCss(ele, attr, opt[attr]);
}
},
//css:三合一的方法；集获取，设置一个，设置一组为一体；
//都有的是ele,第二个参数，如果是字符串（1有第三个参数，2没有第三个）；如果是对象，设置一组；---核心：在与区分参数
css: function (ele) {
var argTwo = arguments[1];// 第二个参数
//判断第二个参数的数据类型
if (typeof argTwo === 'string') {
var argThree = arguments[2];
//说明没有第三个参数，是获取
if (typeof argThree === 'undefined') {
return this.getCss(ele, argTwo);
} else {//有第三个参数，是设置一个
this.setCss(ele, argTwo, argThree);
}
}
//对象数据类型的检测，直接使用toString(); 是对象，说明是设置一组
if (argTwo.toString() === '[object Object]') {
this.setGroupCss(ele, argTwo);
}
},
//getChildren:获取当前容器下的所有元素
getChildren: function (parent, tagName) {
var childNodes = parent.childNodes;
var ary = [];
for (var i = 0; i < childNodes.length; i++) {
var cur = childNodes[i];
//先判断是个元素节点
if (cur.nodeType == 1) {
//如果第二个参数没有，说明不过滤，直接添加即可；
if (typeof tagName === 'undefined') {
ary.push(cur);
} else {//如果第二个参数有，需要比对标签名是否一致
if (cur.tagName.toLowerCase() === tagName.toLowerCase()) {
ary.push(cur);
}
}
}
}
return ary;
},
//prev:求上一个哥哥元素
prev: function (ele) {
if (frg) {
return ele.previousElementSibling;
}
var pre = ele.previousSibling;
while (pre && pre.nodeType !== 1) {
pre = pre.previousSibling;
}
return pre;
},
//next:下一个弟弟元素
next: function (ele) {
if (frg) {
return ele.nextElementSibling;
}
var nex = ele.nextSibling;//下一个弟弟节点
while (nex && nex.nodeType !== 1) {
nex = nex.nextSibling;
}
return nex;
},
//prevAll:当前元素所有的哥哥元素
prevAll: function (ele) {
var ary = [];
var pre = this.prev(ele);//先求出上一个哥哥元素
while (pre) {
ary.push(pre);
pre = this.prev(pre);
}
return ary;
},
//nextAll:
nextAll: function (ele) {
var ary = [];
var nex = this.next(ele);
while (nex) {
ary.push(nex);
nex = this.next(nex);
}
return ary;
},
//sibling:当前元素的相邻元素
sibling: function (ele) {
var prev = this.prev(ele);
var next = this.next(ele);
var ary = [];
if (prev) ary.push(prev);
if (next) ary.push(next);
return ary;
},
//siblings:当前元素的所有兄弟元素
siblings: function (ele) {
return this.prevAll(ele).concat(this.nextAll(ele));
},
//求当前元素的所有索引
index: function (ele) {
return this.prevAll(ele).length;
},
//firstChild:求当前容器下的第一个子元素
firstChild: function (parent) {
var aChild = this.getChildren(parent);
return aChild[0];
},
//lastChild:求当前容器的最后一个子元素
lastChild: function (parent) {
var aChild = this.getChildren(parent);
return aChild[aChild.length - 1];
},
//把元素插入到父容器的末尾；
appendChild: function (parent, ele) {
parent.appendChild(ele);
},
prependChild: function (parent, ele) {
var first = this.firstChild(parent);
if (first) {
parent.insertBefore(ele, first);
} else {
parent.appendChild(ele);
}
},
//insertBefore
insertBefore: function (newEle, oldEle) {
oldEle.parentNode.insertBefore(newEle, oldEle);
},
//insertAfter
insertAfter: function (newEle, oldEle) {
var nex = this.next(oldEle);//先求出oldEle的弟弟
if (nex) {
oldEle.parentNode.insertBefore(newEle, nex);
} else {
oldEle.parentNode.appendChild(newEle);
}
}
}
})();