jQuery方法简洁实现隔行换色及toggleClass的使用


Posted in Javascript onMarch 15, 2013

今天用一种简洁的方法toggleClass()实现了隔行换色:代码如下:

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>隔行换色</title> 
<script src="js/jquery-1.4.2.min.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> 
<div id="aaa"> 
<form> 
<table id="table" width="50%" border="0" cellpadding="3" cellspacing="1"> 
<tr> 
<td width="30" align="center"><input type="checkbox" name="checkbox" class="check1" value="checkbox" /></td> 
<td>蓝枫前端</td> 
<td>蓝枫前端</td> 
</tr> 
<tr> 
<td align="center"><input type="checkbox" name="checkbox" class="check1" value="checkbox" /></td> 
<td>蓝枫前端</td> 
<td>蓝枫前端</td> 
</tr> 
<tr> 
<td align="center"><input type="checkbox" name="checkbox" class="check1" value="checkbox" /></td> 
<td>蓝枫前端</td> 
<td>蓝枫前端</td> 
</tr> 
<tr> 
<td align="center"><input type="checkbox" name="checkbox" class="check1" value="checkbox" /></td> 
<td>蓝枫前端</td> 
<td>蓝枫前端</td> 
</tr> 
<tr> 
<td align="center"><input type="checkbox" name="checkbox" class="check1" value="checkbox" /></td> 
<td>蓝枫前端</td> 
<td>蓝枫前端</td> 
</tr> 
<tr> 
<td align="center"><input type="checkbox" name="checkbox" class="check1" value="checkbox" /></td> 
<td>蓝枫前端</td> 
<td>蓝枫前端</td> 
</tr> 
<tr> 
<td align="center"><input type="checkbox" name="checkbox" class="check1" value="checkbox" /></td> 
<td>蓝枫前端</td> 
<td>蓝枫前端</td> 
</tr> 
</table> 
</form> 
</div> 
<script>

第一种比较复杂的方法
$(function() 
{ 
$("#table tr").hover(function() 
{ 
$(this).addClass("h"); 
},function() 
{ 
$(this).removeClass("h"); 
}) 
$("input").click(function() 
{ 
if($(this).attr("checked")) 
{ 
$(this).closest("tr").addClass("c"); 
} 
else 
{ 
$(this).closest("tr").removeClass("c"); 
} 
}) 
})

第二种比较简单的方法
toggleClass() 对设置或移除被选元素的一个或多个类进行切换。
该方法检查每个元素中指定的类。如果不存在则添加类,如果已设置则删除之。这就是所谓的切换效果。
不过,通过使用 "switch" 参数,您能够规定只删除或只添加类。
$(function(){ 
$("#table tr").hover(function(){ 
$(this).toggleClass("h"); 
}) 
$("input").click(function(){ 
var d = $(this); 
d.closest('tr').toggleClass("c",d.attr("checked")) ; 
}) 
}) 
</script> 
</body> 
</html>
Javascript 相关文章推荐
JavaScript 解析读取XML文档 实例代码
Jul 07 Javascript
超级24小时弹窗代码 24小时退出弹窗代码 100%弹窗代码(IE only)
Jun 11 Javascript
基于jQuery UI CSS Framework开发Widget的经验
Aug 21 Javascript
使用JavaScript获取地址栏参数的方法
Dec 19 Javascript
jQuery对象的selector属性用法实例
Dec 27 Javascript
使用jQuery在对象中缓存选择器的简单方法
Jun 30 Javascript
JS+CSS实现的竖向简洁折叠菜单效果代码
Oct 22 Javascript
angular实现表单验证及提交功能
Feb 01 Javascript
Angular2使用Augury来调试Angular2程序
May 21 Javascript
JavaScript实现简单的隐藏式侧边栏功能示例
Aug 31 Javascript
Vuex的初探与实战小结
Nov 26 Javascript
Openlayers实现测量功能
Sep 25 Javascript
jquery使用ColorBox弹出图片组浏览层实例演示
Mar 14 #Javascript
JavaScript 函数replace深入了解
Mar 14 #Javascript
JS异常处理的一个想法(sofish)
Mar 14 #Javascript
JQuery 中几个类选择器的简单使用介绍
Mar 14 #Javascript
document.createElement()用法及注意事项(ff下不兼容)
Mar 13 #Javascript
document.createElement()用法
Mar 13 #Javascript
js获得鼠标的坐标值的方法
Mar 13 #Javascript
You might like
PHP之数组学习
2011/05/29 PHP
为Plesk PHP7启用Oracle OCI8扩展方法总结
2019/03/29 PHP
javascript TextArea动态显示剩余字符
2008/10/22 Javascript
谈谈JavaScript中的函数与闭包
2013/04/14 Javascript
通过pjax实现无刷新翻页(兼容新版jquery)
2014/01/31 Javascript
Javascript学习笔记之相等符号与严格相等符号
2014/11/23 Javascript
javascript实现模拟时钟的方法
2015/05/13 Javascript
跟我学习javascript的prototype,getPrototypeOf和__proto__
2015/11/17 Javascript
JavaScript对象参数的引用传递
2016/01/14 Javascript
面试常见的js算法题
2017/03/23 Javascript
详解如何用模块化的方式写vuejs
2017/12/16 Javascript
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
2018/03/28 jQuery
详解如何用babel转换es6的class语法
2018/04/03 Javascript
JS实现的DOM插入节点操作示例
2018/04/04 Javascript
微信小程序实现跑马灯效果完整代码(附效果图)
2018/05/30 Javascript
js比较两个单独的数组或对象是否相等的实例代码
2019/04/28 Javascript
vue.js实现左边导航切换右边内容
2019/10/21 Javascript
javascript二维数组和对象的深拷贝与浅拷贝实例分析
2019/10/26 Javascript
35个Python编程小技巧
2014/04/01 Python
Python中声明只包含一个元素的元组数据方法
2014/08/25 Python
python 实现自动远程登陆scp文件实例代码
2017/03/13 Python
python实现微信自动回复及批量添加好友功能
2019/07/03 Python
python实现两个一维列表合并成一个二维列表
2019/12/02 Python
使用Python绘制台风轨迹图的示例代码
2020/09/21 Python
Python tempfile模块生成临时文件和临时目录
2020/09/30 Python
Python高并发和多线程有什么关系
2020/11/14 Python
中国双语服务优势的在线购票及活动平台:247tickets
2018/10/26 全球购物
大学生物业管理求职信
2013/10/24 职场文书
环境工程专业自荐信
2014/03/03 职场文书
法学自荐信
2014/06/20 职场文书
经典法律座右铭(50句)
2019/08/15 职场文书
K8s部署发布Golang应用程序的实现方法
2021/07/16 Golang
SQL实现LeetCode(178.分数排行)
2021/08/04 MySQL
Vue.js中v-bind指令的用法介绍
2022/03/13 Vue.js
python计算列表元素与乘积详情
2022/08/05 Python
Python 操作pdf pdfplumber读取PDF写入Exce
2022/08/14 Python