jQuery_事件处理

最新推荐文章于 2022-09-07 23:24:55 发布
最新推荐文章于 2022-09-07 23:24:55 发布
阅读量443 收藏
点赞数 1
分类专栏： web 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/williamfan21c/article/details/54301018
版权 

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		
		<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			
			//加载 DOM 的两种方式: jQuery 的 和 window.onlaod
			
			//$(document).ready(function(){}); -- $(function(){});
			$(function(){
				
			});
			
			/*
			window.onload = function(){
				alert("1");
			}
			
			window.onload = function(){
				alert("2");
			}
			*/
		
		</script>
		
	</head>
	<body>
		<p>你喜欢哪个城市?</p>
		<ul id="city">
			<li id="bj" name="BeiJing">北京</li>
			<li>上海</li>
			<li id="dj">东京</li>
			<li id="se">首尔</li>
		</ul>
		
		<br><br>
		<p>你喜欢哪款单机游戏?</p>
		<ul id="game">
			<li id="rl">红警</li>
			<li>实况</li>
			<li>极品飞车</li>
			<li>魔兽</li>
		</ul>
		
		<br><br>
		<p>你喜欢哪种开发语言?</p>
		<ul id="language">
			<li>C</li>
			<li>Java</li>
			<li>.NET</li>
			<li>PHP</li>
		</ul>
		
		<br><br>
		gender: 
			<input type="radio" name="gender" value="male"/>Male
			<input type="radio" name="gender" value="female"/>Female
	
		<br><br>
		name: <input type="text" name="username" value="hello"/>
		
	</body>
</html>

合成事件


•hover(): 模拟光标悬停事件. 当光标移动到元素上时, 会触发指定的第一个函数, 当光标移出这个元素时, 会触发指定的第二个函数.
•toggle(): 用于模拟鼠标连续单击事件. 第一次单击元素, 触发指定的第一个函数, 当再一次单击同一个元素时, 则触发指定的第二个函数, 如果有更多个函数, 则依次触发, 直到最后一个.
•toggle() 的另一个作用: 切换元素的可见状态. 
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<link href="css/style.css" type="text/css" rel="stylesheet" />
		<script type="text/javascript" src="scripts/jquery-1.7.2.js"></script>
	
		<script type="text/javascript">
			//为 .head 添加 Onclick 响应函数: 若 .content 隐藏则显示, 若 .content 显示, 则隐藏
			$(function(){
				/*
				$(".head").click(function(){
					//使用 is() 方法, 来判断某个给定的 jQuery 对象是否符合指定
					//的选择器. 
					var flag = $(".content").is(":hidden");
					
					if(flag){
						//show() 方法: 使隐藏的变为显示
						$(".content").show();
					}else{
						$(".content").hide();
					}
				});
				*/
				
				//bind: 为某 jQuery 对象绑定事件. 
				/*
				$(".head").bind("click", function(){
					//使用 is() 方法, 来判断某个给定的 jQuery 对象是否符合指定
					//的选择器. 
					var flag = $(".content").is(":hidden");
					
					if(flag){
						//show() 方法: 使隐藏的变为显示
						$(".content").show();
					}else{
						$(".content").hide();
					}
				});
				*/
				
				//mouseover: 鼠标移上去
				//mouseout: 鼠标移出. 
				/*
				$(".head").mouseover(function(){
					$(".content").show();
				}).mouseout(function(){
					$(".content").hide();
				});
				*/
				
				//合成事件: hover: 鼠标移上去执行第一个函数, 移出执行第二个函数. 
				/*
				$(".head").hover(function(){
					$(".content").show();
				}, function(){
					$(".content").hide();
				});
				*/
				
				//合成事件: toggle: 第一次点击执行第一个函数, 第二次点击执行第二个
				//函数 ... 循环执行. 
				$(".head").toggle(function(){
					$(".content").show();
				}, function(){
					$(".content").hide();
				});
			})
		</script>
	
	</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>

</html>


事件冒泡

•事件会按照 DOM层次结构像水泡一样不断向上只止顶端
•解决:在事件处理函数中返回 false,会对事件停止冒泡. 还可以停止元素的默认行为. 
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<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" src="../js/jquery-1.7.2.js"></script>
		<script type="text/javascript">
		
			$(function(){
				//事件的冒泡: 什么是事件的冒泡
				$("body").click(function(){
					alert("body click");
				});
				
				$("#content").click(function(){
					alert("div click");
				});
				
				$("span").click(function(){
					alert("span click");
					//如何解决事件的冒泡: 通过在响应函数的结尾返回 false, 可以阻止冒泡. 
					return false;
				});
			})
		
		</script>
	</head>
	<body>
		<div id="content">
			外层div元素
			<span>内层span元素</span>
			外层div元素
		</div>
		
		<div id="msg"></div>	
		
		<br><br>
		<a href="http://www.hao123.com">WWW.HAO123.COM</a>	
	</body>
