jQuery04(事件&动画)

最新推荐文章于 2024-06-17 16:07:25 发布

瑶大头*^_^*

最新推荐文章于 2024-06-17 16:07:25 发布

阅读量108

点赞数 2

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

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/qq_73126462/article/details/130134476

版权

jQuery专栏专栏收录该内容

5 篇文章 0 订阅

订阅专栏

目录

1.加载Dom两种方式

两个都有的情况下执行顺序【面试题】

案例1：测试两种方式的区别【个数+顺序】

2.绑定事件两种方式

案例2：演示事件(鼠标悬停和点击)的两种方式

3.合成事件/事件切换

案例3：升级案例2鼠标悬停显示和隐藏

4.事件传播（事件冒泡）

案例5：给body div span(在div中) 分别添加点击事件，测试事件传播

案例6：pageX实现鼠标悬浮，获取鼠标坐标

案例7：按钮点击一次，不能再次点击

案例8：点击按钮偶数次可以，奇数次则失效

二:动画效果

案例1：点击按钮，控制div显示和隐藏（基本动画）

案例2：点击按钮，控制div显示和隐藏（滑动）

3.淡入淡出(透明度)

案例3：点击按钮，控制div显示和隐藏（透明度）

4.自定义动画

案例4：点击按钮，控制div的宽度和高度变大

一.事件

1.加载Dom两种方式

1.1 window.onload方式

执行时间：整个网页中所有内容(包括图片)加载完成后，才会执行

编写个数：1个

1.2 jQuery方式

执行时间：网页结构绘制完成后，执行

编写个数：多个

两个都有的情况下执行顺序【面试题】

1.jQuery3.0：window.onload比jQuery先执行

2.jQuery1.0和2.0：jQuery比window.onload先执行

案例1：测试两种方式的区别【个数+顺序】

//1.1 加载DOM两种方式(区别)  
		/*
		 1.高版本中(3.X)  js比jQuery先执行  低版本(1.X或2.X)  jQuery比js先执行
		 2.js的加载函数只能写1个  多个会覆盖
		   jQuery的加载函数可以写多个  都会被执行
		*/

		// js方式
		window.onload=function(){
			console.info("js方式1");
		}
		window.onload=function(){
			console.info("js方式2");
		}
		window.onload=function(){
			console.info("js方式3");
		}

		// jQuery方式
		// ①
		$(document).ready(function(){
			console.info("jQuery方式");
		})
		// ②
		$(function(){
			console.info("jQuery方式1");
		})
		$(function(){
			console.info("jQuery方式2");
		})
		$(function(){
			console.info("jQuery方式3");
		})

2.绑定事件两种方式

元素.on("事件名",function(){})
元素.事件名(function(){})

案例2：演示事件(鼠标悬停和点击)的两种方式

<script>
$(function{
    	// 1.2 绑定事件的两种方式 [eg.:点击、悬停事件等等]
			// --元素.on/bind()
			// 点击事件
			$("#aa").on("click",function(){
				alert("hh");
			})

			// 悬停事件
			$("#aa").bind("mouseover",function(){
				$(this).css("background","pink");
			})

			// --元素.事件名  简便
			$("#aa").click(function(){
				alert("来来来");
			})


})
<script/>

<body>
	<button id="bbb">噜啦噜啦嘞</button>
	<button id="ii">显示(展开)[淡入]</button>
	<button id="jj">隐藏(收起)[淡出]</button>
	<button id="zz">显示/隐藏(展开/收起)[淡入/淡出]</button>
	<input type="button" value="很好喝" id="btn" />
	<!--  style="text-decoration: none:去除下划线 -->
	<a href="#" style="text-decoration: none;">显示</a>
	<div id="aa">
		<br />
		<p>好红红火火恍恍惚惚</p>
	</div>
</body>

3.合成事件/事件切换

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

1.1鼠标移上去第一个函数

1.2鼠标移除第二个函数

2.toggle()：鼠标点击合成事件

