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属性。

  • 相关阅读:
    CAN总线布线规范
    使用make_ext4fs时报错,No such file or directory
    安装arm-2009q3交叉编译器后,执行No such file....
    Busybox下make menconfig报错处理!
    解决Markdown转为PDF后,尖括号不能正确显示问题。
    开发板与PC直连 交叉、直连网线做法
    BusyBox tftp使用
    STM32的flash数据页转存过程分析!
    c语言中log函数的使用!
    POJ 3667 Hotel
  • 原文地址:https://www.cnblogs.com/yonglin/p/7895918.html
Copyright © 2011-2022 走看看