<jQuery> 九. Class操作 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .basic {
            background-color: pink;
            color: red;
            font-size: 33px;
        }
        .bigger {
            font-size: 66px;
        }
    </style>
</head>
<body>
<input type="button" value="添加basic类">
<input type="button" value="添加bigger类">
<input type="button" value="移除basic类">
<input type="button" value="移除bigger类">
<input type="button" value="切换类">
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<script src="jquery-3.2.1.js"></script>
<script>
    $(function () {

        // 添加一个类
        $("input").eq(0).click(function () {
            $("ul>li").addClass("basic");
        });
        $("input").eq(1).click(function () {
            $("ul>li").addClass("bigger");
        });

        // 移除一个类
        $("input").eq(2).click(function () {
            $("ul>li").removeClass("basic");
        });

        // 移除一个类
        $("input").eq(3).click(function () {
            $("ul>li").removeClass("bigger");
        });

        // 判断类, 切换类
        $("input").eq(4).click(function () {
            // if ($("ul>li").hasClass("basic")) {
            //     $("ul>li").removeClass("basic");
            // } else {
            //     $("ul>li").addClass("basic");
            // }
            $("ul>li").toggleClass("basic");
        });
    });
</script>
</body>
</html>

 

posted @ 2018-01-11 10:43  云淡风轻我爱编程  阅读(172)  评论(0)    收藏  举报