jquery修改class样式

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

1、.addClass()方法:为指定的元素添加一个或多个class,如果元素已经具有这些class,则不会重复添加。

语法:

$(selector).addClass(className);

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery addClass示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .highlight {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="box">原始盒子</div>
    <button id="btn">添加高亮</button>
    <script>
        $(document).ready(function(){
            $("#btn").click(function(){
                $(".box").addClass("highlight");
            });
        });
    </script>
</body>
</html>

在这个示例中,当点击id为"btn"的按钮时,会为class为"box"的元素添加一个名为"highlight"的class,使其背景变为黄色。

2、.removeClass()方法:从指定的元素中删除一个或多个class,如果元素没有这些class,则不会执行任何操作。

语法:

$(selector).removeClass(className);

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery removeClass示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .highlight {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="box highlight">带有高亮效果的盒子</div>
    <button id="btn">移除高亮</button>
    <script>
        $(document).ready(function(){
            $("#btn").click(function(){
                $(".box").removeClass("highlight");
            });
        });
    </script>
</body>
</html>

在这个示例中,当点击id为"btn"的按钮时,会为class为"box"的元素删除一个名为"highlight"的class,使其背景恢复原状。

jquery修改class样式

3、.toggleClass()方法:在指定的元素上切换一个或多个class,如果元素已经具有这些class,则删除它们;如果没有,则添加它们。

jquery修改class样式

语法:

$(selector).toggleClass(className);

jquery修改class样式

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery toggleClass示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .highlight {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="box">原始盒子</div>
    <button id="btn">切换高亮</button>
    <script>
        $(document).ready(function(){
            $("#btn").click(function(){
                $(".box").toggleClass("highlight");
            });
        });
    </script>
</body>
</html>

jquery修改class样式

在这个示例中,当点击id为"btn"的按钮时,会为class为"box"的元素切换一个名为"highlight"的class,使其背景在黄色和原始颜色之间切换。

内容声明:本文中引用的各种信息及资料(包括但不限于文字、数据、图表及超链接等)均来源于该信息及资料的相关主体(包括但不限于公司、媒体、协会等机构》的官方网站或公开发表的信息,内容仅供参考使用!本站为非盈利性质站点,本着免费分享原则,发布内容不收取任何费用也不接任何广告! 【若侵害到您的利益,请联系我们删除处理。投诉邮箱:i77i88@88.com】

本文链接:http://7707.net/jquery/202401165243.html

发表评论

提交评论

评论列表

还没有评论,快来说点什么吧~