jQuery基础教程之DOM操作-样式操作

jquery中提供了一系列的方法，让我们可以轻松地对DOM中的元素进行class的获取、设置、追加、移除、切换以及判断某个元素是否具有某个class。

获取、设置样式

这里就是利用attr()方法去设置和获取元素的的class属性，但是要注意这个通过attr()方法设置class属性和通过addClass()方法追加元素class属性的区别。

追加样式：addClass()

这个方法会为每个匹配的元素追加指定的样式。这个方法的用法有两个：

.addClass(
className )

这里的className参数可以是一个样式也可以是两个或者多个。各个class名称之间用空格隔开。例如：

1	$( 'p' ).addClass( 'myClass yourClass' );

.addClass(
function(index, className) )

注意，这种用法是从1.4版本才开始加入的。

function(index,className)返回的值做为追加的class。其中index的值为当前元素在元素组中的索引值，className指向的是当前元素的原始class。





移除样式：removeClass()

这个方法会为每个匹配的元素移除指定的样式。这个方法的用法有两个：

.removeClass(
className )

这里的className参数可以是一个样式也可以是两个或者多个。各个class名称之间用空格隔开。例如：

1	$( 'p' ).removeClass(); //不带参数的话，就是移除所有的样式

2	$( 'p' ).removeClass( 'myClass' );

3	$( 'p' ).removeClass( 'myClass yourClass' );

.removeClass(
function(index, className) )

注意，这种用法是从1.4版本才开始加入的。

function(index,className)返回的值做为要移除的class。其中index的值为当前元素在元素组中的索引值，className指向的是当前元素的原始class。





切换样式：toggleClass()

使用这个方法可以控制样式上的重复切换，它的用法到jquery1.4版本之后就有三种用法了。

.toggleClass(
className )

如果类名存在则删除匹配元素中的该class，如果不存在则追加。





.toggleClass(
className, switch )

这种用方法是根据switch这个表达式计算的值是否为真，如果为真的话，就进行追加class。为假则移除。

可能这样说比较难以理解，大家还是看DEMO吧。





.toggleClass(function(index,
className),[switch])

关于这个方法里面的function(index, className)和前面addClass和removeClass的用法差不多。

switch是可选的参数，然后再根据switch这个表达式计算的值是否为真，如果为真的话，就进行追加class（function(index, className)这个函数返回的值）。为假则移除。

这种用法这样说，可能大家很难理解，其实我自己也不是很理解，也不知道能用到什么地方，呵呵·~1.4.4增加了好多方法哦~~，大家还是看DEMO吧。





判断是否含有某个样式:hasClass()

这个方法可以用来判断元素中是否含有某个class，如果有则返回true，没有则返回false