简单的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;
            }
        }
        //调用$.函数名(按照所用函数传值)



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值