jquery事件处理、查找、强大的表格变换颜色案例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>toggle第几第一次执行第一个函数，点击第二次执行第二个函数</title>
<style type="text/css">
.even{
	background-color:#CCC;}
.odd{
	background-color:#FFff99;}
 .selected{
	 background-color:#03F;}

 .checks{
	 background-color:#C39;}
	 
  .huadong{
	  background-color:#3C3;}	 
</style>
<script type="text/javascript" src="../include/jquery.js"></script>
<script type="text/javascript">
var color;
//使用jquery加载事件
 $(document).ready(function (){
	
	//toggleClass()相当于在匹配元素上加上了class属性
	//style比class优先 所以style>class  id>class
	
	//偶数	
	$("tr:even").addClass("even");
	
	//奇数
	$("tr:odd").addClass("odd");
	
	//设置滑动
	$("tr").mouseover(function (){
		
		$(this).addClass("huadong");
		});
		
   	$("tr").mouseout(function (){
		
		$(this).removeClass("huadong");
		});		
	
	//设置点击换色
	/*$("tr").click(function (){
		$(this).toggleClass("selected");
		});*/
	
	
	//用上边的可以代替，上边的简单，效果一样
	$("input").each(function (){
		
		$(this.parentNode.parentNode).click(function (){
			$(this).toggleClass("selected");
			});
		});
		
		
		
		
		
	/*$("tr").toggle(function(){
		
		$(this).toggleClass("selected");
		
		},function(){
			
			$(this).removeClass("selected");
			});*/
	
   
   //选中checkbox换色
	//$("tr").mouseover(function (){	
	//alert("aa");
	$("input[type=checkbox]").each(function (index,domEle){
		
	$("input[type=checkbox]").click(function (){
		if(this.checked==true){
		$(this).parents("tr").addClass("checks")}
		
		if(this.checked==false)	{
			 $(this).parents("tr").removeClass("checks");
			}		
		 });
		
	}); 
	
	
	
	
	//设置radio选中变色	
	$("input[type=radio]").click(function (){
		$("input[type=radio]").each(function (i){
			$(this).parents("tr").removeClass("selected");
		if(this.checked==true){
			
		   $(this).parents("tr").toggleClass("checks");
		  
		}else{
			
			  $(this).parents("tr").removeClass("checks");
			
			}
					
		 });
		
	  });
	
	
	
 });
 

 
</script>
</head>

<body>
<form  method="post">

 <table width="397" border="1">
  <tr>
    <td width="56"><input type="checkbox" id="checkbox"></td>
    <td width="160"> </td>
    <td width="159"> </td>
  </tr>
  
  <tr>
    <td><input type="checkbox" id="checkbox"></td>
    <td> </td>
    <td> </td>
  </tr>
  
  <tr>
    <td><input type="checkbox" id="checkbox"></td>
    <td> </td>
    <td> </td>
  </tr>
  
  <tr>
    <td><input type="checkbox" id="checkbox"></td>
    <td> </td>
    <td> </td>
  </tr>
  
  <tr>
    <td><input type="checkbox" id="checkbox"></td>
    <td> </td>
    <td> </td>
  </tr>
  
  <tr>
    <td><input type="radio" name="radio"></td>
    <td> </td>
    <td> </td>
  </tr>
  
  <tr>
    <td><input type="radio" name="radio"></td>
    <td> </td>
    <td> </td>
  </tr>
  
  <tr>
    <td><input type="radio" name="radio"></td>
    <td> </td>
    <td> </td>
  </tr>
</table>

  </form> 
   
</body>
</html>

事件处理

   ① bind:为每个匹配元素的特定事件绑定事件处理函数。

   

     例1：

        $("p").bind("click", function(){

           alert( $(this).text() );

          });

 

     例2：调用dom函数

 

       $("input[type=button]").bind("dblclick",aa);

 

      function aa(){

        

        alert("aa");

        }

 

   ②one:绑定一个一次性的事件处理函数。

   

     例:给段落表记绑定一个一次性的事件,只能调用一次

 

       $("p").one("click",function(){

                    

                     alert($(this).text());

                     });

 

 

查找

 

   ①children():每一个元素的所有子元素的元素集合。

 

     例:查找DIV中的每个子元素。

 

    $("#d2").children().each(function (index,domEle){

                    

                     alert(domEle.value);

                     });

 

  ②find():

 

    搜索所有与指定表达式匹配的元素。

   

    $("p").find("span").css("background-color","green");

 

  ③next():案例折叠

 

      取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈 

    元素的元素集合。

 

     $("span").click(function (){

 

        $(this).next().toggle("slow");

             

               }); 

 

 

  ④parent():

     取得一个包含着所有匹配元素的唯一父元素的元素集合。

 

    $("a").mouseover(function (){

                    

      $(this).parent().css("background","green");

                     });

 

  ⑤parents():重要

  

    用于筛选祖先元素的表达式

 

    $("span").parents(".d2").css("background","green");

 

val():

 

   例1：选中单选框radio中val值等于3号

 

 

    $("input[name=rad]").each(function (index,domEle){

                    

       if(domEle.value=='3号'){domEle.checked=true;}

                    

                     });

 

   例2：默认选中下拉菜单select为2号

  

       $("#sel2").val("2号");

 

   例3:默认下拉菜单同时选中2号和5号"

    

       $("select").eq(1).val(["2号","5号"]);    

 

   例4：默认复选框选中2号和5号

 

       $("input[name=box]").val(["2号","5号"]);