</html>
事件对象的属性
•事件对象:当触发事件时,事件对象就被创建了.在程序中使用事件只需要为函数添加一个参数. 该事件对象只有事件处理函数才能访问到. 事件处理函数执行完毕后, 事件对象就被销毁了.
•event.pageX, event.pageY: 获取到光标相对于页面的x, y 坐标. 
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<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" src="js/jquery-1.7.2.js"></script>
		<script type="text/javascript">
		
			/*
			1. 事件: 当鼠标移动时, 就会触发 mousemove 事件. 
			2. 如何得到事件对象: 在响应函数中添加一个参数就可以. 
			3. 事件对象的两个属性: pageX,pageY
			*/
			$(function(){
				//事件的 pageX, pageY 属性
				$("body").mousemove(function(obj){
					$("#msg").text("x: " + obj.pageX 
							+ ", y: " + obj.pageY);
				});
			})
		
		</script>
	</head>
	<body>
		<div id="content">
			外层div元素
			<span>内层span元素</span>
			外层div元素
		</div>
		
		<div id="msg"></div>	
		
		<br><br>
		<a href="http://www.hao123.com">WWW.HAO123.COM</a>	
	</body>
</html>
移除事件
•移除某按钮上的所有 click 事件: $(“btn”).unbind(“click”)
•移除某按钮上的所有事件:$(“btn”).unbind();
•one(): 该方法可以为元素绑定处理函数. 当处理函数触发一次后, 立即被删除. 即在每个对象上, 事件处理函数只会被执行一次. 
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		
		<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			
			//测试移除事件: 使用 unbind 移除事件. 
			//one(): 只为某一个元素添加一次事件, 事件函数响应后, 将不再被触发响应. 
			$(function(){
				
				$("#rl").one("click", function(){
					alert("红色警戒. ");
				});
				
				$("li:not(#rl)").click(function(){
					alert(this.firstChild.nodeValue);
					
					//对于 #bj 节点, 点击一次后, 就没有 click 响应函数了
					if(this.id == "bj")
						$("#bj").unbind("click");
				});
				
			})
			
		
		</script>
		
	</head>
	<body>
		<p>你喜欢哪个城市?</p>
		<ul id="city">
			<li id="bj" name="BeiJing">北京</li>
			<li>上海</li>
			<li id="dj">东京</li>
			<li id="se">首尔</li>
		</ul>
		
		<br><br>
		<p>你喜欢哪款单机游戏?</p>
		<ul id="game">
			<li id="rl">红警</li>
			<li>实况</li>
			<li>极品飞车</li>
			<li>魔兽</li>
		</ul>
		
		<br><br>
		<p>你喜欢哪种开发语言?</p>
		<ul id="language">
			<li>C</li>
			<li>Java</li>
			<li>.NET</li>
			<li>PHP</li>
		</ul>
		
		<br><br>
		gender: 
			<input type="radio" name="gender" value="male"/>Male
			<input type="radio" name="gender" value="female"/>Female
	
		<br><br>
		name: <input type="text" name="username" value="hello"/>
		
	</body>
</html>








