前端工具库

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);
            }
        }
    }
})();