码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-11-25 18:25:37      阅读:124      评论:0      收藏:0      [点我收藏+]

标签:叠加   indexof   元素   sse   rem   dex   val   样式   空格   

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

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

标签:叠加   indexof   元素   sse   rem   dex   val   样式   空格   

原文地址:http://www.cnblogs.com/yonglin/p/7895918.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!