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

原创 2012年03月27日 22:32:45
<!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:选中单选框radioval值等于3

 

 

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

                    

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

                    

                     });

 

   2:默认选中下拉菜单select2

  

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

 

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

    

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

 

   4:默认复选框选中2号和5

 

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

事件处理案例

  • 2013年11月09日 20:51
  • 105KB
  • 下载

jQuery事件处理

  • 2013年04月01日 10:51
  • 2.84MB
  • 下载

Vuforia Virtual Button(虚拟按钮)案例二——按钮事件处理

一、利用Unity3d进行开发 查看这个脚本,是对虚拟按钮的事件进行监听控制。相应地修改按钮的触发事件可以通过这个类进行。...
  • ggtaas
  • ggtaas
  • 2014年08月21日 22:00
  • 4342

java 鼠标事件处理案例

import java.awt.Container; import java.awt.event.MouseEvent; import java.awt.event.MouseListener; ...

onConfigurationChanged--基于回调的事件处理方法demo案例

button.setOnClickListener(new OnClickListener() { @Override public void onClick(View view) { ...

java 键盘事件处理案例

/*  *要求:  *  *在文本框中,输入键盘上的各个按键,  *在文本域中显示用户按下的是什么键,并输入这个按键的ASCII码。  */ import javax.swing.*; ...

HTML、CSS和JavaScript学习五(案例分析三表格排序及颜色变换)

三.对表格中的的每一行进行按某个条件进行排序,效果图,当点击年龄是就会触发事件源,按照年龄将每行进行排序,第一点击按照从小到大的顺序排序,第二次点击是按照从大到小的顺序进行排序;并且当鼠标方法间隔色的...

asp.net 中RadioButtonList的选项改变事件处理(采用jquery操作)

实现的效果如下图所示:                                可以设置RadioButtonList的autopostback属性为true,然后处理其OnSelectedIn...

使用AmplifyJS和JQuery编写更好更优雅的javascript事件处理代码

事件(或消息)是一种常用的软件设计模式,能够降低消息处理者和消息发布者的之间的耦合,比如J2EE里面的JMS规范。设计模式中的观察者模式(也叫发布/订阅模式),这对于javascript代码同样适用。...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery事件处理、查找、强大的表格变换颜色案例
举报原因:
原因补充:

(最多只允许输入30个字)