Jquery中的事件与动画

北染星辰

已于 2024-02-28 16:22:17 修改

阅读量343

点赞数 8

分类专栏： Web前端文章标签： javascript html5 jquery

于 2024-02-26 21:56:25 首次发布

本文链接：https://blog.csdn.net/zhoutong2323/article/details/136307461

版权

Web前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

文章目录

目录

文章目录

本章目标

一.Jquery事件概述

二.基础事件

鼠标事件

键盘事件

绑定事件

三.复合事件

hover()方法

toggle()方法

四.Jquery动画效果

编辑淡入或淡出

滑动效果

改变尺寸

旋转效果

跳动效果

链式动画效果

自定义动画效果

本章目标

使用常用简单事件制作网页特效
使用鼠标事件制作主导航特效
使用hover()方法制作下拉菜单特效
使用鼠标事件及动画制作页面特效

一.Jquery事件概述

二.基础事件

鼠标事件

演示案例：

鼠标停留在某个标签上时改变背景颜色，如下图。

拓展：

innerHTML是JavaScript中一个常用的属性，它可以用来获取或设置指定元素的HTML内容。

当我们使用innerHTML来获取元素的HTML内容时，它会返回该元素包含的所有HTML标签和文本。而在Jquery中通常使用如下代码来替代innerHTML在JS中实现的功能

#JS中innerHTML的应用
var myDiv = document.getElementById("myDiv");
myDiv.innerHTML = "<h2>Hello World!</h2>";

#innerHTML在JQ中的语法
var myDiv = document.getElementById("myDiv");
myDiv.html() = "<h2>Hello World!</h2>";

上述代码会在页面上找到id为myDiv的元素，并使用innerHTML属性将其内容替换为<h2>Hello World!</h2>。结果会在页面上显示一个标题为Hello World的h2元素。

键盘事件

演示案例：

在密码框中按下键盘显示出"按下"，释放按键显示“弹起”；

	<script src="jq/jquery-3.7.1.js"></script>
		<script type="text/javascript">
			$(function(){
				//针对密码框使用键盘函数进行相应操作
				$("#password").keydown(function(e){
					//使用append函数追加内容
					$("#events").append("按下");
				}).keyup(function(){
					$("#events").append("弹起");
				}).keypress(function(){
					$("enents").append("按到了有字符的按钮");
				});
			});
			
			$(document).keydown(function(event){
				//使用keycode属性输出键盘输入字母的键盘码,esc键盘码=27
				if(event.keyCode == "27"){
					//confirm函数用于显示一个确认/取消的对话框并根据结果返回布尔值true/false
					var flag = window.confirm("确认要退出了嘛？")
					if(flag == true){
						window.close();
					}.else{
						window.alert("没事儿别乱点");
					}
				}
			});
		</script>

绑定事件

HTML代码

<button id="myButton">Click Me</button>

JS代码

$(document).ready(function(){
    $('#myButton').bind('click', function(){
        alert('Button clicked!');
    });
});

上面的代码中，我们使用bind函数给id为myButton的按钮绑定了一个点击事件处理函数。当按钮被点击时，会弹出一个提示框显示"Button clicked!"。

三.复合事件

hover()方法

演示案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
		<style type="text/css">
			#box {
			  width: 200px;
			  height: 200px;
			  background-color: blue;
			  color: white;
			  text-align: center;
			  line-height: 200px;
			  cursor: pointer;
			}
		</style>
		<script src="jq/jquery-3.7.1.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
			  $("#box").hover(
				//鼠标移入时触发函数
			    function() {
			      $(this).css("background-color", "red");
				  //使用text函数对JQ对象“"#box”传入参数Hovering参
			      $(this).text("Hovering");
			    },
				//鼠标移除时触发函数
			    function() {
			      $(this).css("background-color", "blue");
			      $(this).text("Hover over me");
			    }
			  );
			});
		</script>
	<body>
		<div id="box">Hover over me</div>
	</body>
</html>

以上代码中，当鼠标悬停在#box元素上时，会将它的背景颜色改为红色，并将文本内容改为"Hovering"。当鼠标离开时，背景颜色和文本内容都会恢复为初始值。

toggle()方法

演示案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button id="toggleButton">切换元素</button>
		<div id="toggleDiv" style="display: none;">
		    这是要切换的元素
		</div>
		<script src="jq/jquery-3.7.1.js"></script>
		<script type="text/javascript">
			$(function(){
				//toggle函数模拟鼠标连续点击用于切换背景颜色
				$("#toggleButton").toggle(
					function(){$("body").css("background-color","red")},
					function(){$("body").css("background-color","yellow")},
					function(){$("body").css("background-color","green")}
				);
			});
		</script>
	</body>
</html>

toggle函数模拟click函数即鼠标连续点击用于切换背景颜色。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button id="toggleButton">切换元素</button>
		<div id="toggleDiv" style="display: none;">
		    这是要切换的元素
		</div>
		<script src="jq/jquery-3.7.1.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
			    $("#toggleButton").click(function(){
			        $("#toggleDiv").toggle();
			    });
			});
		</script>
	</body>
</html>

在这个示例中，当按钮被点击时，toggle()函数会被调用，然后切换id为toggleDiv的元素的可见状态。初始状态下，toggleDiv是隐藏的，点击按钮后，它会显示出来；再次点击按钮，它又会隐藏起来。

四.Jquery动画效果

控制元素显示与隐藏
改变元素透明度
改变元素高度

淡入或淡出

//2s淡出
$("#element").fadeIn(2000);
$("#element").fadeOut(4000);

滑动效果

$("#element").slideUp();
$("#element").slideDown();

改变尺寸

$("#element").animate({
  width: "300px",
  height: "200px"
});

旋转效果

$("#element").animate({
  rotate: "180deg"
});

跳动效果

$("#element").animate({
  top: "+=50px"
}, 500).animate({
  top: "-=50px"
}, 500);

链式动画效果

$("#element").hide().slideDown().delay(2000).fadeOut();

自定义动画效果

$.fn.myAnimation = function() {
  $(this).animate({
    opacity: 0.5,
    left: "+=50px"
  }, 1000);
};

$("#element").myAnimation();

总结

北染星辰

关注

8
点赞
踩
11

收藏

觉得还不错? 一键收藏
打赏
0
评论
Jquery中的事件与动画

鼠标停留在某个标签上时改变背景颜色，如下图。innerHTML是JavaScript中一个常用的属性，它可以用来获取或设置指定元素的HTML内容。当我们使用innerHTML来获取元素的HTML内容时，它会返回该元素包含的所有HTML标签和文本。而在Jquery中通常使用如下代码来替代innerHTML在JS中实现的功能#JS中innerHTML的应用";#innerHTML在JQ中的语法";
复制链接

扫一扫