jQuery学习教程（五）：选择器综合实例

以下实例综合讲解了几个选择器的使用，同时演示了使用jQuery实现隔行换色、荧光棒特效、复选框checkbox全选反选效果
<script type="text/javascript"> 
	$(function(){  
		$("table tr:even").addClass("tdOdd"); 
		$("th:first").css("background","#B4C6C1");//首个  
		$("table tr").mouseover(function(){ 
			$(this).addClass("tdOver");}).mouseout(function(){  
			$(this).removeClass("tdOver");}).click(function(){//荧光棒  
		$(".tdClick").removeClass("tdClick");$(this).addClass("tdClick");  
		})//行锁定   
		$("input:checkbox:first").click(function(){  
		$("input:checkbox:not(input:checkbox:first)").each(function(){//剔除本身  
		$(this).attr(  "checked",$("input:checkbox:first").attr("checked"));  
		})    
		})    
		$("input:checkbox:not(input:checkbox:first)").click(function(){  
		var flag=true;   
		$("input:checkbox:not(input:checkbox:first)").each(function(){  
		if(!this.checked){flag=false;}//不可使用if($(this).attr("checked","false")){flag=false;}<P></P>  
		});  
		$("input:checkbox:first").attr("checked",flag);  
		})    
		});  
</script> 
<style type="text/css">  
body{  
	font-size:12px; 
	color:#366; 
}  
table{  
	border:none; 
	background:#fefefe; 
	100%; 
	border-collapse:collapse;  
}  
th{  
	background:#CFDEC6; 
	padding:4px; 
	color:#000; 
}  
td,.tdNormal{ 
	border:#cfdec6   solid   1px;  
	padding:4px; 
	background:fefefe; 
}  
.tdOdd{  
	background:#f1fefa; 
}  
.tdOver{  
	background:#F5FAF7; 
}  
</style> 
</head> 
<body> 
<table> 
	<tr> 
		<th>姓名</th> 
		<th>年龄</th> 
		<th>专业</th> 
	</tr> 
	<tr> 
		<td>王洪剑</td> 
		<td>22</td> 
		<td>电气自动化</td> 
	</tr> 
	<tr> 
		<td>李川川</td> 
		<td>20</td> 
		<td>计算机</td> 
	</tr> 
	<tr> 
		<td>陈超</td> 
		<td>22</td> 
		<td>计算机</td> 
	</tr> 
	<tr> 
		<td>秦玉龙</td> 
		<td>21</td> 
		<td>计算机</td> 
	</tr> 
	<tr> 
		<td>刘威</td> 
		<td>21</td> 
		<td>计算机</td> 
	</tr> 
	<tr> 
		<td>张会会</td> 
		<td>21</td> 
		<td>计算机</td> 
	</tr> 
	<tr> 
		<td>胡海生</td> 
		<td>30</td> 
		<td>计算机</td> 
	</tr> 
	<tr> 
		<td>吴雄</td> 
		<td>22</td> 
		<td>计算机</td> 
	</tr> 
</table>