jQuery04-事件-动画

最新推荐文章于 2023-12-25 11:47:11 发布
最新推荐文章于 2023-12-25 11:47:11 发布
阅读量1.4k 收藏
点赞数
文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_67140851/article/details/124353892
版权

jQuery04-事件-动画

1 思维导图

在这里插入图片描述

2 案例1：绑定事件的两种方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
		<script type="text/javascript">

    $(function(){
		//1.通过两种方式给div添加鼠标点击事件.
		// $("#da").click(function(){
		// 	alert("div被点击了！")
		// })

	    // $("#da").on("click",function(){alert("div被点击")})
	    // $("#da").bind("click",function(){alert("div被点击")})

//	2.通过两种方式给div添加鼠标进入事件.
        // $("#da").mouseenter(function(){
        // 	alert("鼠标进入！")
        // });

        // $("#da").on("mouseenter",function(){alert("鼠标进入！")})

        // $("#da").bind("mouseenter",function(){alert("鼠标进入！")})

//	3.通过两种方式给div添加鼠标离开事件.
        // $("#da").mouseleave(function(){
        // 	alert("鼠标离开！")
        // });

        // $("#da").on("mouseleave",function(){alert("鼠标离开")})

        // $("#da").bind("mouseleave",function(){alert("鼠标离开")})
})
		</script>
	</head>
	<body>
		<div id="da" style="background-color:pink;width: 200px;height: 100px;">
		</div>
	</body>
</html>

3 案例2：合成事件（事件切换）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
		</head>
    <body>
		<div id="da" style="background-color:peachpuff;width: 200px;height: 100px;">

		</div>
		<img src="img/1.jpg" id="ia" style="width: 500px;height: 100px;"/>

	</body>
		<script type="text/javascript">

		// js方式
		// var a = document.getElementById("#da");
		// a.style.display = "none"

		$(function(){
			//hover:鼠标悬停合成事件
			//给div添加鼠标悬停合成事件:打印内容
			// $("#da").hover(function(){console.info("鼠标进去")},function(){console.info("鼠标出去")});
			//给div添加鼠标悬停合成事件:显示和隐藏图片(图片一开始处于隐藏状态).
			// $("#da").hover(function(){$("#ia").hide()},function(){$("#ia").show()});
			//toggle：鼠标点击合成事件.
			//给div添加鼠标点击合成事件：显示和隐藏图片(图片一开始处于隐藏状态).
			// $("#da").toggle(function(){$("#ia").hide()},function(){$("#ia").show()});
		})

		</script>
	
	
</html>

4 案例3：事件传播(事件冒泡)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">

		$(function(){
	//给span添加鼠标点击事件.
	$("#sa").click(function(){
		console.info("span被点击了");
		//点击span，事件传播截止到span.
		return false;
		})

	//给div添加鼠标点击事件.
	$("#da").click(function(){
		console.info("div被点击了");
		//点击span，事件传播截止到div.
		return false;
	})

	//给body添加鼠标点击事件.
	$("body").click(function(){
		console.info("body被点击了");
	})

		})

		</script>
	</head>
	<body>
		<div id="da" style="background-color: aqua;width: 200px;height: 100px;">
			<br />
			<center>
				<span id="sa" style="background-color:coral;">span标签</span>
			<center />
		</div>
	</body>
</html>

5 案例4：移除事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
		<script>
		$(function(){
//给按钮添加鼠标点击事件，且只能点击一次。
 // $("#sb").click(function(){
	//  console.info("鼠标点击")
	//  $("#sb").unbind("click")
	//  $("#sb").off("click")
 // })

// 给i按钮添加鼠标点击事件,且只能偶数次点击才有效,奇数次则失效.
//方式一：
// var i = 1;
// $("#sb").click(function(){
// 	if(i%2==0){
// 		console.info("鼠标点击")
// 	}
// 	i++;
// })

//.方式二
// $("#sb").toggle(function(){ $("#sb").unbind("click")},function(){console.info("鼠标点击")})
// 给按钮添加鼠标点击事件，且只能点击一次,通过函数one来完成.	
$("#sb").one("click",function(){
	console.info("鼠标点击")
  })
		})

		</script>
	</head>
	<body>
		<input type="button" id="sb" value="sss" />
	</body>
