[锋利的jQuery]第四章 jQuery的事件

最新推荐文章于 2024-09-12 13:55:41 发布

靠谱的程序员

最新推荐文章于 2024-09-12 13:55:41 发布

阅读量719

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/zanbiyaJJ/article/details/7907290

版权

jQuery 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

1、加载DOM：

$(function(){
   //do something...
})

$(document).ready(function(){
   //do something...
})

注意：jQuery中的$(document).ready(function(){//....})和JavaScript中的window.onload区别：

1.1、执行机制：$(document).ready()方法和window.onload方法功能相似，但是window.onload只有等网页中的所有元素(包括元素所有的关联文件)完全加载到浏览器后才执行，即JavaScript此时才可以访问网页中的任何元素。而通过jQuery中的$(document).ready()方法注册的事件处理程序，在DOM完全就绪时就可以被调用。此时，网页的所有元素对jQuery而言都是可以访问的。但是这并不意味着这些元素关联的文件都已经下载完毕。

jQuery把网页解析成DOM树的速度比window.onload快，但是在$(document).ready()方法中注册的函数如果用到例如图片的高度和宽度，但是这时候图片还没有加载完毕，方法就变得无效了，jQuery中还提供了另外一个方法load()，load()方法会在元素的onload事件中绑定一个处理函数。

2、事件绑定：bind( type [,data] ,fn)在文档装装载完毕后，为元素绑定事件。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>jQuery第四章-jQuery的事件</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 type="text/javascript" src="scripts/jquery-1.8.0.js">
		</script>
				<style type="text/css">
		.content {
			padding: 10px;
			text-indent: 2em;
			border-top: 1px solid #0050D0;
			display: block;
			display: none;
		}
		
		.head {
			padding: 5px;
			background: #96E555;
			cursor: pointer
		}
		
		.panel {
			width: 300px;
			border: 1px solid #0050D0
		}
		
		* {
			margin: 0;
			padding: 0;
		}
		
		body {
			font-size: 13px;
			line-height: 130%;
			padding: 60px
		}
		</style>
		<script type="text/javascript">
		<!--
			$(function(){
				$("h5").bind("mouseover",function(){
					$("p").show();
				}).bind("mouseout",function(){
					$("p").hide();
				});
			})
		//-->
		</script>
	</head>

	<body>
		<div class="panel">
			<h5 class="head">
				[2012美国AMC最新热播西部历史剧][地狱之轮第二季][更新至02集][HDTV高清][中英字幕][迅雷下载]
			</h5>
			<p class="content">
				《地狱之轮第二季》是典型的男人剧集，以修建北美横贯大铁路的真实历史为背景，讲述的是男主角复仇的故事。西部题材，荒原、牛仔帽、左轮枪，不乏粗俗、暴力。现在播出第二季，感兴趣的朋友可以下载来看看。
			</p>
		</div>
	</body>
</html>

3、事件合成：

3.1、hover(enter,leave)方法用于模拟鼠标悬停事件。当光标移动到元素上时，会触发指定的第一个函数；当光标移出这个元素时，会触发第二个函数。

		<!--
			$(function(){
				$("h5").hover(function(){
					$("p").show();
				},function(){
					$("p").hide();
				});
			})
		//-->

3.2、toggle(fn1,,fn2,......fnN)方法用于模拟鼠标连续单击事件。当鼠标单击元素时，触发指定的第一个函数(fn1)；再次单击时，会触发指定的第二个函数(fn2)，如果有更多函数会依次触发。

		<!--
			$(function(){
				$("h5").toggle(function(){
					alert("this is fn1....");
				},function(){
					alert("this is fn2....");
				},function(){
					alert("this is fn3....");
				});
			})
		//-->

4、事件冒泡：首先看下面这段代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>jQuery第四章-事件冒泡</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 type="text/javascript" src="scripts/jquery-1.8.0.js">
		</script>
		<style type="text/css">
		*{margin:0;padding:0;}	
		body { font-size: 13px; line-height: 130%; padding: 60px; }
		#content { width: 220px; border: 1px solid #0050D0;background: #96E555 }
		span { width: 200px; margin: 10px; background: #666666; cursor: pointer;color:white;display:block;}
		p {width:200px;background:#888;color:white;height:16px;}
		</style>
		<script type="text/javascript">
		<!--
			$(function(){
				$('span').bind('click',function(){
					$txt = $('#msg').html() + '<p>内层span元素被单击</p>';
					$('#msg').html($txt);
				});
				
				$('#content').bind('click',function(){
					$txt = $('#msg').html() + '<p>外层div元素被单击</p>';
					$('#msg').html($txt);
				});
								
				$('body').bind('click',function(){
					$txt = $('#msg').html() + '<p>body元素被单击</p>';
					$('#msg').html($txt);
				});
			})
		//-->
		</script>
	</head>

	<body>
		<div id="content">
			外层div元素
			<span>内层span元素</span> 外层div元素
		</div>
		<div id="msg"></div>
	</body>
</html>

当我们用鼠标单击<span>元素时，会输出三条信息，这是因为单击内部<span>元素，会触发<div>和<body>元素上的click事件，这是有事件冒泡引起的。触发顺序依次是：<span>、<div>、<body>。

获取事件对象

$(element).bind('click',function(event){
   //do something......
}

停止事件冒泡

				$('span').bind('click',function(event){
					$txt = $('#msg').html() + '<p>内层span元素被单击</p>';
					$('#msg').html($txt);
					event.stopPropagation();	//阻止事件冒泡行为
				});