jQuery的属性与样式之切换样式.toggleClass()
来源:互联网 发布:ardupilot 源码 分析 编辑:程序博客网 时间:2024/05/16 19:05
在做某些效果的时候,可能会针对同一节点的某一个样式不断的切换,也就是addClass与removeClass的互斥切换,比如隔行换色效果
jQuery提供一个toggleClass方法用于简化这种互斥的逻辑,通过toggleClass方法动态添加删除Class,一次执行相当于addClass,再次执行相当于removeClass
.toggleClass( )方法:在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即:如果存在(不存在)就删除(添加)一个类
1、.toggleClass( className ):在匹配的元素集合中的每个元素上用来切换的一个或多个(用空格隔开)样式类名
2、.toggleClass( className, switch ):一个布尔值,用于判断样式是否应该被添加或移除
3、.toggleClass( [switch ] ):一个用来判断样式类添加还是移除的 布尔值
4、.toggleClass( function(index, class, switch) [, switch ] ):用来返回在匹配的元素集合中的每个元素上用来切换的样式类名的一个函数。接收元素的索引位置和元素旧的样式类作为参数
<!DOCTYPE HTML><html><head> <meta charset="utf-8"> <title>隔行换色</title> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> <style type="text/css"> body, table, td, { font-family: Arial, Helvetica, sans-serif; font-size: 12px; } .h { background: #f3f3f3; color: #000; } .c { background: #ebebeb; color: #000; } </style></head><body> <h4>.toggleClass(className)和.toggleClass(className,switch)</h4> <table id="table" width="50%" border="0" cellpadding="3" cellspacing="1"> <tr> <td>慕课jQuery入门</td> <td>慕课jQuery入门</td> </tr> <tr> <td>慕课jQuery入门</td> <td>慕课jQuery入门</td> </tr> <tr> <td>慕课jQuery入门</td> <td>慕课jQuery入门</td> </tr> <tr> <td>慕课jQuery入门</td> <td>慕课jQuery入门</td> </tr> <tr> <td>慕课jQuery入门</td> <td>慕课jQuery入门</td> </tr> </table> </div> <script type="text/javascript"> //给所有的tr元素加一个class="c"的样式 $("#table tr").toggleClass("c"); </script> <script type="text/javascript"> //给所有的偶数tr元素切换class="c"的样式 //所有基数的样式保留,偶数的被删除 $("#table tr:odd").toggleClass("c"); </script> <script type="text/javascript"> //第二个参数判断样式类是否应该被添加或删除 //true,那么这个样式类将被添加; //false,那么这个样式类将被移除 //所有的奇数tr元素,应该都保留class="c"样式 $("#table tr:even").toggleClass("c", true); //这个操作没有变化,因为样式已经是存在的</body></html>
阅读全文
0 0
- jQuery的属性与样式之切换样式.toggleClass()
- jQuery的属性与样式之切换样式.toggleClass()
- jQuery的属性与样式之增加样式.addClass()
- jQuery的属性与样式之删除样式.removeClass()
- jQuery的属性与样式之样式操作.css()
- jQuery的属性与样式之增加样式.addClass()
- jQuery的属性与样式之删除样式.removeClass()
- jQuery的属性与样式之.val()
- jQuery的属性与样式之.val()
- jQuery的属性与样式之.val()
- jQuery的属性与样式
- jQuery的属性与样式
- jQuery的属性与样式
- jQuery的属性与样式
- jQuery的属性与样式
- class 样式的添加,删除,切换 【选择器】addClass,removeClass,toggleClass
- jQuery的属性与样式之.attr()与.removeAttr()
- Jquery的样式切换
- 关于dtd的简单内容
- 在Controller层无法注入Service层的对象
- Assets的使用和SoundPool播放音频
- Flask: 路由
- oracle数据库(关系型数据库1)
- jQuery的属性与样式之切换样式.toggleClass()
- eclipse 安装maven插件报错
- 文章标题
- POJ 1173 Bar Codes 笔记
- ubuntu安装搜狗输入法
- C++中vector总结
- 【开发手札】关于折腾esp8266的一些体会
- Array对象方法
- 1176: 手机靓号