jQuery的class操作/一些方法




DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>标题title>
    <style>
        div {
            width: 100px;
            height: 100px;
            margin-top:10px;
        }
        .bgc {
            background-color: green;
        }
        .fontSize30 {
            font-size: 30px;
        }
        .width200 {
            width: 200px;
        }

    style>
head>
<body>
<input type="button" value="添加类" id="addClass"/>
<input type="button" value="移除类" id="removeClass"/>
<input type="button" value="判断类" id="hasClass"/>
<input type="button" value="切换类" id="toggleClass"/>
<div id="div1" class="bgc ">div1div>
body>
html>

<script src="jquery-1.12.4.js">script>
<script>
    $(function () {
        //1.添加类 addClass(类名);
        $('#addClass').click(function () {
            // 1.1. 给 id 为 div1 的元素 添加类
            // 添加 单个类
            // $('#div1').addClass('fontSize30');

            // 1.2. 添加 多个类
            $('#div1').addClass('fontSize30 width200');
        });

        //2.移除类
        $('#removeClass').click(function () {
            // 2.1.给 id为 div1的元素 移除类
            // $('#div1').removeClass('fontSize30');
            // 移除多个类
            // $('#div1').removeClass('fontSize30 width200');

            // 不写参数, class值, 全部移除
            $('#div1').removeClass();
        });

        //3.判断类
        $('#hasClass').click(function () {
            console.log($('#div1').hasClass("bgc"));
            console.log($('#div1').hasClass("fontSize30"));
            console.log($('#div1').hasClass("width200"));
        });


        //4.切换类
        $('#toggleClass').click(function () {
            // 如果元素 有某个类, 就移除这个类, 如果元素没有这个类, 就添加这个类
            $('#div1').toggleClass("fontSize30");
        });

    });
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

相关阅读:
js对象转json文件
从 Docker Hub 拉取镜像受阻？这些解决方案帮你轻松应对
10月9日，每日信息差
linux内核启动阶段对设备树的解析
ACM学习书籍简介
项目（智慧教室）第四部分，页面交互功能，WebServer建立与使用，
AI办公自动化：用kimi批量提取音频中的标题并重命名
2022.11.4 英语背诵
display:table 和 grid
动态获取权限，文件管理器选择文件，I/O流

原文地址：https://blog.csdn.net/beyondx/article/details/126102712