类样式的操作：指对DOM属性className进行添加、移除操作。比如addClass()、removeClass()、toggleClass()。

1. addClass()

1.1 概述

$(selector).addClass(className)

className

类型： String

为每个匹配元素所要增加的一个或多个样式名

返回值：jQuery

描述： 为每个匹配的元素添加指定的样式类名

1.2 为匹配到的元素添加指定类名

格式为： $(selector).addClass("className");

1  2  3  4     
      5      6      7     12 13 14     
     
15 16 

 

1.3 为匹配到的元素添加多个类名

格式为：

　　　　＄(selector).addClass("className1  className2")

示例代码：

1  2  3  4     
      5      6      7     12 13 14     
     
15 16 

2. removeClass()

从所有匹配的元素中删除全部或者指定的类

2.1 移除指定的单个类

格式： $(selector).removeClass("className");

示例代码：

2.2  移除指定的多个类

　　格式： $(selector).removeClass("className1 className2");　　

示例代码：

1  2  3  4     
      5      6      7     12 13 14     
     
15 16 

2.3 移除全部的类

格式:

　　$(selector).removeClass();

示例代码：

1  2  3  4     
      5      6      7     12 13 14     
     
15 16 

2.4 removeClass()案例， 解决“排他”问题

    
                         
     
        
      
This is the first line.
        
      
This is the second line.
        
      
This is the third line.
        
      
This is the fourth line.
    
     

3. toggleClass()

作用： 如果存在（不存在）就删除（添加）一个类

格式： $(selector).toggleClass("className");

示例代码：

1  2  3  4     
      5      6     11     12     19 20 21     
This is the test.
22 23