简朴的js逻辑封装

1.删除空缺结点

function delate(parent){
    var lis=parent.childNodes;
        for(var i=0;i<lis.length;i++){
            if(lis[i].nodeType==3&&/^\s+$/.test(lis[i].nodeValue)){
                parent.removeChild(lis[i]);
            }
        }
        return lis;
 }
    //console.log(delate(ul))

2.封装鼠标坐标

function hetpos(e){

    //规范下
    var x1=e.pageX;
    var y1=e.pageY;
    var pos={
        x:x1,
        y:y1
    }
    //IE下
    if(pos.x==='undefined'){
        pos.x=e.clientX+(document.documentElement.scrollLeft||document.body.scrollLeft);
    }else if(pos.y==='undefined'){
        pos.y=e.clientY+(document.documentElement.scrollTop||document.body.scrollTop);
    }
    return pos;
}

3.封装阻挠浏览器默许行动

function stopDefault(e){
            if(e.preventDefault){
                return e.preventDefault();
            }else{
                return e.returnValue=false;
            }
        }

4.封装阻挠冒泡

function stopBubble(e){

    if(e.stopPropagation){
        return e.stopPropagation();
    }else{
        return e.cancelBubble=true;
    }
}

//stopBubble(元素)

5.封装猎取款式表款式

function getStyle(newobj,style){
            if(newobj.currentStyle){
                return newobj.currentStyle[style];
            }else{
                return getComputedStyle(newobj,null)[style];
            }
        }
        //getStyle(dom元素,'要看到的css款式');

6.封装DOM2级增加事宜

function addEvent( obj , type , fun){
            if(obj.addEventListener){
                return obj.addEventListener(type,fun,false);
            }else if(obj.attachEvent){
                return obj.attachEvent('on'+type, fun);
            }else{
                return obj["on"+type]=fun;
            }
        }

//addEvent(dom,事宜范例,函数)

7.封装DOM2级移除事宜

function remEvent( obj , type , fun){
            if(obj.removeEventListener){
                return obj.removeEventListener(type,fun,false);
            }else if(obj.detachEvent){
                return obj.detachEvent('on'+type, fun);
            }else{
                return obj["on"+type]=null;
            }
        }
        //remEvent( dom , 事宜范例 , 函数)

8.去除摆布空格

function trim(str){
            var reg=/^\s+|\s+$/g;//正则表达式
            return str.replace(reg,'');//替代
        }
        // console.log(trim(str));

9.转驼峰

function tf(str1){
            var reg1=/-(\w){1}/g;//正则  找-今后的第一个值
            var strn=str1.replace( reg1 , function(){//替代
                return arguments[1].toUpperCase();//将此值转为大写
            });
             return strn;
        }
        // console.log(tf(str1));

10.剖析url

(1)function jx(str2){
            var en=str2.indexOf('?');//查找?下标 纪录
            var news=str2.slice(en+1);//截取?今后的一切值
            var arr=news.split('&');//以&转数组
            var obj={}
            for(var i=0;i<arr.length;i++){//轮回遍历
                var newa=arr[i].split('=');//以=转数组
                obj[newa[0]]=newa[1];//拿值  赋值
            }
            return obj;
        }
        // console.log(jx(str2))


(2)function getUrl(url){
            var news=url.substr(1);//截取?今后的一切值
            var obj={};
            if(news){
                var arr=news.split('&');//以&转数组
                for(var i=0;i<arr.length;i++){
                    var newarr=arr[i].split('=');//以=转数组
                    obj[newarr[0]]=newarr[1];//拿值  赋值
                }
                return obj;
            }else{
                return false;
            }
        }
        //console.log(getUrl(url));

(3)function getUrl(name){

    var reg=new RegExp("(^|&)"+name+"([^&]*)($|&)");
    var arr=location.search.substr(1).match(reg);

    if(arr){
        return decodeURI(arr[2]);
    }
}
getUrl('要查询名')

11.鸠合

var $={
            //查找    找到返回下标   找不到返回-1
            hasClass:function(newo,clas){
                var arr=newo.className.split(/\s+/);//以空格转数组
                var con = -1;//赋初始值
                for(var i=0;i<arr.length;i++){//轮回遍历
                    if(arr[i]==clas){//推断是不是相称  相称即有该元素
                        con=i;//赋下标
                        break;//跳出轮回
                    }
                }
                return con;//返回值
            },
            //增加class名  如增加果本来有此名,则不增加   没有,则
            addClass:function(newo,clas){
                var arr=newo.className.split(/\s+/);//以空格转数组
                if($.hasClass(newo,clas)==-1){//推断是不是有此class名
                    arr.push(clas);//没有增加
                    newo.className=arr.join(' ');//赋给元素
                }
                return newo.className;//返回值
            },
            //删除class名  如果有此名,则删除  没有不删除
            removeClass:function(newo,clas){
                var arr=newo.className.split(/\s+/);///以空格转数组
                var con=$.hasClass(newo,clas);///推断是不是有此class名
                if(con!=-1){///如果有
                    arr.splice(con,1);///删除
                    newo.className=arr.join(' ');///赋给元素
                }
                return newo.className;///返回值
            },
            //clas名查找元素
            getClassName:function(all,clas){
                var dom=document.getElementsByTagName(all);//猎取一切元素
                var arr=[];//定义空数组
                for(var i=0;i<dom.length;i++){//轮回遍历
                    if($.hasClass(dom[i],clas)!=-1){//推断是不是有此class名
                        arr.push(dom[i]);//有增加该元素
                    }
                }
                return arr;//返回该元素
            },
            //id名查找元素
            byId:function(id){
                return typeof id==='string'?document.getElementById(id):id;
            }
        }
        //挪用$.函数名(根据所用函数传值)



    原文作者:乾坤同寿
    原文地址: https://segmentfault.com/a/1190000015815105
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