</html>

6 案例5：动画-基本动画

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-1.7.2.js"></script>
		<script type="text/javascript">
		$(function(){
		//给隐藏按钮添加事件：使div在规定的时间内消失。
		// $("#hide").click(function(){
		// 	$("#da").hide(1000);
		// })

		//给显示按钮添加事件：使div在规定的时间内显示。
		// $("#hide").click(function(){
		// 	$("#da").show(1000);
		// })

		//给显示/隐藏按钮添加事件：使div在规定的时间内显示和隐藏。
		// $("#toggle").toggle(function(){$("#da").hide(1000)},function(){$("#da").show(1000)})

		//给隐藏按钮添加事件：使div在规定的时间内隐藏，并且显示图片ia。
		// $("#hide").click(function(){$("#da").hide(1000),$("#ia").show(1000)})
		})

		</script>
	</head>
	<body>
		<input type="button" value="显示" id="show" />
		<input type="button" value="隐藏" id="hide" />
		<input type="button" value="显示/隐藏" id="toggle" />
		<div id="da" style="background-color: deeppink; width: 200px; height: 100px;">
</div><br />
		<img src="img/微信图片_20220421162227.jpg" id="ia" width="100px"height="100px"style="display: none;"/>
	</body>
</html>

7 案例6：动画-滑动动画

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
		<script type="text/javascript">

		$(function(){
	//给显示按钮添加鼠标点击事件：使div在指定时间内向下显示.
	$("#show").click(function(){
		$("#da").slideDown(5000);
	})

	//给隐藏按钮添加鼠标点击事件：使div在指定时间内向下隐藏.
	$("#hide").click(function(){
		$("#da").slideUp(5000);
	})

	//给显示/隐藏按钮添加鼠标点击事件：使div在指定时间内向下显示和向下隐藏.	
			$("#toggle").toggle(function(){$("#da").slideUp(3000)},function(){$("#da").slideDown(3000)})
			})

		</script>
		
		
	</head>
	<body>
		<input type="button" value="显示(向下)" id="show" />
		<input type="button" value="隐藏(向上)" id="hide" />
		<input type="button" value="显示/隐藏" id="toggle" />
		<div id="da" style="background-color: pink; width: 240px; height: 500px;">
		</div>
	</body>
</html>

8 案例7：动画-淡入淡出动画

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
		<script type="text/javascript">
		$(function(){
			// 显示(淡入)
			$("#show").click(function(){
				$("#da").fadeIn(1000);
			})
			// 隐藏(淡出)
			$("#hide").click(function(){
				$("#da").fadeOut(1000);
			})
			// 显示/隐藏
			$("#toggle").toggle(function(){$("#da").fadeOut(1000)},function(){$("#da").fadeIn(1000)})
		})
				
		</script>
	</head>
	<body>
		<input type="button" value="淡入" id="show" />
		<input type="button" value="淡出" id="hide" />
		<input type="button" value="淡入/淡出" id="toggle" />
		<div id="da" style="background-color: coral; width: 240px; height: 500px;">
		</div>
	</body>
</html>

