【jQuery笔记Part1】07-jQuery操作css-添加&删除&切换类、开关灯泡案例-CSDN博客

本文链接：https://blog.csdn.net/weixin_43734095/article/details/100055406

jQuery操作css-添加&删除&切换类

addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
开关灯案例

jQuery笔记目录

jQuery 可以操作 css 样式，常见的有以下三种方法：

addClass() - 向被选元素添加一个或多个类

$('div').addClass('selected')

removeClass() - 从被选元素删除一个或多个类

$('div').removeClass('selected')

toggleClass() - 对被选元素进行添加/删除类的切换操作

 // 自动开关
$('div').toggleClass('selected')

开关灯案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 270px;
            height: 340px;
            background: url("https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2927675789,1518850734&fm=26&gp=0.jpg");
            /*以下代码使得图片完全显示*/
            -webkit-background-size: cover;
            background-size: cover;
        }
        .selected{
            background: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.51yuansu.com%2Fpic3%2Fcover%2F03%2F52%2F80%2F5bc121f95697b_610.jpg&refer=http%3A%2F%2Fpic.51yuansu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1616393483&t=d013fab851caf5d28f8e155480a46e31");
            -webkit-background-size: cover;
            background-size: cover;
        }
    </style>
</head>
<body>
    <div></div>
    <p></p>
    <p></p>
    <button id="on">开灯</button>
    <button id="off">关灯</button>
    <button id="auto">自动开关</button>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(function () {
        // 开灯
        $('#on').click(function () {
            $('div').addClass('selected')
        })
        // 关灯
        $('#off').click(function () {
            $('div').removeClass('selected')
        })
        // 自动开关
        $('#auto').click(function () {
            $('div').toggleClass('selected')
        })
    });
</script>
</body>
</html>