jQuery中的事件

最新推荐文章于 2020-05-23 19:28:58 发布

南栀_倾寒

最新推荐文章于 2020-05-23 19:28:58 发布

阅读量824

点赞数

分类专栏： java script

本文链接：https://blog.csdn.net/xinxinqiu/article/details/18888963

版权

java script 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

* jQuery中的事件：特殊的事件
       * ready()方法：和window.onload
       * ready()和onload的区别：面试
           * 执行时机
           * 编写个数
           * 简写方法
       * 绑定事件和解绑事件：bind()和unbind()
       * hover()：一个模仿悬停事件

* toggle()

ready()方法：和window.onload

<script>
	
	
//	ready的三种写法
$(document).ready(function(){});
$().ready(function(){});
$(function(){});
</script>

<script type="text/javascript">
   var startTime = new Date().getTime();
   $(document).ready(function(){
		test1();
  })
	
  function test1(){
      var endTime2  = new Date().getTime(); 
	  var a = endTime2 - startTime;
	  $("<div>jQuery的ready() : "+a+" ms</div>").appendTo("body");
  }

  function test2(){
       var endTime1  = new Date().getTime();
	   var b = endTime1 - startTime;
	   $("<p>JavaScript的window.onload : "+b+" ms</p>").appendTo("body");
  }
 
</script><body  οnlοad="test2();">

事件绑定

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>02_事件绑定.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
	<link rel="stylesheet" type="text/css" href="./css/style.css" />
  </head>
  <body>
  	   <div id="panel">
			<input type="button" id="stop" value="取消事件">
			<h5 class="head">什么是jQuery?</h5>
			<div class="content">
				jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
			</div>
		</div>
  </body>
  <script language="JavaScript">
    		$().ready(function(){
				//常规事件，灵活性不好
//				$("h5").click(function(){
//					if($(this).next().is(":hidden")){
//						$(this).next().show();
//					}else{
//						$(this).next().hide();
//					}
//				});
				
//				/*
//				 * 事件绑定：bind(type,data,fn)
//				 * 	* type：指定要绑定的事件
//				 * 			一共有以下这些：blur, focus, focusin, focusout, load, resize, 
//				 * 			scroll, unload, click, dblclick, mousedown, mouseup, mousemove, 
//				 * 			mouseover, mouseout, mouseenter, mouseleave, change, select, 
//				 * 			submit, keydown, keypress, keyup, error 。 
//				 * 	* data：作为event.data属性值传递给事件对象的额外数据对象
//				 * 	* fn：绑定到每个匹配元素的事件上面的处理函数
//				 */
//				$("h5").bind("click",function(){
//					if($(this).next().is(":hidden")){
//						$(this).next().show();
//					}else{
//						$(this).next().hide();
//					}
//				});
//				
//				/*
//				 * 事件解绑：unbind(type,fn)
//				 * 	* type：指定要解绑的事件
//				 * 	* fn：处理函数
//				 */
//				$("#stop").click(function(){
//					$("h5").unbind("click");
//				});
				
//				$("h5").mouseover(function(){
//					$(this).next().show();
//				}).mouseout(function(){
//					$(this).next().hide();
//				});
				
//				//绑定多个事件：多个事件之间用空格隔开
//				$("h5").bind("mouseover mouseout",function(){
//					if($(this).next().is(":hidden")){
//						$(this).next().show();
//					}else{
//						$(this).next().hide();
//					}
//				});
//				
//				$("#stop").click(function(){
//					$("h5").unbind("mouseover mouseout");
//				});
				
//				$("#stop").click(function(){
//					confirm("你确认要推出吗?")
//				});
				
				$("#stop").bind("click",{btn:"你确认要推出吗?"},function(event){
					confirm(event.data.btn);
				});
				
			});
  </script>
</html>

hover方法

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>hover方法</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
	<link rel="stylesheet" type="text/css" href="./css/style.css" />
  </head>
  <body>
  	   <div id="panel">
			<h5 class="head">什么是jQuery?</h5>
			<div class="content">
				jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
			</div>
		</div>
  </body>
  <script language="JavaScript">
    			$().ready(function(){
					$("h5").hover(function(){
						$(this).next().show();
					},function(){
						$(this).next().hide();
					});
				});
  </script>
</html>

toggle方法

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>toggle方法</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
	<link rel="stylesheet" type="text/css" href="./css/style.css" />
  </head>
  <body>
  	   <div id="panel">
			<h5 class="head">什么是jQuery?</h5>
			<div class="content">
				jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
			</div>
		</div>
  </body>
  <script language="JavaScript">
				$().ready(function(){
					$("h5").toggle(function(){
						$(this).next().show();
					},function(){
						$(this).next().hide();
					},function(){
						$(this).css("background","red");
						$(this).next().show();
					},function(){
						$(this).css("background","blue");
						$(this).next().hide();
					});
				});
  </script>
</html>