9 案例8：动画-自定义动画

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
		<script type="text/javascript">

			$(function(){
				// 放大
				$("#big").click(function(){
					$("#da").animate({
						width:500 +"px",
						height:500 +"px"
					},1000)
				})

				// 缩小
				$("#small").click(function(){
					$("#da").animate({
						width:300+"px",
						height:300+"px"
					},2000)
				})

				// 往右移动
				$("#right").click(function(){
					$("#da").animate({
						left:500+"px",
					},2000)
				})

				// 往左移动
				$("#left").click(function(){
					$("#da").animate({
						left:300+"px",
					},2000)
				})

				// 往下移动
				$("#down").click(function(){
					$("#da").animate({
						top:300+"px",
					},2000)
				})
				// 往上移动
				$("#up").click(function(){
					$("#da").animate({
						top:200+"px"
					},2000)
				})

				// 斜下右移动
				$("#xxy").click(function(){
					$("#da").animate({
						top:300+"px",
						right:300+"px"
					},2000)
				})

				// 斜上左移动
				$("#xsz").click(function(){
					$("#da").animate({
						top:100+"px",
						left:100+"px"
					},2000)
				})
			});
		</script>
	</head>
	<body>
		<input type="button" value="上移" id="up" />
		<input type="button" value="下移" id="down" />
		<input type="button" value="右移" id="right" />
		<input type="button" value="左移" id="left" />
		<input type="button" value="放大" id="big" />
		<input type="button" value="缩小" id="small" />
		<input type="button" value="斜下右" id="xxy" />
		<input type="button" value="斜上左" id="xsz" />
		<div id="da" style="background-color: pink; width: 100px; height: 100px;position: absolute;">
	</body>