案例3：升级案例2鼠标悬停显示和隐藏

$(function{

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

			//--toggle()点击控制元素[div]的显示和隐藏[注意版本问题]
			$("#aa").hide();
			$("a").toggle(function () {//鼠标移上
				$("#aa").show();//显示
			}, function () {//鼠标移出
				$("#aa").hide();//隐藏
			})
			$("#aa").hide(1000);


})

<body>
	<button id="bbb">噜啦噜啦嘞</button>
	<button id="ii">显示(展开)[淡入]</button>
	<button id="jj">隐藏(收起)[淡出]</button>
	<button id="zz">显示/隐藏(展开/收起)[淡入/淡出]</button>
	<input type="button" value="很好喝" id="btn" />
	<!--  style="text-decoration: none:去除下划线 -->
	<a href="#" style="text-decoration: none;">显示</a>
	<div id="aa">
		<br />
		<p>好红红火火恍恍惚惚</p>
	</div>
</body>
<style>
	#aa {
			width: 200px;
			height: 200px;
			background-color: darksalmon;
			/* 绝对定位 */
			position: absolute;
			top: 50px;
			left: 50px;
		}

		p {
			background-color: antiquewhite;
			text-align: center;/* 文字居中 */
			
		}
<style/>

4.事件传播（事件冒泡）

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

案例5：给body div span(在div中) 分别添加点击事件，测试事件传播

$(function{

//1.4 事件的传播(事件冒泡) 小p->中div->大body
			//依次加点击事件
			$("p").on("click",function(){
				console.info("p被点击了");
			})
			$("div").on("click",function(){
				console.info("div被点击了");
				return false;//阻断冒泡
			})
			$("body").on("click",function(){
				console.info("body被点击了");
			})

})

<body>
	<button id="bbb">噜啦噜啦嘞</button>
	<button id="ii">显示(展开)[淡入]</button>
	<button id="jj">隐藏(收起)[淡出]</button>
	<button id="zz">显示/隐藏(展开/收起)[淡入/淡出]</button>
	<input type="button" value="很好喝" id="btn" />
	<!--  style="text-decoration: none:去除下划线 -->
	<a href="#" style="text-decoration: none;">显示</a>
	<div id="aa">
		<br />
		<p>好红红火火恍恍惚惚</p>
	</div>
</body>

<style>
		#aa {
			width: 200px;
			height: 200px;
			background-color: darksalmon;
			/* 绝对定位 */
			position: absolute;
			top: 50px;
			left: 50px;
		}

		p {
			background-color: antiquewhite;
			text-align: center;/* 文字居中 */
			
		}
		
	</style>

5.事件坐标

offsetX：当前元素左上角
clientX：窗口左上角
pageX：网页左上角

案例6：pageX实现鼠标悬浮，获取鼠标坐标

$(function{

    // 1.5 事件event的坐标[了解即可 pageX,pageY]
			$("#aa").click(function(e){
				console.info(e.pageX,e.pageY);
			})

})

<body>
	<input type="button" value="很好喝" id="btn" />
	<!--  style="text-decoration: none:去除下划线 -->
	<a href="#" style="text-decoration: none;">显示</a>
	<div id="aa">
		<br />
		<p>好红红火火恍恍惚惚</p>
	</div>
</body>

#aa {
			width: 200px;
			height: 200px;
			background-color: darksalmon;
			/* 绝对定位 */
			position: absolute;
			top: 50px;
			left: 50px;
		}

6.移除事件

元素.unbind("事件名")
注意1：一般情况下，不会使用unbind，推荐使用变量控制事件
注意2：如果某个元素只允许使用一次事件，则可以使用one()

案例7：按钮点击一次，不能再次点击

$(function{

        	//1.6 事件的移除
			//--按钮只能点击一次[2]
			//一次性
			$("#btn").one("click",function(){
				console.info(34342);
			})

})

