什么是類操作？jQuery通過(guò)類名操作樣式

類操作就是通過(guò)操作元素的類名進(jìn)行元素樣式操作，當(dāng)元素樣式比較復(fù)雜時(shí)，如果通過(guò)css()方法實(shí)現(xiàn)，需要在CSS里編寫(xiě)很長(zhǎng)的代碼，既不美觀也不方便。而通過(guò)寫(xiě)一個(gè)類名，把類名加上或去掉就會(huì)顯得很方便。下面通過(guò)代碼演示類的添加、刪除和切換。

1. 準(zhǔn)備工作

先準(zhǔn)備一個(gè)HTML網(wǎng)頁(yè)，然后用jQuery代碼對(duì)網(wǎng)頁(yè)進(jìn)行操作。HTML代碼如下。

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

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

2. addClass()添加類

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

$(selector).addClass(className)

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

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

上述代碼執(zhí)行后，單擊頁(yè)面中的“添加類名”按鈕，就會(huì)在div元素上添加current類名，背景色修改為紅色。

如果添加多個(gè)類，使用空格分隔類名，示例代碼如下。

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

3. removeClass()移除類

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

$(selector).removeClass(className)

上述代碼中， className參數(shù)可以傳入一個(gè)或多個(gè)類名，使用空格來(lái)分隔，如果省略該參數(shù)，表示移除所有的類名。下面通過(guò)代碼演示。

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

上述代碼執(zhí)行后，單擊頁(yè)面中的“刪除類名”按鈕，在div元素上的current類名會(huì)被移除，背景色消失。

4. toggleClass()切換類

toggleClass()方法用來(lái)為元素添加或移除某個(gè)類，如果類不存在，就添加該類，如果類存在，就移除該類?；菊Z(yǔ)法如下所示。

$(selector).toggleClass(className, switch)

上述代碼中，className表示添加或移除的一個(gè)或多個(gè)類名，多個(gè)類名用空格分隔；switch參數(shù)用來(lái)規(guī)定只刪除類或只添加類，設(shè)為true表示添加，設(shè)為false表示移除。

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

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

上述代碼執(zhí)行后，單擊頁(yè)面中的“切換類名”按鈕，當(dāng)div元素上存在current類名時(shí)，則被移除，否則就添加?？梢詫?shí)現(xiàn)字體背景色的切換效果。








猜你喜歡：

怎樣操作jQuery的元素內(nèi)容？演示內(nèi)容操作過(guò)程

怎樣使用jQuery？jQuery常見(jiàn)操作問(wèn)題和解決方法

jQuery框架有什么特點(diǎn)？如何安裝jQuery？

傳智教育前端開(kāi)發(fā)培訓(xùn)