簡單的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){css

//標準下
    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){node

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;
            }
        }
        //調用$.函數名(按照所用函數傳值)
相關文章
相關標籤/搜索