小微型庫(5.類名新增addClass和移除removeClass,判斷有無類名hanClass及toggle功能)

liangsheng0111發表於2018-11-09
REM

類名的新增addClass

//測試
//html文件中
    <div class="box4 box1">1111</div>
    <div class=" box2 box3 ">2222</div>
//script中
    $("div").addClass("box1 box2 box3 box4");
複製程式碼

類名的移出removeClass

//測試
//html文件中
    <div class="box1 box2 box3 box4 box5">1111</div>
    <div class=" box1 box1 box2 box2 box3 ">2222</div>
//script中
$("div").addClass("box1 box2");
複製程式碼
//在原型上繼續新增
Liang.prototype = {
    constructor : Liang,
    init : function(){}, //(1)
    html : function(){}, //(2)
    on : function(){}, //(3)
    off : function(){}, //(3)
    text : function(){}, //(4)
    val : function(){}, //(4)
    eq :  function(){}, //(4)
    //類名新增addClass
    addClass : function(cName){
        if(typeof cName === "string"){ 
            //要新增的類名的陣列
            var arrCName = cName.trim().split(/\s+/); 
            if( arrCName.toString() === "") return this; //說明輸入的是空字串
            Liang.each(this, function(v){
                //得到類名集合的陣列,並與新增的類名陣列拼接
                var arrEleClass = v.className.trim().split(/\s+/).concat(arrCName);
                //取出
                for(var i = 0; i < arrEleClass.length; i++){
                    for(var j = arrEleClass.length - 1; j > i; j--){
                        if(arrEleClass[i] === arrEleClass[j]){
                          arrEleClass.splice(j, 1);
                        }
                    }
                }
                v.className = arrEleClass.join(" ");
            });
        }
        return this;
    },
    //類名移出removeClass
    removeClass : function(cName){
        //如果不寫,表示移出全部 $("div").removeClass()
        if(typeof cName === "undefined"){
            Liang.each(this, function(v){
                v.className = "";
            });
            return this;
        }else if(typeof cName === "string"){
            //要移出的類名陣列
            var arrCName = cName.trim().split(/\s+/);
            if(arrCName.toString() === "") return;
            //移出對應的類名
            Liang.each(this, function(v){
                //元素自身已經存在的類名
                var arrEleClass = v.className.trim().split(/\s+/);
                for(var i = 0, len = arrCName.length; i < len; i++){
                    //對元素本身已經存在的類名陣列遍歷,刪除符合條件的類名
                    for(var j = arrEleClass.length - 1; j >= 0; j--){
                        if(arrCName[i] === arrEleClass[j]){
                            arrEleClass.splice(j, 1);
                        }
                    }
                }
                v.className = arrEleClass.join(" ");
            });
        }
        return this;
    },
    //判斷類名是否存在,返回布林值
    hasClass : function(cName){
        var isClass = false;
        Liang.each(this,function(v){
            cName = cName.trim();
            var reg = new RegExp("\\b" + cName + "\\b");
            if(reg.test(v.className)){
                isClass = true; //有類名,設定為true
                return false; //結束當前的遍歷
            }
        });
        return isClass; //返回布林值確定有無類名
    },
    //判斷類名是否存在,存在就刪除,不存在就新增
    toggleClass : function(cName){
        Liang.each(this, function(v){
            var that = Liang(v); //將單個節點物件包裝成jq物件
            if(that.hasClass(cName)){ //有類名,刪除
                that.removeClass(cName);
            }else{ //無類名,新增
                that.addClass(cName);
            }
        });
    },
    //利用靜態方法each實現
    each :function(fn){
        Liang.each(this, function(v, i, arr){
            var bool = fn.call(v, v, i, arr);
            if(bool !== "undefined"){
                return;
            }
        });
    }
}
複製程式碼

相關文章