jquery怎么修改class

jQuery是一个快速、简洁的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互等操作，在jQuery中，我们可以使用addClass()、removeClass()和toggleClass()方法来修改元素的class。

（图片来源网络，侵删）

1、addClass()方法：为元素添加一个或多个class。

语法：

$(selector).addClass(className);

参数：

selector：选择器，用于选取需要修改class的元素。

className：要添加的class名称，可以是一个或多个，用空格分隔。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>jQuery addClass 示例</title>
    <script src="https://code.jquery.com/jquery3.6.0.min.js"></script>
    <style>
        .red { color: red; }
        .blue { color: blue; }
    </style>
</head>
<body>
    <h1 class="red">Hello World!</h1>
    <button id="changeColor">改变颜色</button>
    <script>
        $(document).ready(function(){
            $("#changeColor").click(function(){
                $("h1").addClass("blue");
            });
        });
    </script>
</body>
</html>

在这个示例中，我们为一个带有红色字体的标题添加了一个蓝色字体的class，当用户点击“改变颜色”按钮时，标题的颜色将变为蓝色。

2、removeClass()方法：从元素中删除一个或多个class。

语法：

$(selector).removeClass(className);

参数：

selector：选择器，用于选取需要修改class的元素。

className：要删除的class名称，可以是一个或多个，用空格分隔。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>jQuery removeClass 示例</title>
    <script src="https://code.jquery.com/jquery3.6.0.min.js"></script>
    <style>
        .red { color: red; }
        .blue { color: blue; }
    </style>
</head>
<body>
    <h1 class="red blue">Hello World!</h1>
    <button id="changeColor">改变颜色</button>
    <button id="removeColor">移除颜色</button>
    <script>
        $(document).ready(function(){
            $("#changeColor").click(function(){
                $("h1").addClass("blue");
            });
            $("#removeColor").click(function(){
                $("h1").removeClass("blue");
            });
        });
    </script>
</body>
</html>

在这个示例中，我们为一个带有红色和蓝色字体的标题添加了一个蓝色字体的class，当用户点击“改变颜色”按钮时，标题的颜色将变为蓝色，当用户点击“移除颜色”按钮时，标题的颜色将恢复为红色。

3、toggleClass()方法：切换元素的class，如果元素已经具有指定的class，则删除它；如果元素没有指定的class，则添加它。

语法：

$(selector).toggleClass(className);

参数：

selector：选择器，用于选取需要修改class的元素。

className：要切换的class名称，可以是一个或多个，用空格分隔。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>jQuery toggleClass 示例</title>
    <script src="https://code.jquery.com/jquery3.6.0.min.js"></script>
    <style>
        .red { color: red; }
        .blue { color: blue; }
    </style>
</head>
<body>
    <h1 class="red blue">Hello World!</h1>
    <button id="toggleColor">切换颜色</button>
</body>
</html>

在这个示例中，我们为一个带有红色和蓝色字体的标题添加了一个蓝色字体的class，当用户点击“切换颜色”按钮时，标题的颜色将在红色和蓝色之间切换。

原创文章，作者：酷盾叔，如若转载，请注明出处：https://www.kdun.com/ask/370499.html