_noname
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery操作元素、事件处理
weixin_61561066的博客
07-24 885
jQuery操作元素、事件处理
jQuery事件处理
weixin_62343228的博客
04-08 943
jQuery的事件处理和动画效果
JQuery系列之事件
老__L的博客
09-07 370
在选择元素上绑定一个或多个事件的事件处理函数。on()方法绑定事件处理程序到当前选定的JQuery对象中的元素。在JQuery 1.7中，.on()方法 提供绑定事件处理程序所需的所有功能。在选择元素上移除一个或多个事件的事件处理函数。off() 方法移除用.on()绑定的事件处理程序。特定的事件处理程序可以被移除元素上提供事件的名称，命名空间，选择器，或处理函数名称的组合。当有多个过滤参数，所提供的参数都必须匹配的事件处理程序被删除。如果一个简单的事件名称，比如提供"click"
jQuery的事件处理
Han_Zhou_Z的博客
01-08 779
目录 一、jQuery的事件处理 1、页面载入事件 2、事件绑定（bind） 3、反绑定事件（unbind） 4、一次性事件绑定（one） 5、模拟鼠标悬停（hover） 一、jQuery的事件处理 1、页面载入事件 $(document).ready() --- onload 2、事件绑定（bind） bind(type,[data],fn) type：表示事件类型(click、mouseover、mouseout...) [data]：可选参数,表示传递给事件对象的额外数据
jQuery 事件
苦涩
05-05 310
jQuery事件页面载入事件鼠标事件 页面载入事件 ready()：文档就绪事件（当HTML文档就绪时解析jQuery） 鼠标事件 click()：触发或将函数绑定到指定元素的click事件 dblclick()：当双击元素时，会发生dblclick事件 mousedown()/mouseup()：鼠标按下或松开事件 mouseover()/mouseout()：鼠标移入或移出事件 ...
深入理解jQuery 事件处理
10-22
下面小编就为大家带来一篇深入理解jQuery 事件处理。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
jquery_jquery_
09-30
总结来说，jQuery作为一款强大的JavaScript库，通过其简洁的API、强大的DOM操作、事件处理、动画效果以及Ajax功能，极大地提升了Web开发的效率和质量。无论是初学者还是经验丰富的开发者，jQuery都是一款值得信赖的...
jQuery_lazyload
01-07
jQuery_lazyload是一个非常实用的JavaScript库，用于优化网页性能，特别是在处理大量图片或者内容时。这个插件的主要目的是延迟加载，即在用户滚动到页面的特定部分时才加载那些可视区域以外的内容，从而减少初次...
jquery_api.rar_JQuery_api_javascript_jquery
09-19
jQuery 是一个广泛使用的 JavaScript 库，它简化了网页的DOM操作、事件处理、动画设计以及Ajax交互。这个“jquery_api.rar”压缩包包含了一份详细的jQuery API参考文档（jquery_api.chm）以及可能的资源链接...
浅谈jquery事件处理
10-24
主要简单介绍了jquery事件处理，十分的实用，有需要的小伙伴可以参考下。
jQuery事件处理概述
橘猫吃不胖的博客
01-09 1035
jQuery事件1 概述2 页面载入完毕响应事件2.1 window.onload2.2 $(document).ready()事件3 绑定与反绑定事件监听器3.1 概述3.2 绑定事件3.3 jQuery事件处理函数的好处3.4 反绑定事件3.5 一次性的事件绑定4 事件触发器4.1 trigger触发事件4.2 triggerHandler触发事件4.3 Event Helpers快捷事件5 事件的交互处理5.1 hover：模仿鼠标悬停6 事件对象6.1 使用jQuery事件对象6.2 Javascr
JQuery事件处理
zam183的博客
06-19 766
04-jQuery(二)
仰望与追逐的博客
07-06 239
04-jQuery1、jQuery的属性操作2、jQuery练习全选，全不选，反选4、DOM的增删改5、jQuery练习二从左到右，从右到左练习动态添加、删除表格记录6、CSS 样式操作7、jQuery 动画练习 CSS_动画 品牌展示8、jQuery 事件操作文档加载事件绑定事件移除事件的冒泡javaScript 事件对象练习 图片跟随 1、jQuery的属性操作 html() 它可以设置和获取起始标签和结束标签中的内容。 跟 dom 属性 innerHTML 一样。 text() 它可以设置和获
JavaScript DOM编程 学习笔记-两个小示例
weixin_34293141的博客
10-15 58
<!doctypehtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>Document</title> <scripttype="text/javascript"> window.onload=function()...
jQuery_创建节点及插入节点
热门推荐
Anonymous
01-09 2万+
•创建节点:使用 jQuery 的工厂函数$(): $(html); 会根据传入的html 标记字符串创建一个DOM 对象, 并把这个DOM 对象包装成一个jQuery对象返回. •注意: –动态创建的新元素节点不会被自动添加到文档中,而是需要使用其他方法将其插入到文档中; –当创建单个元素时,需注意闭合标签和使用标准的 XHTML 格式.例如创建一个元素,可以使用 $(“”)或 $(“
jQuery常用事件处理方法
最新发布
05-24
以下是 jQuery 常用的事件处理方法： 1. click()：当元素被点击时触发。 2. dblclick()：当元素被双击时触发。 3. focus()：当元素获得焦点时触发。 4. blur()：当元素失去焦点时触发。 5. mouseover()：当鼠标...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值