zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    php filter 安全过滤函数
    python常用快捷键
    【python】详解time模块功能asctime、localtime、mktime、sleep、strptime、strftime、time等函数以及时间的加减运算
    linux VIM基本命令
    vim常用命令总结 (转)
    sklearn中的交叉验证(Cross-Validation)
    scikit-learn 0.18中的cross_validation模块被移除
    python logging模块
    随机森林参数理解与调优
    kaggle 欺诈信用卡预测——Smote+LR
  • 原文地址:https://www.cnblogs.com/jane-panyiyun/p/12200117.html
Copyright © 2011-2022 走看看