jQuery addClass removeClass toggleClass方法概述

標籤：rem   添加   樣式   操作   name   情況   tcl   jquer   style   

通過動態改變類名（class），可以讓其修改元素呈現出不同的效果。在HTML結構中裡，多個class以空格分隔，當一個節點（或稱為一個標籤）含有多個class時，DOM元素響應的className屬性擷取的不是class名稱的數組，而是一個含有空格的字串，這就使得多class操作變得很麻煩。同樣的jQuery開發人員也考慮到這種情況，增加了一個.addClass()方法，用於動態增加class類名

.addClass( className )方法

1. .addClass( className ) : 為每個匹配元素所要增加的一個或多個樣式名
2. .addClass( function(index, currentClass) ) : 這個函數返回一個或更多用空格隔開的要增加的樣式名

注意事項：

.addClass()方法不會替換一個樣式類名。它只是簡單的添加一個樣式類名到元素上

.removeClass( )方法

1. .removeClass( [className ] )：每個匹配元素移除的一個或多個用空格隔開的樣式名
2. .removeClass( function(index, class) ) ： 一個函數，返回一個或多個將要被移除的樣式名

注意事項

　　如果一個樣式類名作為一個參數,只有這樣式類會被從匹配的元素集合中刪除 。 如果沒有樣式名作為參數，那麼所有的樣式類將被移除

.toggleClass( )方法：在匹配的元素集合中的每個元素上添加或刪除一個或多個樣式類,取決於這個樣式類是否存在或值切換屬性。即：如果存在（不存在）就刪除（添加）一個類

1. .toggleClass( className )：在匹配的元素集合中的每個元素上用來切換的一個或多個（用空格隔開）樣式類名
2. .toggleClass( className, switch )：一個布爾值，用於判斷樣式是否應該被添加或移除
3. .toggleClass( [switch ] )：一個用來判斷樣式類添加還是移除的 布爾值
4. .toggleClass( function(index, class, switch) [, switch ] )：用來返回在匹配的元素集合中的每個元素上用來切換的樣式類名的一個函數。接收元素的索引位置和元素舊的樣式類作為參數

注意事項：

　　toggleClass是一個互斥的邏輯，也就是通過判斷對應的元素上是否存在指定的Class名，如果有就刪除，如果沒有就增加

　　toggleClass會保留原有的Class名後新增，通過空格隔開

jQuery addClass removeClass toggleClass方法概述