09-jQuery操作类的相关方法：addClass、removeClass、toggleClass

最新推荐文章于 2024-09-24 11:22:03 发布

不及你笑靥如花

最新推荐文章于 2024-09-24 11:22:03 发布

阅读量100

点赞数

分类专栏： jquery 文章标签： html jquery

本文链接：https://blog.csdn.net/qq_43775721/article/details/112912673

版权

jquery 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

jQuery操作类的相关方法

1、 $(“selector”).addClass(“参数1 参数2 参数3…”);

作用：为每个匹配的元素添加指定的类名。(多个参数之间用空格隔开)

2、$(“selector”).removeClass(“参数1 参数2 参数3…”);

作用：从所有匹配的元素中删除全部或者指定的类。(多个参数之间用空格隔开)

3、$(“selector”).toggleClass(“参数1 参数2 参数3…”);（内容不全，正确请参照官网）

作用：如果存在就删除=一个类，如果不存在就添加一个类。(多个参数之间用空格隔开)

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery操作类的相关方法</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .class1 {
            width: 100px;
            height: 100px;
            background-color: #000000;
        }
        
        .class2 {
            border: 10px solid #f909f9;
        }
    </style>
    <script src="./js/jquery-1.12.4.js"></script>
    <script>
        $(function() {
            var btns = document.getElementsByTagName("button");
            btns[0].onclick = function() {
                $("div").addClass("class1 class2");
            }
            btns[1].onclick = function() {
                $("div").removeClass("class2");
            }
            btns[2].onclick = function() {
                $("div").toggleClass("class1 class2");
            }
        });
    </script>
</head>

<body>
    <button>添加类</button>
    <button>删除类</button>
    <button>切换类</button>
    <div></div>
</body>

</html>