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

153 阅读 0 评论 101 点赞

我是靠谱客的博主粗心小笼包，最近开发中收集的这篇文章主要介绍jQuery方法简洁实现隔行换色及toggleClass的使用，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

今天用一种简洁的方法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> 