</html>
m0_67140851
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery动画--字母消除游戏
lu__lala的博客
10-28 2576
1.实现点击开始游戏后网页随机生成带有背景颜色的字母 2.按下键盘上的字母，网页中与之匹配的字母下落消失 3.字母成功消失后分数累加 如下： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>字母消除游戏</title> <script src="js/jquery.js"></...
09-jQuery-动画-显示和隐藏元素
记录java学习日常~
05-24 2599
在 show() 方法中传入了动画时长 1000 毫秒和完成后的回调函数，表示需要在 1000 毫秒内以默认缓动类型将元素显示出来，动画完成后执行回调函数。在 slideUp() 方法中传入了动画时长 1000 毫秒和完成后的回调函数，表示需要在 1000 毫秒内以默认缓动类型将元素收缩，动画完成后执行回调函数。在 hide() 方法中传入了动画时长 1000 毫秒和完成后的回调函数，表示需要在 1000 毫秒内以默认缓动类型隐藏元素，动画完成后执行回调函数。
jQuery-04 (事件&动画)
m0_63579794的博客
03-12 1667
jQuery-04
jQuery-动画停顿循环执行
qq_39111074的博客
01-24 725
一个动画效果，执行完后，停顿一段时间，然后又开始执行，重复循环 步骤1： @keyframes先定义好动画： @-webkit-keyframes diamond { 50% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } } @keyframes diamond { 50% { -webkit-transform: translateY(-10px); transfo
jQuery04(事件&动画)
yifei_345678的博客
03-19 1089
目录 事件 常用的基本事件 加载DOM的两种方式 jquery事件基本介绍 ​绑定事件的两种方式 合成事件/事件切换 事件传播/事件冒泡 事件坐标 移除事件 动画 基本动画 滑动动画 自定义动画 事件 常用的基本事件 点击事件： onclick 鼠标： onmouseover移入 onmouseout移出 onmousemove移动 键盘 ：onkeydown按下 onkeyup松开 onkeypress按下后松开...
jQuery的事件-动画-AJAX和插件
Welisit的博客
12-25 1411
Web页面经常需要和用户之间进行交互，而交互的过程中我们可能想要捕捉这个交互的过程：原生事件监听方法：jQuery事件监听方法： 2.click和on的区别 click和on的区别： 3.click和on中this指向 click和on的this指向： 4.jQuery的事件冒泡 我们会发现默认情况下事件是从最内层（如下图span）向外依次传递的顺序，这个顺序我们称之为事件冒泡（Event Bubble）;事实上，还有另外一种监听事件流的方式就是从外层到内层（如：body -> span），这种称之为事件捕
jQuery--下载方法
IT利刃出鞘的博客
10-29 1398
下载 其他网址 jquery下载所有版本（实时更新）jQuery 所有版本的 CDN 和下载地址（实时更新）-歪脖网jQuery下载和安装详细教程_柯晓楠-CSDN博客 简介 jquery-2.0以上版本不再支持IE 6/7/8。 下载地址 国内第三方（很快）：https://www.jq22.com/jquery/jquery-3.5.1.zip 官网（很慢）：https://jquery.com/ CDN网址 国内（速度快） 字节跳动：https://s3.pstatp
JQuery 动画和事件
m0_65725031的博客
03-22 1608
今天是JQuery的第四节课啦，今天主要讲JQuery的动画和事件,大家有不懂的在下方评论或者私信，也希望和小编一样在长沙的家人们，做好防疫措施，出门带好口罩，能不出门尽量不出门，不给国家添麻烦。好啦我们要开始今天的课程啦，大家有不懂的在下方评论或者私信小编噢，看到一定会回复的。 目录 一.事件 1.window.onload():窗口加载事件 2. on("事件",function (){})：绑定事件 3.hover() : 鼠标悬停合成事件 4.toggle（）：...
jQuery04（事件&动画）
weixin_67465673的博客
03-22 1442
jQuery第四课(事件&动画） 笔记: 一、事件 1.加载DOM两种方式（区别）. ①、js 执行方式:不可以写多个，多个就被覆盖 ②、jQuery 执行方式：可以写多个，并且都会被执行 ---注意：它们的执行顺序是跟版本有关的 ①、高级版本3.x以后的版本js快 window.onload=function(){ console.info("js方式1"); } window.onload=function(...
jQuery 效果- 动画
12-14
jQuery 效果- 动画 jQuery animate() 方法允许您创建自定义的动画。 jQuery 动画实例jQuery jQuery 动画 – animate() 方法 jQuery animate() 方法用于创建自定义动画。 语法： $(selector).animate({params},...
jquery-ui-1.10.4.custom
03-07
jQuery UI 则是在jQuery 基础上开发的一套界面工具，几乎包括了网页上你所能想到和用到的插件以及动画特效。
jQuery - 3.6.0
05-04
它使HTML文档遍历和操作，事件处理，动画和Ajax等功能变得更加简单，它具有易于使用的API，可跨多种浏览器运行。凭借多功能性和可扩展性的结合，jQuery改变了数百万人编写JavaScript的方式 本资源包含jQuery-3.6.0...
jQuery插件-实现HTML5微信红包抽奖红包雨特效动画js效果.rar
06-23
jQuery插件-实现HTML5微信红包抽奖红包雨特效动画js效果.rar jQuery插件-实现HTML5微信红包抽奖红包雨特效动画js效果.rar jQuery插件-实现HTML5微信红包抽奖红包雨特效动画js效果.rar jQuery插件-实现HTML5微信红包...
jquery-spriteanimator:jQuery spriteAnimator插件
05-16
使用此jQuery插件创建精美的Sprite动画 演示的： 另请查看 ，它是一个完全基于此库的动画网站。 来源可以在找到 简单循环动画示例 在页面上定义一个html标签，并为其指定一个精灵表作为背景图像。 然后将...
基于qt5+KDchart开发的任务计划甘特图
最新发布
06-24
基于qt5+KDchart开发的任务计划甘特图 1。可以根据任务类型、开始时间、结束时间展示任务执行长度。 2.可以动态编辑任务调整时间； 3.支持年、月、日、小时等时间缩放显示。
NAPI篇4-NAPI应用点亮一个LED
06-23
NAPI篇4-NAPI应用点亮一个LED
iging.zip_kriging 优化_优化kriging_克里金 matlab_普通克里金
06-23
iging.zip_kriging 优化_优化kriging_克里金 matlab_普通克里金_遗传算法克里金模型 改进的粒子群优化克里金模型，普通的克里金模型MATLAB数据包与遗传算法的结合2
服务器运维工具-日志收集-logCollect-Linux.zip
06-23
本工具为服务器运维工具，通过Linux系统带内运行，支持主流Linux系统下收集服务器BIOS、黑盒日志、bmc、cpu、disk所有服务器系统组件信息收集及日志收集，欢迎下载使用！
jquery Access-Control-Allow-Origin 配置
03-26
jQuery是一个流行的JavaScript库，用于简化HTML文档遍历、事件处理、动画效果和Ajax等操作。而Access-Control-Allow-Origin是一个HTTP头部字段，用于指定哪些源站点有权限访问服务器资源。 在jQuery中，如果你使用...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值