实现jquery 的 removeClass 方法

最新推荐文章于 2023-07-23 09:01:22 发布

依然c

最新推荐文章于 2023-07-23 09:01:22 发布

阅读量1.3k

点赞数

分类专栏：前端文章标签： jquery remove className

本文链接：https://blog.csdn.net/chentianfu13/article/details/72886743

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

第一种纯数组操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>removeclass</title>
</head>
<body>
    <div class="demo test hi"></div>
    <button onclick="removeClass()">Go</button>

    <script>
        let demo = document.querySelectorAll(".demo")

        function removeClass() {
            let start = new Date().getTime()
            // 删除test的class名
            let classArr = []
            for(let i = 0, l = demo.length; i < l; i++) {
                demo[i].className.split(' ').map(function(val) {
                    if(val !== 'test') {
                        classArr.push(val)
                    }
                })
                demo[i].className = classArr.join(' ')
                classArr = []
            }
            let end = new Date().getTime()
            console.log(end - start)
        }
    </script>
</body>
</html>

这里的思路是获取dom的className，然后转化为array操作再将结果转化为str赋值给className

第二种正则匹配

function removeClass() {
    let start = new Date().getTime()
    // 删除test的class名
    let classArr = []
    for(let i = 0, l = demo.length; i < l; i++) {
        demo[i].className.replace('test', '').split(/\s+/g).map(function(val) {
            if(val !== 'test') {
                classArr.push(val)
            }
        })
        demo[i].className = classArr.join(' ')
        classArr = []
    }
    let end = new Date().getTime()
    console.log(end - start)
}

这里的思路与上面差不多，不过是用正则去判断要除去的className

效率

即使在操作的dom长度增加到300，两者的耗时也几乎不差。所以两者效率是一样的

依然c

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实现jquery 的 removeClass 方法

第一种纯数组操作<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>removeclass</title></head><body> <div class="demo test hi"></div> <button onclick="removeClass()">Go</bu
复制链接

扫一扫