前端工具库
2018-09-02 本文已影响0人
果木山
utils工具库
var utils=(function () {
//判断浏览器种类，是否为标准浏览器（包括IE9/10/11浏览器）;
var frg="getComputedStyle" in window;//结果为布尔值，在IE8及其以下浏览器下返回false;
return {
//1 类数组转数组
makeArray:function (arg) {
var ary=[];
if(frg){
ary=Array.prototype.slice.call(arg);
}else{
for(var i=0; i<arg.length; i++){
ary.push(arg[i]);
}
}
return ary;
},
//2 JSON格式的字符串转化为JSON格式的对象
jsonParse:function (strJson) {
return "JSON" in window?JSON.parse(strJson):eval("("+strJson+")");
},
//3 随机数的获取 [n,m]
rnd:function (n,m) {
n=Number(n);
m=Number(m);
if(isNaN(n) || isNaN(m)){
//如果n,m有一个不是数字，那么返回0-1之间的随机数
return Math.random();
}
if(n>m){
var temp=n;
n=m;
m=temp;
}
return Math.round(Math.random()*(m-n)+n);
},
//4 元素到浏览器视口的左、上边缘距离；
offset:function (ele) {
var l=ele.offsetLeft;
var t=ele.offsetTop;
var par=ele.offsetParent;
while(par && par!==document.body){
l+=par.offsetLeft+par.clientLeft;
t+=par.offsetTop+par.clientTop;
par=par.offsetParent;
}
return {left:l,top:t};
},
//5 浏览器可视区域的宽高及卷去的长度
win:function (attr, value) {
//没传value代表获取，有返回值，传value代表设置，无返回值；
if(typeof value=="undefined"){
//判断条件可以是：value==null,value==undefined,!value
return document.documentElement[attr] || document.body[attr];
}else{
document.documentElement[attr]=document.body[attr]=value;
}
},
//6 判断元素身上是否已存在class名，返回布尔值
hasClass:function (ele, cName) {
cName=cName.replace(/(^ +)|( +$)/g,"");
var reg=new RegExp("(^|\\s+)"+cName+"(\\s+|$)");
return reg.test(ele.className);
},
//7 添加一组class名，首先验证是否存在
addClass:function (ele,strClass) {
strClass=strClass.replace(/(^\s+)|(\s+$)/g,"");//过滤字符串前后空格
var aryClass=strClass.split(/\s+/g);
for(var i=0; i<aryClass.length; i++){
if(!this.hasClass(ele,aryClass[i])){
//1 开头结尾去掉空格 2 中间多个空格，变为一个空格
ele.className=ele.className.replace(/(^\s+)|(\s+$)/g,"").replace(/\s+/," ");
ele.className+=" "+aryClass[i];//字符串拼接的时候，前面拼接空格；
}
}
},
//8 删除元素上的class名，验证传入的class名在元素上是否存在，若存在，则删除
removeClass:function(ele,strClass){
strClass=strClass.replace(/(^\s+)|(\s+$)/g,"");
var aryClass=strClass.split(/\s+/g);
for(var i=0; i<aryClass.length; i++){
if(this.hasClass(ele,aryClass[i])){
ele.className=ele.className.replace(aryClass[i]," ").replace(/(^\s+)|(\s+$)/g,"").replace(/\s+/," ");
}
}
},
//9 获取带有class名的一组元素集合，返回数组
getByClass:function (strClass, parent) {
parent=parent || document;
if(frg){
return this.makeArray(parent.getElementsByClassName(strClass));
}
//IE6,7,8浏览器
var ary=[];
var nodelist=parent.getElementsByTagName("*");
strClass=strClass.replace(/(^\s+)|(\s+$)/g,"");//过滤字符串前后空格
var aryClass=strClass.split(/\s+/);
for(var i=0; i<nodelist.length; i++){
var curEle=nodelist[i];
var bOk=true;
for(var j=0; j<aryClass.length; j++){
var reg=new RegExp("\\b"+aryClass[j]+"\\b");
if(!reg.test(curEle.className)){
bOk=false;
break;//性能优化
}
}
if(bOk){
ary.push(curEle);
}
}
return ary;
},
//10 获取元素身上的非行间样式（也可以获取行间样式）
getCss:function (ele,attr) {
var value=null;
var reg=null;
if(frg){
value=getComputedStyle(ele,null)[attr];
if(attr==="opacity"){
//如果为opcity，则拿到的为字符类
val=Number(val);
}
}else{
if(attr=="opacity"){
value=ele.currentStyle.filter;
//在设置filter时，opacity属性后面可能或加空格，所以需要校验空格，则添加(?:\s+)?
reg=/^alpha\(opacity(?:\s+)?[=:](?:\s+)?(\d+)\)$/;
return reg.test(value)?RegExp.$1/100:1;
}else{
value=ele.currentStyle[attr];
}
}
reg=/^([+-]?((\d+)|([1-9]\d+))(\.\d+)?)(px|em|pt|rem)$/;
return reg.test(value)? parseFloat(value):value;
},
//11 setCss 设置单一行间样式
setCss:function (ele, attr, value) {
//1.针对 width height left top right bottom margin(Left|Right..) padding lineHeight fontSize borderWidth 给其添加单位
var reg=/(width|height|left|top|right|bottom|lineHeight|borderWidth|fontSize|((margin|padding)(Left|Right|Top|Bottom)?))/g;
if(reg.test(attr) && !/(auto|%)/.test(value)){
value=parseFloat(value)+"px";
}
//下面代码更简单
/*if(reg.test(attr) && !isNaN(value)){
value=value+"px";
}*/
//2. 针对透明度的兼容处理
if(attr=="opacity"){
ele.style[attr]=value;
ele.style.filter="alpha(opacity="+value*100+")";
return;
}
//3. 针对浮动
if(attr=="float"){
ele.style.styleFloat=value;//兼容IE
ele.style.cssFloat=value;//兼容火狐
return;
}
//核心设置
ele.style[attr]=value;
},
//12 设置一组行间样式
setGroupCss:function (ele,opt) {
for(var attr in opt){
this.setCss(ele,attr,opt[attr]);
}
},
//13 css三合一，集获取，设置一个，设置一组
css:function (ele) {
//思路：判断传入的实参，利用arguments，第一个参数ele,第二个参数（a.字符串attr，b.对象opt),第三个参数 属性值
//判断条件是传入几个实参，即实参的类型
//字符串用typeof判断，对象用{}.toString()==="[object Object]"判断是否为真；
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);
}
}
if(argTwo.toString()==="[object Object]"){
this.setGroupCss(ele,argTwo);
}
},
//14 getChildren 获取父级容器下的所有元素节点，并且如果需要获取指定的tagName的元素，返回指定的
getChildren:function (parent, tagName) {
//tagName=tagName \\ "*";
//可以使用parent.getElementsByTagName(tagName);
var ary=[];
var aChilds=parent.childNodes;
for(var i=0; i<aChilds.length; i++){
var cur=aChilds[i];
if(cur.nodeType==1){
if(typeof tagName==="undefined"){
ary.push(cur);
}else if(cur.nodeName===tagName.toUpperCase()){
//获取元素身上的tagName方法：cur.tagName或cur.nodeName，二者获取的都是大写的标签名
ary.push(cur);
}
}
}
return ary;
},
//15 元素上一个哥哥元素节点
prevNode:function (ele) {
if(frg){
return ele.previousElementSibling;
}
pre=ele.previousSibling;
while(pre && pre.nodeType !==1){
pre=pre.previousSibling;
}
return pre;
},
//16 获取元素所有的哥哥元素节点集合
prevNodeAll:function (ele){
var ary=[];
var pre=this.prevNode(ele);
while(pre){
//unshift的目的是使元素按着dom顺序插入数组；
ary.unshift(pre);
pre=this.prevNode(pre);
}
return ary;
},
//17 元素的下一个弟弟元素节点
nextNode:function (ele) {
if(frg){
return ele.nextElementSibling;
}
var nex=ele.nextSibling;
while(nex && nex.nodeType !==1){
nex=nex.nextSibling;
}
return nex;
},
//18 获取元素所有的弟弟元素节点集合
nextNodeAll:function (ele){
var ary=[];
var nex=this.nextNode(ele);
while(nex){
ary.push(nex);
nex=this.nextNode(nex);
}
return ary;
},
//19 元素的相邻元素节点（包含哥哥和弟弟元素节点）
sibling:function (ele) {
var pre=this.prevNode(ele);
var next=this.nextNode(ele);
var ary=[];
if(pre) ary.push(pre);
if(next) ary.push(next);
return ary;
},
//20 元素的所有的相邻元素节点
siblings:function (ele) {
return this.prevNodeAll(ele).concat(this.nextNodeAll(ele));
},
//21 index 元素在所有子节点中的位置，索引值，通过判断有几个哥哥元素
index:function (ele) {
return this.prevNodeAll(ele).length;
},
//22 firstChild 所有子节点中第一个元素节点
firstEleChild:function (parent) {
return this.getChildren(parent)[0];
},
//23 lastChild 所有子节点中最后一个元素节点
lastEleChild:function (parent) {
var ary=this.getChildren(parent);
return ary[ary.length-1];
},
//24 appendChild 插在父级元素所有子元素的后面
appendChild:function (parent,newnode){
parent.appendChild(newnode);
},
//25 prependChild 插在父级元素所有子元素的前面
prependChild:function (parent,newnode) {
var firstNode=this.firstChild(parent);
if(firstNode){
parent.insertBefore(newnode,firstNode);
}else{
parent.appendChild(newnode);
}
},
//26 insertBefore 插入到指定子元素节点的前面
insertBefore:function (newnode,oldnode) {
oldnode.parentNode.insertBefore(newnode,oldnode);
},
//27 insertAfter 插入到指定子元素节点的后面
insertAfter:function (newnode,oldnode) {
var nexnode=this.nextNode(oldnode);
if(nexnode){
this.insertBefore(newnode,nexnode);
}else{
this.appendChild(oldnode.parent,newold);
}
}
}
})();
