jQuery处理事件与实现动画效果的演示

路过的灭法

于 2023-05-23 11:21:18 发布

阅读量161

点赞数

文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/weixin_68946227/article/details/130823400

版权

jQuery处理事件：

想要完成jQuery的处理事件我们可以使用jQuery的事件处理函数来为HTML元素添加事件，并在事件发生时执行相应的操作。

下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
	<title>jQuery入门练习</title>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
	<h1>Hello, jQuery!</h1>
	<p>This is a paragraph.</p>
	<button>Click me</button>

	<script>
		// 为h1元素添加鼠标移入事件
		$("h1").mouseover(function() {
			$(this).css("color", "blue");
		});

		// 为p元素添加鼠标移出事件
		$("p").mouseout(function() {
			$(this).css("color", "green");
		});

		// 为button元素添加鼠标点击事件
		$("button").click(function() {
			$("p").toggle();
		});
	</script>
</body>
</html>

在上面的代码中，我们使用了三个jQuery事件处理函数来为h1、p和button元素添加了不同的事件。我们可以看到，使用jQuery来处理事件同样非常简单，而且非常灵活。

jQuery动画效果演示：

想要实现jQuery动画效果。我们可以使用jQuery的动画函数来为HTML元素添加动画效果，比如淡入淡出、滑动等等。

下面是一个示例代码

<!DOCTYPE html>
<html>
<head>
	<title>jQuery入门练习</title>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
	<h1>Hello, jQuery!</h1>
	<p>This is a paragraph.</p>
	<button>Click me</button>

	<script>
		// 为h1元素添加淡入淡出效果
		$("h1").fadeOut(2000).fadeIn(2000);

		// 为p元素添加滑动效果
		$("p").slideUp().slideDown();

		// 为button元素添加动画效果
		$("button").click(function() {
			$("p").animate({fontSize: "24px"}, 2000);
		});
	</script>
</body>
</html>

在上面的代码中，我们使用了三个jQuery动画函数来为h1、p和button元素添加了不同的动画效果。我们可以看到，使用jQuery来实现动画效果同样非常简单，而且非常流畅。