zoukankan      html  css  js  c++  java
  • 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>
    

      

  • 相关阅读:
    前端多媒体(7)—— 在浏览器中实现rtmp推流
    Canvas drawImage
    png8 png24 png32
    前端多媒体(6)—— 视音频编解码技术基础
    Meta viewport 学习整理
    前端多媒体(5)—— 图片滤镜的实现
    前端多媒体(4)—— video标签全面分析
    前端多媒体(3)—— 处理二进制数据
    前端多媒体(2)—— xhr异步接收处理二进制数据
    babel-runtime 和 babel-polyfill
  • 原文地址:https://www.cnblogs.com/liangle/p/2512668.html
Copyright © 2011-2022 走看看