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

  • 相关阅读:
    windows server 2003打补丁升级后,网站上的aspx页面打不开的解决办法
    为什么IM还有生存空间
    CTO俱乐部深圳:移动互联网发展与趋势 活动分享
    为word文档创建文档结构图的的步骤
    面试官面试总结
    dll与exe通信的VC++程序实例源码
    openfire的集群研究
    如何有效地记忆与学习
    How The Kernel Manages Your Memory
    C语言循环小技巧
  • 原文地址:https://www.cnblogs.com/yonglin/p/7895918.html
Copyright © 2011-2022 走看看