07-jQuery-Class 操作

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：单击添加切换高亮显示

<style>
    .active{ color:red;}
</style>

<h1 class="active header"></h1>

<script>
$(function({
    $("h1").click(function(){
         $("h1").toggleClass("active");
     })
    
}))
</script>

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入门 感谢关注