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

最新推荐文章于 2024-07-18 13:52:01 发布

php398893944

最新推荐文章于 2024-07-18 13:52:01 发布

阅读量898

点赞数

文章标签： jquery function input xhtml class button

本文链接：https://blog.csdn.net/php398893944/article/details/7400953

版权

<!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号"]);

php398893944

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery事件处理、查找、强大的表格变换颜色案例

toggle第几第一次执行第一个函数，点击第二次执行第二个函数.even{ background-color:#CCC;}.odd{ background-color:#FFff99;} .selected{ background-color:#03F;} .checks{ background-color:#C39;} .huadong{
复制链接

扫一扫