jquery的事件

最新推荐文章于 2024-03-20 08:53:45 发布

guwen1991

最新推荐文章于 2024-03-20 08:53:45 发布

阅读量451

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/oGuWen1/article/details/12684715

版权

jquery 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!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=gb2312" />
<title>无标题文档</title>
<script src="../jquery.min.js"></script>
<script>
/****************$(document).ready()事件****************************/
//$(function(){alert("事件1");});   //按照顺序执行
//$(function(){alert("事件2");});

$(function(){        

/****************合成事件*******************************************/
   $("h3").hover(function(){    
      $(this).css("background-color","#FF00FF");  //进入
   },
       function(){                       
	   $("h3").css("background-color","gray");    //离开	 
     });
	 
	 
   $("#container>div").toggle(     //单击事件                
          function(){alert("这是第一次点击!");
		  $("span").toggle();},      //不带参数的toggle可用于显示隐藏
		  function(){alert("这是第二次点击！");
		  $("span").toggle();
    });
   
   
/***************************事件冒泡********************************/
   $("#container2>span").click(function(event){
      alert("span被点击了！");
	  event.stopPropagation();  //阻止冒泡
   });
    $("#container2").click(function(){
      alert("container2被点击了！");
   });
   $(":submit").click(function(event){     //事件对象   
	 //alert(event.type);            //事件对象属性
	 //alert($(event.target).attr("name"));
	// alert(event.pageX);
	 //alert(event.pageY);
	// event.preventDefault();  //阻止默认行为
	return false;  //阻止冒泡和默认行为
   });
   
 /***************************绑定多个事件类型********************************/	
  //所有事件都比javascript事件少了on		 
	 $("#s3").bind("click mouseouver",function(){alert("你好！");});
     $("#s3").bind("click",function(){alert("你好！");});
 
 /***************************移除事件********************************/
   $(":submit").click(myfun1=function(event,p1,p2){
       alert(p1+p2);
   });
    $("#btn").click(myfun2=function(){
      // $(":submit").unbind();
	  //$(":submit").unbind("click",myfun1);  //函数名不能加引号
	  
 /***************************模拟操作********************************/		  
	  // $(":submit").trigger("click");
	  $(":submit").trigger("click",["这是","按钮"]);//为操作传递参数
   });
  $("#s2").click(function(){
 // $("#name").trigger("focus");  //执行默认操作 
  $("#name").triggerHandler("focus"); //执行非默认操作
  });
     $("#name").focus(function(){
     $("#name").val("这是改变以后的focus");});
	 	 
 /***************************事件空间********************************/		
	 $("#s3").bind("click.b",function(){alert("你好！");});
   //$("#s3").bind("mouseover.a",function(){alert("你好！");
   //$(this).unbind(".a");//解除事件空间所有事件的绑定});  
   
/****************相同事件名称，不同命名空间的执行方法********************************/	
 $("#s3").bind("click",function(){alert("你好！");}); 	
 $("#s3").bind("click.a",function(){alert("你好2！");}); 	 
 $("#s3").trigger("click!"); //匹配所有不在命名空间中的方法。
 
/***************************只进行一次绑定********************************/	
 $("#s4").one("click",function(){alert("你好3！");}); 	
});
</script>
<style>
a{ background-color:#FF00FF;}
b{ background-color:gray;}
</style>
</head>
<body>
<input name="btn" type="button" id="btn" value="显示"   />
<span id="sp">用于显示隐藏的标签</span>
<div id="container">
  <h3>什么是成功？</h3>
  <div>什么是成功？</div>
</div>
<div id="container2"> <span>冒泡测试</span>  
</div>
<form action="#" method="get" name="myform">
    <p>
      <input id="name" type="text" />
    </p>
    <p>     
      <input  type="submit" name="Submit" value="提交" id="Submit" />
      <input type="button" id="s2" value="焦点" />
  </p>
</form>
<input type="button" id="s3" value="绑定多个时间类型" />
<input type="button" id="s4" value="一次绑定" />
</body>
</html>