jQuery操作CSS类名之添加和删除(2)

最新推荐文章于 2022-12-30 10:33:02 发布

你过来啊zzz

最新推荐文章于 2022-12-30 10:33:02 发布

阅读量1k

点赞数

文章标签： jquery js javascript

本文链接：https://blog.csdn.net/Depressione/article/details/108743477

版权

删除

上次说的删除元素是.remove([selector ])，还有另外一个函数和它很像的函数，不过这个函数只能删除函数的样式

removeClass([class|fn])

参数：

class：将要被删除的元素名的样式名
回调函数fn(index,class)
- index：表示在所有匹配元素的集合中当前元素的索引
- class：表示原有的样式名

当参数什么都不写时：效果如下，此时只是删除类的类名

<body>
    <p class="PP">我是P1</p>
    <p class="PP">我是P2</p>
    <p class="PP">我是P3</p>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script>
    $(function () {
        $('.PP').removeClass()
    })
</script>

在这里插入图片描述

当填写要删除的类名参数时：效果如下，此时删除的知识符合条件的类名

<body>
    <p class="PP">我是P1</p>
    <p class="PP AA">我是P2</p>
    <p class="PP">我是P3</p>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script>
    $(function () {
        $('.PP').removeClass('PP')
    })
</script>

在这里插入图片描述

当写上回调函数时，就可以通过回调函数做些操作，效果如下：

<body>
    <p class="PP">我是P1</p>
    <p class="PP AA">我是P2</p>
    <p class="PP">我是P3</p>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script>
    $(function () {
        $('.PP').removeClass(function (index, Pclass) {
            console.log(index, Pclass)
        })
    })
</script>

在这里插入图片描述

前面的选择器拿到了几个div的集合,index就是当前div的索引，className是当前div的类名，然后removeClass里面的函数是返回一个你要删除的类名和其他的操作,addClass也是一样，可以用于批量的增加和删除同样的样式

切换类名

下面这个切换类名也可以做到给一个匹配的元素添加类名或删除类名

.toggleClass(class|fn[,sw])

class：要添加或者删除css类名；某个元素如果有这个类名就是被删除，如果没有这个类名就是被添加
sw：用于决定元素是否包含class的布尔值
回调函数fn(index,class):
- index:匹配的元素集合中的每个元素上的索引值
- class：原先自身的类名

当只写class时为最简单的切换类名，效果如下：

    <style>
        div {
            width: 100px;
            height: 50px;
            background: lightpink;
        }
    </style>
</head>

<body>
    <div class="box"> </div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script>
    $(function () {
        $('.box').click(function () {
            $(this).toggleClass('div')
        })
    })
</script>

在这里插入图片描述

此时当点击div时，由于div此前没有.div这个类名，所以这步操作给它添加了一个叫div的类名，当再次点击的时候，此时div有这个类名，所以第二次点击时，是删除操作

当第二个sw参数写的时候，第二个参数判断样式类是否应该被添加或删除。如果这个参数的值是true，那么这个样式类将被添加;如果这个参数的值是false，那么这个样式类将被移除，效果如下：

    <style>
        div {
            width: 100px;
            height: 50px;
            background: lightpink;
        }
    </style>
</head>

<body>
    <div class="box"> </div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script>
    $(function () {
        $('.box').click(function () {
            $(this).toggleClass('div', true)
        })
    })
</script>

在这里插入图片描述

此时效果和上面唯一的区别为，当第二次点击时，删除操作不实现了，这是因为sw参数写了true的原因，那么这个样式类将被添加

当写回调函数时：效果如下

    <style>
        div {
            width: 100px;
            height: 50px;
            background: lightpink;
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <div class="box1 box"> </div>
    <div class="box2 box"> </div>
    <div class="box3 box"> </div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script>
    $(function () {
        $('.box').click(function () {
            $(this).toggleClass(function (index, pclass) {
                console.log($(this)[index], pclass)
            })
        })
    })
</script>

在这里插入图片描述

图上效果为每个div轮流点两次，可以看到效果为每次切换div的类名

你过来啊zzz

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery操作CSS类名之添加和删除(2)

删除上次说的删除元素是.remove([selector ])，还有另外一个函数和它很像的函数，不过这个函数只能删除函数的样式removeClass([class|fn])参数：class：将要被删除的元素名的样式名回调函数fn(index,class)index：表示在所有匹配元素的集合中当前元素的索引class：表示原有的样式名当参数什么都不写时：效果如下，此时只是删除类的类名<body> <p class="PP">我是P1</p&
复制链接

扫一扫