07-jQuery-Class operation

Class operation

Author: Zeng Qinglin

addClass() add class

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

removeClass() delete class

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

toggleClass() switch class

example: Click Add to toggle highlighting

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

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

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

hasClass

hasClass() checks whether a certain class name returns true/false

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

Modify a class

method one

//先删除，后添加。或者先添加后删除均可

$(".aaa").addClass("bbb").removeClass("aaa");

$(".aaa").removeClass("aaa").addClass("bbb");

Method Two

//利用attr方法

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

//这里需要注意的是，如果这个HTML标签不止有aaa这一个类时，

//这个方法之后，这个HTML标签会只有bbb这一个class类,

Of course you can also set multiple

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

Instance

//Implement a hover function, the mouse up is aaa, and the left is bbb

$(".app").hover(function () {
    
    

    $(this).addClass("aaa");

    $(this).removeClass("bbb");

}, function () {
    
    

    $(this).addClass("bbb");

    $(this).removeClass("aaa");

}); 

IT Getting Started Thank attention

Practice address: www.520mg.com/it