jquery之修改元素样式(添加和删除类名称，使用addClass(),removeClass(),toggleClass()方法)

jquery之修改元素样式(添加和删除类名称，使用addClass(),removeClass(),toggleClass()方法)

----------

 

在HTML里，class特性是以空格分隔、由多个类名称所组成的字符串。例如：

<div class="someClass anotherClass yetAnotherClass"></div>

不幸的是，在DOM元素相诮的className属性里，这些类名称不是表示为名称数组，而是空格分隔的字符串。多么令人失望，多么麻烦！这意味着每当我们想给(或从)已拥有类名称的元素添加(或删除)类名称，就必须解析字符串，以便在读取时确定单独的名称，而在写入时确保还原为空格分隔的有效格式。

尽管编写代码处理这一切并不是艰巨任务，但是，隐藏这些机械操作的细节而抽象出简洁的API，终归是个好主意。幸好jquery已经为我们做好了。添加类名称到匹配集的所有元素，如果利用以下addClass()命令进行操作就很简单。

addClass语法：

addClass(names)

添加指定的一个或多个类名称到包装集的所有元素

参数

names   一个字符串，包含将要添加的一个类名称，或者包含空隔分隔的，将要添加的多个类名称。

 

----------

 

利用removeClass()命令来删除类名称显得直接干脆。

removeClass语法：

removeClass(names)

从包装集各元素里删除指定的一个或多个类名称。

参数

names   一个字符串，包含将要删除的一个类名称、或者包含空格分隔的，将要删除的多个类名称

 

----------

 

我们经常想来回切换一组样式，也许是为了表现两个状态之间的变化，或出于在界面上有意义的任何其他理由。利用toggleClass()命令，jquery使得这个操作非常简便。

toggleClass()语法：

toggleClass(name)

如果在元素中指定类名称不存在，则添加指定类名称；如果元素已拥有指定类名称，则从元素中删除指定类名称。请注意，每个元素单独测试，所以一些元素被添加类名称，而其他则被删除类名称。

参数

name  一个字符串，包含用于切换的类名称

当我们想要快速简便地在元素之间切换视觉呈现时，toggleClass()命令最有用，如，如果有合理的理由要交换奇数行和偶数行的背景颜色，用toggleClass()命令处理是非常好的。代码示例：

function swap(){ $('tr').toggleClass('striped'); } 

 

这个函数利用toggleClass()命令为所有<tr>元素切换名为striped的类。我们还给表格的onmouseover和onmouseout特性添加函数调用：

<table onmouseover="swap();" onmouseout="swap();">