jQuery的class操作-CSDN博客

本文链接：https://blog.csdn.net/DcTbnk/article/details/105778666

    <style>
        .div1{
            color: red;
        }
        .div2{
            background: blue;
        }
        .div3{
            font-size: 40px;
        }


    </style>
</head>
<body>
    <div>我是div</div>

    <script src="./jquery.min.js"></script>
    <script>
        // 操作标签class属性的属性值
        // 只是操作属性值,css样式,该怎么执行,就按照css的优先级权重来执行

        // 1,新增class属性的属性值
        // 是在原有属性值的基础上,新增新的属性值,原有的属性值会保留

        // 新增div1属性值
        $('div').addClass('div1');
        // 在原有div1的基础上,再新增一个div2,div1仍然保留
        $('div').addClass('div2');
        // 在之前的属性值上在新增一个div3
        $('div').addClass('div3');

        // 2,删除class属性的属性值
        // 只删除指定的class属性值,其他的仍然保留
        $('div').removeClass('div2');
        

        // 3,对应容器如果有此class样式,就删除,如果没有就新增
        // 如果删除了div2,没有div2,就是新增div2属性值
        $('div').toggleClass('div2');

        // 4,判断是否有这个class属性值
        // 执行结果是 布尔类型, 有--true   没有--false
        console.log( $('div').hasClass('div2') );

        // 4,新增多个,删除多个

        // 新增多个,与给class 写多个属性值,语法形同
        $('div').addClass('div1 div2 div3');

        // 删除多个
        // 将需要删除的多个class属性,定义在字符串中,以空格间隔
        // 删除div1和div2   顺序无所谓
        $('div').removeClass('div2 div1');
        $('div').removeClass('div1 div2');
        // 删除div1和div3
        $('div').removeClass('div1 div3');

    </script>