【第五章】jQuery中事件处理和动画效果2

最新推荐文章于 2022-03-20 23:13:21 发布

来颗溜溜莓

最新推荐文章于 2022-03-20 23:13:21 发布

阅读量178

点赞数

本文链接：https://blog.csdn.net/qq_45095748/article/details/102940758

版权

本文主要探讨jQuery中的事件处理，包括事件冒泡与事件捕获的概念，并讲解了如何在jQuery中方便地获取事件对象。同时，还涉及到了编写CSS样式以及事件对象的属性应用。

摘要由CSDN通过智能技术生成

事件冒泡与事件捕获

通过一个形象的元素结构，展示冒泡模

事件对象：是在不同浏览器中获取事件对象是比较困难的，在jQuery进行了处理，只要为函数添加一个参数即可。

编写CSS样式

<style>
			body{
               font-size: 12px;
			}
			.redBorder{   /*类样式*/
				border:1px solid red;
			}
			.test1{  /*div样式*/
				width: 240px;
				height: 150px;
				background-color: gold;
				text-align: center;
			}
			.test2{     /*p样式*/
				width: 160px;
				height: 100px;
				background-color: cornflowerblue;
				text-align: center;
				line-height: 20px;
				margin: 10px auto;
			}
			.test2 span{     /*span样式*/
				width: 80px;
				height: 40px;
				float: left;
				background-color:darkmagenta;
				margin-top: 25px;
				margin-left: 35px;
			}
			
			
		</style>

<body>
		<div class="test1">
			<b>div元素</b>
			<p class="test2">
				<b>p元素</b>
				<span>
					<b>span元素</b>
				</span>
			</p>
		</div>
	<script>
		$(document).ready(function(){
			  $(".test1").mousemove(function(event){
			     $(".test1").addClass("redBorder");
			    });
			  $(".test1").mouseout(function(){
			     $(".test1").removeClass("redBorder");
			    });	
			 $("p").mousemove(function(event){
			    $("p").addClass("redBorder");
			   });
			 $("p").mouseout(function(){
			    $("p").removeClass("redBorder");
			   });
			$("span").mousemove(function(event){
			   $("span").addClass("redBorder");
			  });
			$("span").mouseout(function(){
			   $("span").removeClass("redBorder");
			  });
		});
		</script>
	</body>

事件对象的属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>5-7事件对象属性</title>
		<script language="JavaScript" src="js/jquery-1.11.1.min.js"></script>y
	</head>
	<body>
		<div id="ediv" class="one">Event对象</div>
		<script>
			$(document).ready(function(){
				$("#ediv").mouseover(function(){
					alert("当前鼠标的位置是："+event.pageX+","+event.pageY);
				})
			});
		</script>
	</body>
</html>