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

最新推荐文章于 2023-02-23 15:16:00 发布

你过来啊zzz

最新推荐文章于 2023-02-23 15:16:00 发布

阅读量566

点赞数

文章标签： jquery js javascript

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

版权

jQuery操作CSS类名

添加

.addClass( className ，func（index，currentClass）)

谁调用就为谁添加一个类型，就是相当于标签里的class名

className：为元素将要条件的类型（这个可以选择不写）
回调函数（这个可以选择不写，想要给多个元素添加的话才用）
- index：多个元素中每个元素的索引
- currentClass：为这个对象原先的class属性值

效果如下：

<body>
    <p>我是1</p>
    <p>我是2</p>
    <p>我是3</p>
    <p>我是4</p>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script>
    $(function () {
        $('p').addClass('PPP')
    })
</script>

在这里插入图片描述

其中如果想要给一个元素添加多个类名的话有两种写法：

第一种：效果如下，此时p标签的类型为PPP和AAA

<body>
    <p>我是1</p>
    <p>我是2</p>
    <p>我是3</p>
    <p>我是4</p>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script>
    $(function () {
        $('p').addClass('PPP AAA')
    })
</script>

在这里插入图片描述

第二种：效果如下

<body>
    <p>我是1</p>
    <p>我是2</p>
    <p>我是3</p>
    <p>我是4</p>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script>
    $(function () {
        $('p').addClass('PPP').addClass('AAA')
    })
</script>

在这里插入图片描述

回调函数中的参数：

我们可以根据原来的类名做一系列操作，这里只是简单的演示一下：

<body>
    <p>我是1</p>
    <p>我是2</p>
    <p>我是3</p>
    <p class="red">我是4</p>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script>
    $(function () {
        $('p').addClass(function (index, currentClass) {
            if (currentClass == "red") {
                console.log("我叫" + currentClass + "  我是第" + index + "个")
            }
            console.log(index)
        })
    })
</script>

在这里插入图片描述

删除

.remove([selector ])

将匹配的元素从DOM中删除，包括绑定的事件等等

这个函数只有一个参数：

selector ：要删除的元素必须符合这个参数的选择器表达式才能删除，起限制作业，可以不写

不写的时候：

<body>
    <p>我是1</p>
    <p>我是2</p>
    <p>我是3</p>
    <p class="red">我是4</p>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script>
    $(function () {
        $('p').remove()
    })
</script>

在这里插入图片描述

写参数的时候：此时只是删除了符合条件 '.red'即类名为red的元素P

<body>
    <p>我是1</p>
    <p>我是2</p>
    <p>我是3</p>
    <p class="red">我是4</p>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script>
    $(function () {
        $('p').remove('.red')
    })
</script>

在这里插入图片描述

光删除remove这类的函数有好几个，下篇补上

你过来啊zzz

关注

0
点赞
踩
0

收藏

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

jQuery操作CSS类名添加.addClass( className ，func（index，currentClass）)谁调用就为谁添加一个类型，就是相当于标签里的class名className：为元素将要条件的类型（这个可以选择不写）回调函数（这个可以选择不写，想要给多个元素添加的话才用）index：多个元素中每个元素的索引currentClass：为这个对象原先的class属性值效果如下：<body> <p>我是1</p>
复制链接

扫一扫