zoukankan      html  css  js  c++  java
  • JQeury添加和删除class内部实现代码(简化版)

         下面是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(/[	
    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(/[	
    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属性。

  • 相关阅读:
    机器学习第二章复习
    机器学习第三章复习
    机器学习第四章复习
    第一次作业
    第二次作业
    第06组 Beta版本演示
    第06组 Beta冲刺(4/4)
    第06组 Beta冲刺(3/4)
    第06组 Beta冲刺(2/4)
    第06组 Beta冲刺(1/4)
  • 原文地址:https://www.cnblogs.com/yonglin/p/7895918.html
Copyright © 2011-2022 走看看