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()命令处理是非常好的。代码示例:
这个函数利用toggleClass()命令为所有<tr>元素切换名为striped的类。我们还给表格的onmouseover和onmouseout特性添加函数调用: