JQeury添加和删除class内部实现代码（简化版）

Posted 2020-10-15 三十亿少女的梦

     下面是JQuery对元素class操作的简单实现，请看代码：

 

添加class：

    //增加class
    function addClass(elem,value) {   

        var classes, cur, clazz, j, finalValue
        // 如果参数是多个样式设置"a b c"按照\/S+\g空格分割
        classes = (value || "").match(/\S+/g) || [];

        //如果是元素节点，并且有class属性
        //拼接成 " a b c "形式，加上前后空格
        cur = elem.nodeType === 1 && (elem.className ?
            (" " + elem.className + " ").replace(/[\t\r\n\f]/g, " ") :
            " "
        );

        //如果存在样式
        if (cur) {
            j = 0;
            while ((clazz = classes[j++])) {
                //查找下是否不是有重复的，没有就叠加
                if (cur.indexOf(" " + clazz + " ") < 0) {
                    cur += clazz + " ";
                }
            }

            // 去掉前后的空格
            finalValue = jQuery.trim(cur);

            if (elem.className !== finalValue) {
                //赋值
                elem.className = finalValue;
            }
        }
    }

 

移除class：

    //移除样式 
    function removeClass(elem, value) {

        var classes, cur, clazz, j, finalValue
            // 如果参数是多个样式设置"a b c"按照\/S+\g空格分割
        classes = (value || "").match(/\S+/g) || [];

        //如果是元素节点，并且有class属性
        //拼接成 " a b c "形式，加上前后空格
        cur = elem.nodeType === 1 && (elem.className ?
            (" " + elem.className + " ").replace(/[\t\r\n\f]/g, " ") :
            " "
        );

        //如果存在样式
        if (cur) {
            j = 0;
            while ((clazz = classes[j++])) {
                //与addClass的区别在这里
                while (cur.indexOf(" " + clazz + " ") >= 0) {
                    cur = cur.replace(" " + clazz + " ", " ");
                }
            }

            // 去掉前后的空格
            finalValue = jQuery.trim(cur);

            if (elem.className !== finalValue) {
                //赋值
                elem.className = finalValue;
            }
        }
    }

 

其实原理就是通过元素原生className属性获得元素class值（一串字符），然后对这串字符进行各种奇淫技巧拼接，最后再赋值到元素的className属性。