jQuery的事件&动画效果

歐陽。

已于 2022-03-20 23:16:05 修改

阅读量1k

点赞数 8

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

于 2022-03-20 23:13:21 首次发布

本文链接：https://blog.csdn.net/weixin_65211978/article/details/123622023

版权

jQuery 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

大家好，我是小陽，今天我给各位带来了jQuery的事件and动画效果，希望能给个位看官带上一些帮助!

一、思维导图

二、jQuery的事件

三、jQuery的动画

一、思维导图

看官们先来看看这期内容的思维导图理清一下思路，再通过我这篇文章加深并理解代码

ok，我们现在进入今日学习主题，今日主要学习的是jQuery的事件和动画

这是今日学习所需要的案例代码：

	< <head>
		<meta charset="utf-8">
		<style type="text/css">
			#aa {
				width: 200px;
				height: 200px;
				background-color: aqua;
				position: absolute;/* 绝对定位 */
				top: 50px;
				left: 50px;
			}
			p {
				text-align: center;
				/* 水平居中 */
				background-color: cornflowerblue;
			}
		</style>

		</head>
		<body>
			<button id="bbb">变变变</button>
			<button id=xx>显示[展开](淡入)</button>
			<button id=yy>隐藏[收缩](淡出)</button>
			<button id=zz>显示/隐藏[展开/收缩](淡入/淡出)</button>
			<button id="btn">点我试试</button>
			<a style="text-decoration: none;" href="#">显示</a>
			<div id="aa">
				<br />
				<br />
				<p>这是一巴掌</p>
			</div>
		</body>

二、jQuery的事件

一、加载DOM的两种方式:

加载DOM的两种方式以及二者之间的区别：

window.onload方式

jQuery方式

1.1 window.onload方式：

	<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">
			//1.1 加载DOM两种方式(区别)
			 window.onload=function(){
				console.info("js方式1");
			}
			window.onload=function(){
				console.info("js方式2");
			}
			window.onload=function(){
				console.info("js方式3");
			}
		</script>
	</head>

1.2 jQuery方式：

	<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">
			//1.1 加载DOM两种方式(区别)

			 $(function(){
				console.info("jQuery方式1")
			})
			$(function(){
				console.info("jQuery方式2")
			})
			$(function(){
				console.info("jQuery方式3")
			})
		</script>
	</head>

注意：

一、引入js类库的版本区别：

window.onload 3.3版本js比jQuery要快 $(function() 1.7版本jQuery比js快而3.3版本js比jQuery要快

二、多个window.onload方式和多个jQuery方式时的区别：

不能写多个window.onload，多个window.onload时会被覆盖

可以写多个jQuery，多个jQuery方式不会被覆盖并且都会执行

二、绑定事件两种方式

方式一：元素.on/bind("事件名",function(){})

方式二：元素.事件名(function(){})

方式一：元素.on/bind("事件名",function(){})

	< <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() {
			    //1.2 绑定事件的两种方式 [eg.:点击、悬停事件等等]
			    //--元素.on/bind()
			        $("#aa").on("click", function() {
				    alert("heihei")
			    })
            })
			//bind 也行
			$("#aa").bind("mousemove", function() { //鼠标移上事件
				alert("aaa");
			})
		</script>
		</head>

方式二：元素.事件名(function(){})

	< <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() {
			    //1.2 绑定事件的两种方式 [eg.:点击、悬停事件等等]
			    //--元素.事件名
			    $("#aa").click(function() {
				    alert("Hilo");
		    	})
            })    
		</script>
		</head>

注意：在jQuery1.7版本以前没有on

三、合成事件/事件切换:

hover()：鼠标悬停合成事件
toggle()：鼠标点击合成事件

3.1 hover()：鼠标悬停合成事件:

<script type="text/javascript">
			$(function() {
				//1.3 合成事件/事件切换
				//--hover()悬停控制元素[div]的显示和隐藏
				$("#aa").hide(); //隐藏
				$("a").hover(function() { //鼠标移上
					$("#aa").show(); //显示
				}, function() {
					$("#aa").hide(); //隐藏
				})
			})
		</script>

3.2 toggle()：鼠标点击合成事件:

		<script type="text/javascript">
			$(function() {
				//1.3 合成事件/事件切换
				/--toggle()点击控制元素[div]的显示和隐藏
				$("#aa").hide();//隐藏
				$("a").toggle(function(){//点击一下
					$("#aa").show();//显示
					},function(){//再点一下
					$("#aa").hide();//隐藏
				}) 
			})
		</script>

注意：[版本问题] toggle在1.9版本后之后变成了动画效果

四、事件传播（事件冒泡）

传播：小-->中-->大
阻止传播：事件后面加上 return false

		<script type="text/javascript">
			$(function() {
				//1.4 事件的传播(事件冒泡) 小p->中div->大body 由小到大传播
				//分别添加点击事件
				$("p").click(function(){
					console.info("p被打了");
				})
				$("div").click(function(){
					console.info("div被打了");
					return false;//阻止传播
				})
				$("body").click(function(){
					console.info("body被打了");
				})
			})
		</script>

注意：可以用return false 来阻断传播

五、事件坐标：[了解即可 pageX,pageY]

offsetX：当前元素左上角

clientX：窗口左上角

pageX：网页左上角

5.1 事件event的坐标：

		<script type="text/javascript">
			$(function() {
			//1.5 事件event的坐标[了解即可 pageX,pageY]
			$("#aa").click(function(e){
				console.info(e.pageX,e.pageY);//x,y坐标
			})
			})
		</script>

六、移除事件

元素.unbind("事件名")