<body>
	
	<input type="button" value="很好喝" id="btn" />
	<!--  style="text-decoration: none:去除下划线 -->
	<a href="#" style="text-decoration: none;">显示</a>
	<div id="aa">
		<br />
		<p>好红红火火恍恍惚惚</p>
	</div>
</body>

<style>
		#aa {
			width: 200px;
			height: 200px;
			background-color: darksalmon;
			/* 绝对定位 */
			position: absolute;
			top: 50px;
			left: 50px;
		}

		p {
			background-color: antiquewhite;
			text-align: center;/* 文字居中 */
			
		}
	
	</style>

案例8：点击按钮偶数次可以，奇数次则失效

$(function(){


    //--按钮点击偶数次可行 奇数次不行
			let i=1;
			$("#btn").click(function(){
				if(i%2==0){//只有点击偶数次的时候才会相应操作
					console.info(44944,i);
				}
				i++;
			})
})

<body>
	<button id="bbb">噜啦噜啦嘞</button>
	<button id="ii">显示(展开)[淡入]</button>
	<button id="jj">隐藏(收起)[淡出]</button>
	<button id="zz">显示/隐藏(展开/收起)[淡入/淡出]</button>
	<input type="button" value="很好喝" id="btn" />
	<!--  style="text-decoration: none:去除下划线 -->
	<a href="#" style="text-decoration: none;">显示</a>
	<div id="aa">
		<br />
		<p>好红红火火恍恍惚惚</p>
	</div>
</body>

二:动画效果

1.基本

显示：show(Time)
隐藏:hide(Time)
切换：toggle（Time）

案例1：点击按钮，控制div显示和隐藏（基本动画）

$(function({

    	/* 二、动画 */
			//2.1 基本动画 [回调函数]
			$("#aa").hide( );
			//显示
			$("#ii").click(function(){
				$("#aa").show(1000,function(){//显示  毫秒
					//回调函数
					$(this).css("background","yellow");
				});
			})
			//隐藏
			$("#jj").click(function(){
				$("#aa").hide(2000);
			})
			//显示/隐藏
			$("#zz").click(function(){
				$("#aa").toggle(2000);
			})
}))

<body>
	<button id="bbb">噜啦噜啦嘞</button>
	<button id="ii">显示(展开)[淡入]</button>
	<button id="jj">隐藏(收起)[淡出]</button>
	<button id="zz">显示/隐藏(展开/收起)[淡入/淡出]</button>
	<input type="button" value="很好喝" id="btn" />
	<!--  style="text-decoration: none:去除下划线 -->
	<a href="#" style="text-decoration: none;">显示</a>
	<div id="aa">
		<br />
		<p>好红红火火恍恍惚惚</p>
	</div>
</body>

<style>
		#aa {
			width: 200px;
			height: 200px;
			background-color: darksalmon;
			/* 绝对定位 */
			position: absolute;
			top: 50px;
			left: 50px;
		}

		p {
			background-color: antiquewhite;
			text-align: center;/* 文字居中 */
			
		}
		
	</style>

2.滑动

slideUp(Time)：动画收缩(向上滑动)-->隐藏
slideDown(Time)：动画展开(向下滑动)-->显示
slideToggle(Time)：动画切换

案例2：点击按钮，控制div显示和隐藏（滑动）

$(function(){


    //2.2 滑动动画
			$("#aa").hide();
			// 展开
			$("#ii").click(function () {
				$("#aa").slideDown(2000);
			})
			// 隐藏
			$("#jj").click(function () {
				$("#aa").slideUp(2000);
			})
			//  展开/隐藏
			$("#zz").click(function () {
				$("#aa").slideToggle(2000);
			})
})


<body>
	<button id="bbb">噜啦噜啦嘞</button>
	<button id="ii">显示(展开)[淡入]</button>
	<button id="jj">隐藏(收起)[淡出]</button>
	<button id="zz">显示/隐藏(展开/收起)[淡入/淡出]</button>
	<input type="button" value="很好喝" id="btn" />
	<!--  style="text-decoration: none:去除下划线 -->
	<a href="#" style="text-decoration: none;">显示</a>
	<div id="aa">
		<br />
		<p>好红红火火恍恍惚惚</p>
	</div>
