• <nav id="dstbx"></nav>

    <nav id="dstbx"></nav>
    1. <form id="dstbx"></form>
    2. <small id="dstbx"></small>

      教育行業A股IPO第一股(股票代碼 003032)

      全國咨詢/投訴熱線:400-618-4000

      什么是類操作?jQuery通過類名操作樣式

      更新時間:2021年07月14日14時42分 來源:傳智教育 瀏覽次數:

      類操作就是通過操作元素的類名進行元素樣式操作,當元素樣式比較復雜時,如果通過css()方法實現,需要在CSS里編寫很長的代碼,既不美觀也不方便。而通過寫一個類名,把類名加上或去掉就會顯得很方便。下面通過代碼演示類的添加、刪除和切換。

      1. 準備工作

      先準備一個HTML網頁,然后用jQuery代碼對網頁進行操作。HTML代碼如下。

         <style>
          .current { background-color: red; }
         </style>
         <div>添加類名</div>
         <div class="current">刪除類名</div>
         <div class="current">切換類名</div>

      上述代碼中,第2行定義current類的樣式為背景色為紅色,第5行和第6行定義了兩個類名為current的div元素。

      2. addClass()添加類

      addClass()方法向被選元素添加一個或多個類名,基本語法如下所示。

      $(selector).addClass(className)

      上述代碼中,className表示要添加的類名,示例代碼如下

         <script>
          $("div").click(function() {
           $(this).addClass("current");
          });
         </script>

      上述代碼執行后,單擊頁面中的“添加類名”按鈕,就會在div元素上添加current類名,背景色修改為紅色。

      如果添加多個類,使用空格分隔類名,示例代碼如下。

      $(this).addClass("current current1 …");


      3. removeClass()移除類

      removeClass()方法從被選元素移除一個或多個類,基本語法如下所示。

      $(selector).removeClass(className)

      上述代碼中, className參數可以傳入一個或多個類名,使用空格來分隔,如果省略該參數,表示移除所有的類名。下面通過代碼演示。

         <script>
          $("div").click(function() {
            $(this).removeClass("current");
          });
         </script>

      上述代碼執行后,單擊頁面中的“刪除類名”按鈕,在div元素上的current類名會被移除,背景色消失。

      4. toggleClass()切換類

      toggleClass()方法用來為元素添加或移除某個類,如果類不存在,就添加該類,如果類存在,就移除該類?;菊Z法如下所示。

      $(selector).toggleClass(className, switch)

      上述代碼中,className表示添加或移除的一個或多個類名,多個類名用空格分隔;switch參數用來規定只刪除類或只添加類,設為true表示添加,設為false表示移除。

      下面通過代碼演示toggleClass()的使用。

         <script>
          $("div").click(function() {
           $(this).toggleClass("current");
          });
         </script>

      上述代碼執行后,單擊頁面中的“切換類名”按鈕,當div元素上存在current類名時,則被移除,否則就添加??梢詫崿F字體背景色的切換效果。








      猜你喜歡:

      怎樣操作jQuery的元素內容?演示內容操作過程

      怎樣使用jQuery?jQuery常見操作問題和解決方法

      jQuery框架有什么特點?如何安裝jQuery?

      傳智教育前端開發培訓

      0 分享到:
      神马影院我不卡