小微型库(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;
            }
        });
    }
}
复制代码

转载于:https://juejin.im/post/5be126f8518825514e2d3886