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

最新推荐文章于 2025-11-05 20:48:02 发布

原创最新推荐文章于 2025-11-05 20:48:02 发布 · 954 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #function #input #xhtml #class #button

本文介绍了一个交互式表单的实现，通过jQuery实现了表单元素的样式切换和事件监听，包括鼠标悬停、点击事件以及针对不同表单项（如复选框、单选框、选项按钮）的样式变化。文章详细解释了如何使用jQuery方法来操作DOM元素，如addClass、removeClass、mouseover、mouseout等，并提供了实例代码。同时，文章还介绍了jQuery事件处理的基本概念，如bind、one等，以及查找DOM元素的方法，如children、find、next、parent、parents等。

<!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:绑定一个一次性的事件处理函数。