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>Titletitle>
  <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">1li>
  <li class="aa bb cc dd">2li>
  <li class="aa bb cc dd">3li>
  <li class="aa bb cc dd">4li>
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>

你可能感兴趣的:(jQuery---Class操作)