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

類名的添加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;
            }
        });
    }
}
複製代碼