（十二）Javaweb（jQury事件、事件冒泡、事件对象）

最新推荐文章于 2022-11-07 15:13:13 发布

weixin_48102099

最新推荐文章于 2022-11-07 15:13:13 发布

阅读量508

点赞数

分类专栏： javaweb

本文链接：https://blog.csdn.net/weixin_48102099/article/details/117260266

版权

javaweb 专栏收录该内容

30 篇文章 1 订阅

订阅专栏

1.jquery要先于js的页面加载
在这里插入图片描述
2.

在这里插入图片描述

移除一个
在这里插入图片描述
移除多个

在这里插入图片描述

在这里插入图片描述

js获取事件对象

jQuery获取事件对象

事件对象的作用

可以查看事假类型

在这里插入图片描述

在这里插入图片描述
通过事件判断不同的类型进而做出不同的行为

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			#samll{
				position:absolute;
				margin:auto;
				top: 200px;
				bottom 200px;
				left:0px;
				right: 0px;
				width:200px;
				height: 200Px;
			}
			#big{
				width:600px;
				height: 600Px;
			}
			.big{
				display: none;
			}
		</style>
		<script type="text/javascript">
			$(function(){
				$("#samll").bind("mouseover mouseout mousemove",function(event){
					if(event.type=="mouseover"){
						// 当是鼠标进入事件时，大图展示
						$("#div").show();
					}else if(event.type=="mouseout"){
						// 当是鼠标离开事件时，大图隐藏
						$("#div").hide();
					}else{
						$("div").offset({
							top: event.pageY+10,
							left:event.pageX+10
						});
					}
				});
			});
		</script>
	</head>
	
	 <body>
		 <img id="samll" src="明星.jpeg" >
		 
		 <div id="div">
		 	<img id="big" class="" src="明星.jpeg" >
		 </div>
    </body>
</html>