6.1 设定按钮只能点击一次方法一：

			$("#btn").on("click",function(){
				//做一系列事情
				console.info(44944);
				//将点击事件进行移除
				$("#btn").off("click");//unbind()
				//将按钮禁用
				$("#btn").attr("disabled",true);
			})

方法二：

		<script type="text/javascript">
			$(function() {
			//1.6 事件的移除
			//--按钮只能点击一次[2]
			//一次
			$("#btn").one("click",function(){
				console.info(44944);
				//将按钮禁用
				$("#btn").attr("disabled",true);
			})
			})
		</script>

6.2 设定按钮点击偶数次可行奇数次不行

<script type="text/javascript">
			$(function() {
			//1.6 事件的移除
			//--按钮点击偶数次可行 奇数次不行
			var i=1;
			$("#btn").click(function(){
				if(i%2==0){
					console.info(44944,i);//做一系列事情
				}
				i++;
			}) 
			})
		</script>

三、jQuery的动画

一、基本

显示：show(Time)

隐藏:hide(Time)

切换：toggle（Time）

1.1 显示：show(Time)：

		<script type="text/javascript">
			$(function() {
			//2.1 基本动画 [回调函数]
			$("#aa").hide();//默认隐藏
			$("#xx").on("click",function(){ 
				$("#aa").show(1000,function(){
					//回调函数
					alert("来了老弟")
				});//1s 显示
			})
			})
		</script>

1.2 隐藏:hide(Time)：

		<script type="text/javascript">
			$(function() {
			//2.1 基本动画 [回调函数]
			$("#yy").click(function(){
				$("#aa").hide(2000);//隐藏
			})
			})
		</script>

1.3 切换：toggle(Time)：

		<script type="text/javascript">
			$(function() {
			//2.1 基本动画 [回调函数]
			$("#zz").click(function(){
				$("#aa").toggle(1000);//切换
			}) 
			})
		</script>

注意：此时的toggle在1.9版本后之后变成了动画效果

二、滑动

slideUp(Time)：动画收缩(向上滑动)-->隐藏

slideDown(Time)：动画展开(向下滑动)-->显示

slideToggle(Time)：动画切换

2.1 slideUp(Time)：动画收缩(向上滑动)-->隐藏：

		<script type="text/javascript">
			$(function() {
			//2.2 滑动动画
			$("#aa").hide(); //默认隐藏
			$("#xx").on("click", function() {
				$("#aa").slideDown(1000); //1s 显示
			}) 
			})
		</script>

注意：1000=1s(秒)

2.2 slideDown(Time)：动画展开(向下滑动)-->显示：

		<script type="text/javascript">
			$(function() {
			//2.2 滑动动画
			$("#yy").click(function() {
				$("#aa").slideUp(2000); //隐藏
			}) 
			})
		</script>

2.3 slideToggle(Time)：动画切换：

		<script type="text/javascript">
			$(function() {
			//2.2 滑动动画
			$("#zz").click(function() {
				$("#aa").slideToggle(1000); //切换
			}) 	
			})
		</script>

三、淡入淡出(透明度)

   fadeIn(Time)：淡入(透明度减少)
   fadeOut(Time)：淡出(透明度增大)
   fadeToggle(Time)：切换

3.1 fadeIn(Time)：淡入(透明度减少)：

		<script type="text/javascript">
			$(function() {
			//2.3 淡入淡出(透明度)
			$("#aa").hide(); //默认隐藏
			$("#xx").on("click", function() {
				$("#aa").fadeIn(1000); //1s 显示
			}) 
			})
		</script>

3.2 fadeOut(Time)：淡出(透明度增大)：

		<script type="text/javascript">
			$(function() {
			//2.3 淡入淡出(透明度)
			$("#yy").click(function() {
				$("#aa").fadeOut(2000); //隐藏
			}) 			
			})
		</script>

3.3 fadeToggle(Time)：切换：

		<script type="text/javascript">
			$(function() {
				//2.3 淡入淡出(透明度)
				$("#zz").click(function() {
					$("#aa").fadeToggle(1000); //切换
				})
			})
		</script>

四、自定义动画

元素.animate({属性：属性值},Time)

缩放：
   width
   height

移动：
   top
   left

4.1 缩放：

		<script type="text/javascript">
			$(function() {
				//2.4 自定义动画
				//--缩放
				$("#bbb").click(function(){
					$("#aa").animate({
						width:100,//如果习惯写px的话就要加"" 如:width:"100px";
						heigh :300
					},1000);
				})
			})
		</script>

4.2 移动：

		<script type="text/javascript">
			$(function() {
				//2.4 自定义动画
				//--移动[2]
				$("#bbb").click(function(){
					$("#aa").animate({
						left:"100px",
						top:"100px",
						
					},1000);
				})
			})
		</script>

4.3 在自身基础上移动

			$(function() {
				//2.4 自定义动画
				//在自身基础上移动
				$("#bbb").click(function(){
					$("#aa").animate({
						left:"+=5",
						top:"+=8"
					},1000);
				})
			})
		</script>

OK，以上是我们今天所学习的所有内容，希望各位看官能给个三连，小陽在此祝愿各位看官能够把握现在，成就将来!

歐陽。

关注

8
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
1
评论
jQuery的事件&动画效果

jQuery的加载DOM的两种方式以及二者之间的区别、绑定事件两种方式、合成事件/事件切换、事件传播（事件冒泡）、事件坐标、移除事件、jQuery动画的基本的显示，隐藏，切换、jQuery的动画收缩，jQuery动画展开，jQuery动画切换、 jQuery的显示，隐藏，切换的淡入淡出(透明度)、jQuery的自定义动画
复制链接

扫一扫