改变元素样式

我们通过动态改变类名（class），可以让其修改元素呈现出不同的效果。在HTML结构中里，多个class以空格分隔，当一个节点（或称为一个标签）含有多个class时，DOM元素响应的className属性获取的不是class名称的数组，而是一个含有空格的字符串，这就使得多class操作变得很麻烦。同样的jQuery开发者也考虑到这种情况，增加了一个.addClass()方法，用于动态增加class类名
Css代码：

HTML代码：

1）.addClass( className )方法（增加）
1、.addClass( className ) : 为每个匹配元素所要增加的一个或多个样式名。
2、.addClass( function(index, currentClass) ) : 这个函数返回一个或更多用空格隔开的要增加的样式名。
JavaScript代码：

效果图：

2）.removeClass( )方法（删除）
1、.removeClass( [className ] )：每个匹配元素移除的一个或多个用空格隔开的样式名。
2、.removeClass( function(index, class) ) ： 一个函数，返回一个或多个将要被移除的样式名。
JavaScript代码：

3）.toggleClass()
在做某些效果的时候，可能会针对同一节点的某一个样式不断的切换，也就是addClass与removeClass的互斥切换，比如隔行换色效果。
jQuery提供一个toggleClass方法用于简化这种互斥的逻辑，通过toggleClass方法动态添加删除Class，一次执行相当于addClass，再次执行相当于removeClass。
1、.toggleClass( )方法：在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即：如果存在（不存在）就删除（添加）一个类。
2、.toggleClass( className )：在匹配的元素集合中的每个元素上用来切换的一个或多个（用空格隔开）样式类名。
3、.toggleClass( className, switch )：一个布尔值，用于判断样式是否应该被添加或移除。
4、.toggleClass( [switch ] )：一个用来判断样式类添加还是移除的 布尔值。
5、.toggleClass( function(index, class, switch) [, switch ] )：用来返回在匹配的元素集合中的每个元素上用来切换的样式类名的一个函数。接收元素的索引位置和元素旧的样式类作为参数。
JavaScript代码：

效果图：