js 工具库

var utils=(function(){ var flg='getComputedStyle' in window; function makeArray(arg){ var ary=[]; if(flg){ return Array.prototype.slice.call(arg); }else{ for(var i=0; i<arg.length; i++){ ary.push(arg[i]) } } return ary; } function jsonParse(jsonStr){ return 'JSON' in window?JSON.parse(jsonStr):eval('('+jsonStr+')') } function win(attr,value){ /*//思路2：判断arguments if(arguments.length==1){ return document.documentElement[attr]||document.body[attr]; } document.documentElement[attr]=document.body[attr]=value;*/ //思路1：通过判断第二个参数是否传了，来解决 获取 和 设置 的问题； //if(value==null) if(typeof value==='undefined'){//第二个参数没传-作用用来“获取” return document.documentElement[attr]||document.body[attr]; } //用来设置 document.documentElement[attr]=document.body[attr]=value; } function offset(curEle){ var l=curEle.offsetLeft; var t=curEle.offsetTop; var par=curEle.offsetParent; while(par){ if(window.navigator.userAgent.indexOf('MSIE 8.0') === -1){ l+=par.clientLeft; t+=par.clientTop; } l+=par.offsetLeft; t+=par.offsetTop; par=par.offsetParent; } return {left:l,top:t}; } function rnd(n,m){ //1.看来传的参数不是数字，返回一个0-1之间的随机小数，代表传参错误； n=Number(n); m=Number(m); if(isNaN(n) || isNaN(m)){ return Math.random();//0-1之间随机小数，代表传参错误 } //2.如果n>m,需要交互他们的位置 if(n>m){ var tmp=m; m=n; n=tmp; } return Math.round(Math.random()*(m-n)+n); } function getByClass(strClass,curEle){ curEle=curEle||document; //1.标准浏览器直接使用系统方法 if(flg){ return this.makeArray(curEle.getElementsByClassName(strClass)); } //2.处理IE6-8浏览器 //2.1字符串转数组：去除首尾空格，再按空格切分成数组 var aryClass=strClass.replace(/(^ +)|( +$)/g,'').split(/\s+/g); //2.2拿到该容器下所有的子元素 var nodeList=curEle.getElementsByTagName('*'); var ary=[]; //2.3校验nodeList中每个元素的className是否包含aryClass中的每一项 for(var i=0; i<nodeList.length; i++){ var curNode=nodeList[i]; var bOk=true; for(var j=0; j<aryClass.length; j++){//'box1','box2'.... var reg=new RegExp('\\b'+aryClass[j]+'\\b'); if(!reg.test(curNode.className)){ bOk=false; break; } } if(bOk){ ary.push(curNode) } } return ary; } function addClass(curEle,strClass){ var aryClass=strClass.replace(/(^ +)|( +$)/g,'').split(/\s+/g); //循环的目的是为了逐个校验 for(var i=0; i<aryClass.length; i++){ if(!this.hasClass(curEle,aryClass[i])){ curEle.className+=' '+aryClass[i]; } } } function hasClass(curEle,cName){ //var reg=new RegExp('\\b'+cName+'\\b'); var reg=new RegExp('(^| +)'+cName+'( +|$)'); return reg.test(curEle.className); } function removeClass(curEle,strClass){ var aryClass=strClass.replace(/(^ +)|( +$)/g,'').split(/\s+/g); for(var i=0; i<aryClass.length; i++){ //var reg=new RegExp('(^| +)'+aryClass[i]+'( +|$)'); var reg=new RegExp('\\b'+aryClass[i]+'\\b'); if(reg.test(curEle.className)){ curEle.className=curEle.className.replace(reg,' ').replace(/(^ +)|( +$)/g,'').replace(/\s+/g,' '); } } } function getCss(curEle,attr){ var val=null; var reg=null; if(flg){ val=getComputedStyle(curEle,false)[attr] }else{ //处理透明度 if(attr==='opacity'){ val=curEle.currentStyle.filter; //'alpha(opacity=30)' reg=/^alpha\(opacity[=:](\d+)\)$/gi; //RegExp.$1 --第一个小分组 ；他不受全局g的影响，但是用RegExp之前，一定要先影响lastIndex；能影响lastIndex的属性有两个（test，exec） //注意。通过RegExp最多只能拿到$9；第九个小分组之后都拿不到； //return reg.test(val)?reg.exec(val)[1]/100:1; return reg.test(val)?RegExp.$1/100:1; } val=curEle.currentStyle[attr]; } //处理单位 reg=/^([+-])?(\d+(\.\d+)?(px|pt|rem|em))$/i; return reg.test(val)?parseFloat(val):val; } function setCss(curEle,attr,value){ //处理浮动问题 if(attr==='float'){ curEle.style.cssFloat=value; curEle.style.styleFloat=value; return; } //处理透明度 if(attr==='opacity'){ curEle.style.opacity=value; curEle.style.filter='alpha(opacity='+(value*100)+')'; return; } //处理单位 var reg=/^(width|height|left|top|right|bottom|((margin|padding)(left|top|right|bottom)?))$/ig; if(reg.test(attr) && value.toString().indexOf('%')===-1){ value=parseFloat(value)+'px'; } curEle.style[attr]=value; } function setGroupCss(curEle,opt){ if(opt.toString()!=='[object Object]') return;//如果opt不是对象，直接阻断程序； for(var attr in opt){ this.setCss(curEle,attr,opt[attr]) } } function css(curEle){ var arg2=arguments[1]; if(typeof arg2==='string'){//获取 or 设置一个 var arg3=arguments[2]; if(typeof arg3==='undefined'){//获取 return this.getCss(curEle,arg2) }else{//设置一个 this.setCss(curEle,arg2,arg3) } } if(arg2.toString==='[object Object]'){//设置一组 this.setGroupCss(curEle,arg2) } } function getChildren(curEle,ele){ var nodeList=curEle.childNodes;//获取所有子节点 var ary=[]; for(var i=0; i<nodeList.length; i++){ var curNode=nodeList[i];//div p if(curNode.nodeType===1){ //考虑第二个参数是否传了 if(typeof ele !=='undefined'){//筛选 if(ele.toUpperCase()===curNode.nodeName){ ary.push(curNode) } }else{ ary.push(curNode) } } } return ary; } function prev(curEle){ //标准浏览器 if(flg){ return curEle.previousElementSibling; } //IE6-8的兼容处理； var pre=curEle.previousSibling;//上一个哥哥节点 while(pre && pre.nodeType !==1){ pre=pre.previousSibling; } return pre; } function next(curEle){ if(flg){ return curEle.nextElementSibling; } var nex=curEle.nextSibling; while(nex && nex.nodeType !==1){ nex=nex.nextSibling; } return nex; } function prevAll(curEle){ var pre=this.prev(curEle); var ary=[]; while(pre){ ary.push(pre); pre=this.prev(pre); } return ary; } function nextAll(curEle){ var nex=this.next(curEle); var ary=[]; while(nex){ ary.push(nex); nex=this.next(nex); } return ary; } function sibling(curEle){ var ary=[]; var pre=this.prev(curEle); var nex=this.next(curEle); if(pre) ary.push(pre); if(nex) ary.push(nex); return ary; } function siblings(curEle){ var prevAll=this.prevAll(curEle); var nextAll=this.nextAll(curEle); return prevAll.concat(nextAll); } function index(curEle){ return this.prevAll(curEle).length; } function firstChild(curEle){ var ary=this.getChildren(curEle); return ary[0]; } function lastChild(curEle){ var ary=this.getChildren(curEle); return ary[ary.length-1]; } function appendChild(parent,newEle){ parent.appendChild(newEle); } function prependChild(parent,newEle){ var first=this.firstChild(parent); if(first){//如果有第一个子元素 parent.insertBefore(newEle,first); }else{ parent.appendChild(newEle); } } function insertBefore(newEle,oldEle){ oldEle.parentNode.insertBefore(newEle,oldEle); } function insertAfter(newEle,oldEle){ var nex=this.next(oldEle); if(nex){ oldEle.parentNode.insertBefore(newEle,nex); }else{ oldEle.parentNode.appendChild(newEle); } } return { //makeArray:类数组转数组 makeArray:makeArray, //jsonParse:把JSON格式的字符串转为JSON格式的数据（对象） jsonParse:jsonParse, //win:处理浏览器盒子模型的兼容性 win:win, //offset:求盒子模型到body的偏移量 offset:offset, //rnd:求[n,m]之间的随机整数 rnd:rnd, //getByClass:限定范围 的通过 class 来 获取元素 getByClass:getByClass, //hasClass:判断 元素的className上 是否包含 某个class名'box1'； hasClass:hasClass, //addClass:如果元素的className上没有某个class名，才会添加该class名； //'box1 box2 box3' addClass:addClass, //removeClass:判断一个元素的class上是否有某个class名，如果有干掉他； removeClass:removeClass, //getCss:获取元素的非行间样式； getCss:getCss, //setCss:给元素的某个属性，设置一个样式 setCss:setCss, //setGroupCss:给元素设置一组样式 {width:xxx,height:xxx} setGroupCss:setGroupCss, //css:getCss(curEle,attr) setCss(curEle,attr,value) setGroupCss(curEle,opt) css:css, //getChildren:获取当前元素下的所有子元素，帅选出某个标签的元素集合； getChildren:getChildren, //prev:获取当前元素的上一个哥哥元素； prev:prev, next:next, //prevAll:获取当前元素所有的哥哥元素 prevAll:prevAll, //nextAll:获取当前元素的所有弟弟元素 nextAll:nextAll, //sibling:当前元素的相邻元素 prev+next sibling:sibling, //siblings:所有的兄弟元素 prevAll+nextAll; siblings:siblings, //index:求当前元素的索引 index:index, //firstChild:求当前容器下第一个子元素 firstChild:firstChild, //lastChild:求当前容器下最后一个子元素 lastChild:lastChild, appendChild:appendChild, //prependChild:如果有第一个子元素，插入到第一个子元素的前面，否则，直接插入容器的末尾； prependChild:prependChild, insertBefore:insertBefore, //insertAfter:如果指定元素的弟弟元素存在的话，插入到弟弟元素的前面，否则，直接插入到容器的末尾； insertAfter:insertAfter } })();