<jQuery> 九. Class操作

本文隶属于分类

Web开发

广告推荐

技术交流学习或者有任何问题欢迎加群

编程技术交流群 : 154514123 爱上编程      Java技术交流群 : 6128790  Java

标签:hasclass   添加   head   size   utf-8   post   big   一个   htm   

<!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>

 

<jQuery> 九. Class操作

标签:hasclass   添加   head   size   utf-8   post   big   一个   htm   

原文:https://www.cnblogs.com/ZeroHour/p/8267292.html

技术交流学习或者有任何问题欢迎加群

编程技术交流群 : 154514123 爱上编程      Java技术交流群 : 6128790  Java

广告推荐

讨论区