07-jQuery-Class 操作

秒速五厘米 2022-12-08 12:50 249阅读 0赞

# Class 操作 #

作者：曾庆林

### addClass() 添加class ###

$(elem).addClass("active");
    //注意class active 前面没有加点

### removeClass() 删除class ###

<h1 class="active header"></h1>
    <script> $(function({ $("h1").removeClass("active"); // 这样只会删除 active class $("h1").removeClass(); // 这样会删除掉h1的所有class })) </script>

### toggleClass() 切换class ###

example：单击添加切换高亮显示

### hasClass ###

hasClass() 检查是否有某个class名 返回true/false

//判断类
     $("input").click(function () {  
       //有没有某个类样式
       console.log($("li").hasClass("bigger"));;
     });

### 修改一个class类 ###

方法一

//先删除，后添加。或者先添加后删除均可
    
    $(".aaa").addClass("bbb").removeClass("aaa");
    
    $(".aaa").removeClass("aaa").addClass("bbb");

方法二

//利用attr方法
    
    $(".aaa").attr("class","bbb");
    
    //这里需要注意的是，如果这个HTML标签不止有aaa这一个类时，
    
    //这个方法之后，这个HTML标签会只有bbb这一个class类,

当然也可以设置多个

$(".aaa").attr("class","bbb ccc ddd");

### 实例 ###

//实现一个hover功能，鼠标上去为aaa，离开为bbb

$(".app").hover(function () { 
    
        $(this).addClass("aaa");
    
        $(this).removeClass("bbb");
    
    }, function () { 
    
        $(this).addClass("bbb");
    
        $(this).removeClass("aaa");
    
    });

![IT入门 感谢关注][IT_]

IT入门 感谢关注

练习地址： [www.520mg.com/it][www.520mg.com_it]

[IT_]: /images/20221123/b4176284104749cfabeb159ab6ad8f43.png
[www.520mg.com_it]: http://www.520mg.com/it