</body>

<style>
		#aa {
			width: 200px;
			height: 200px;
			background-color: darksalmon;
			/* 绝对定位 */
			position: absolute;
			top: 50px;
			left: 50px;
		}

		p {
			background-color: antiquewhite;
			text-align: center;/* 文字居中 */
			
		}
	</style>

3.淡入淡出(透明度)

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

案例3：点击按钮，控制div显示和隐藏（透明度）

$(function{

//2.3 淡入淡出(透明度)
			$("#aa").hide();
			// 淡入
			$("#ii").click(function () {
				$("#aa").fadeIn(2000);
			})
			// 淡出
			$("#jj").click(function () {
				$("#aa").fadeOut(2000);
			})
			//  淡入/淡出
			$("#zz").click(function () {
				$("#aa").fadeToggle(2000);
			})

})

<body>
	<button id="bbb">噜啦噜啦嘞</button>
	<button id="ii">显示(展开)[淡入]</button>
	<button id="jj">隐藏(收起)[淡出]</button>
	<button id="zz">显示/隐藏(展开/收起)[淡入/淡出]</button>
	<input type="button" value="很好喝" id="btn" />
	<!--  style="text-decoration: none:去除下划线 -->
	<a href="#" style="text-decoration: none;">显示</a>
	<div id="aa">
		<br />
		<p>好红红火火恍恍惚惚</p>
	</div>
</body>
<style>
		#aa {
			width: 200px;
			height: 200px;
			background-color: darksalmon;
			/* 绝对定位 */
			position: absolute;
			top: 50px;
			left: 50px;
		}

		p {
			background-color: antiquewhite;
			text-align: center;/* 文字居中 */
			
		}
		
	</style>

4.自定义动画

元素.animate({属性：属性值},Time)
缩放 width height
移动 top left
移动(本元素)，距离 top= "+=" left= "-="

案例4：点击按钮，控制div的宽度和高度变大

$(function{
    
        //2.4 自定义动画
			// --缩放
			$("#bbb").on("click",function(){
				$("#aa").animate({
					width:100,
					height:400
				},1000)
			})

			// --移动[2]
			$("#bbb").click(function(){
				$("#aa").animate({
					top:100,
					left:100
				},500)
			})
			// 在自身的基础上累加
			$("#bbb").click(function(){
				$("#aa").animate({
					// += 拼接
					top:"+=5",
					left:"+=10"
				},500)
			})

        //旋转动画
			$("#bbb").click(function(){
				$("#aa").addClass("xyz");
			})

})
<body>
	<button id="bbb">噜啦噜啦嘞</button>
	<button id="ii">显示(展开)[淡入]</button>
	<button id="jj">隐藏(收起)[淡出]</button>
	<button id="zz">显示/隐藏(展开/收起)[淡入/淡出]</button>
	<input type="button" value="很好喝" id="btn" />
	<!--  style="text-decoration: none:去除下划线 -->
	<a href="#" style="text-decoration: none;">显示</a>
	<div id="aa">
		<br />
		<p>好红红火火恍恍惚惚</p>
	</div>
</body>
<style>
		#aa {
			width: 200px;
			height: 200px;
			background-color: darksalmon;
			/* 绝对定位 */
			position: absolute;
			top: 50px;
			left: 50px;
		}

		p {
			background-color: antiquewhite;
			text-align: center;/* 文字居中 */
			
		}
		.xyz{
			/* s旋转多少度deg*/
			transform: rotate(360deg);
			/* 全部实现完2s */
			transform: all  2s;
		}
	</style>

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery04(事件&动画)

【代码】jQuery04(事件&动画)
复制链接

扫一扫

专栏目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

打赏作者

瑶大头*^_^* 你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20

扫码支付：¥1

获取中

扫码支付

您的余额不足，请更换扫码支付或充值

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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