jQuery---Class操作

Class操作

 

添加一个类样式

      // 添加一个类
      $("li").addClass("basic");
    });
    $("input").eq(1).click(function () {
      $("li").addClass("bigger");
    });

 

移除一个类样式

      //移除一个类
      $("li").removeClass("bigger");
    });

 

判断类，有没有某个类样式

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

 

切换类（判断有没有某个类，有就移除，没有就添加）

    $("input").eq(4).click(function () {
    
      //判断li有没有basic类，如果有，就移除他，如果没有，添加他
      //toggle
      $("li").toggleClass("basic");
    });

 

 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    li.basic {
      background-color: pink;
      font-size: 32px;
      color: red;
    }
    
    .bigger {
      font-size: 40px;
    }
  </style>
</head>
<body>
<input type="button" value="添加basic类" >
<input type="button" value="添加bigger类">
<input type="button" value="移除bigger类">
<input type="button" value="判断bigger类">
<input type="button" value="切换类">
<ul>
  <li class="aa bb cc dd">1</li>
  <li class="aa bb cc dd">2</li>
  <li class="aa bb cc dd">3</li>
  <li class="aa bb cc dd">4</li>
</ul>


<script src="jquery-1.12.4.js"></script>
<script>
  $(function () {
    
    $("input").eq(0).click(function () {
      
      // 添加一个类
      $("li").addClass("basic");
    });
  
    $("input").eq(1).click(function () {
      $("li").addClass("bigger");
    });
    
    
    $("input").eq(2).click(function () {
      
      //移除一个类
      $("li").removeClass("bigger");
    });
    
    //判断类
    $("input").eq(3).click(function () {
    
      //有没有某个类样式
      console.log($("li").hasClass("bigger"));;
    });
  
  
    $("input").eq(4).click(function () {
    
      //判断li有没有basic类，如果有，就移除他，如果没有，添加他
      //toggle
      $("li").toggleClass("basic");
    });
  });
</script>
</body>
</html>
posted @ 2020-01-16 10:57  jane_panyiyun  阅读(204)  评论(2)  编辑  收藏  举报