類操作是什麼意思？jQuery的類操作教程分享

類操作就是透過操作元素的類名進行元素樣式操作，當元素樣式比較複雜時，如果透過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()方法用來為元素新增或移除某個類，如果類不存在，就新增該類，如果類存在，就移除該類。基本語法如下所示。

$(selector).toggleClass(className, switch)
上述程式碼中，className表示新增或移除的一個或多個類名，多個類名用空格分隔；switch引數用來規定只刪除類或只新增類，設為true表示新增，設為false表示移除。

下面透過程式碼演示toggleClass()的使用。

<script>
$("div").click(function() {
$(this).toggleClass("current");
});
</script>
上述程式碼執行後，單擊頁面中的“切換類名”按鈕，當div元素上存在current類名時，則被移除，否則就新增。可以實現字型背景色的切換效果。

上面就是為大家介紹的“類操作是什麼意思？jQuery的類操作教程”的相關內容，希望上面的介紹能夠給大家帶來幫助。想要獲取web前端學習路線和學習資料，歡迎關注小千，後期為大家分享更多內容。

本文來自千鋒教育，轉載請註明出處。