jQuery动画和事件

阳zm__

于 2022-03-23 19:01:39 发布

阅读量72

点赞数

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/m0_68265336/article/details/123693424

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文详细介绍了JavaScript中的事件处理，包括onclick、onmouseover等基本事件，以及事件委托、事件传播、事件坐标等概念。同时，讲解了jQuery中绑定事件的多种方式，并通过示例演示了事件的移除。此外，文章还深入探讨了JavaScript的动画效果，如show、hide、toggle等基本动画，以及slide、fade等复杂动画的实现，包括自定义动画的创建。

摘要由CSDN通过智能技术生成

一.事件

onclick	点击事件
onmouseover	鼠标移入
onmouseout	鼠标移出
onmousemove	鼠标移动

1、元素.on("事件名",function(){}) （这也是委托事件）

2、元素.事件名(function(){})

(代码展示)

/* 一、事件 */
			//1.1 加载DOM两种方式(区别)
			//只能写一个  多个会被覆盖
			
			window.onload=function(){
				console.info("js方式1");
			}
			window.onload=function(){
				console.info("js方式2");
			}
			window.onload=function(){
				console.info("js方式3");
			}
			//jQuery方式可以写多个
			$(function(){
				console.info("jQuery方式1");
			})
			$(function(){
				console.info("jQuery方式2");
			})
			$(function(){
				console.info("jQuery方式3");
			})
			
		$(function(){
			//1.2 绑定事件的两种方式 [eg.:点击、悬停事件等等]
			//--元素.on/bind()
			$("#aa").on("click",function(){
				alert("干屁");
			})
			
			$("#aa").bind("mouseover",function(){
				alert("nb干屁");
			}) 
			
			//--元素.事件名
			$("#aa").click(function(){
				alert("干啥");
			})
			
			$("#aa").mouseover(function(){
				alert(123);
			})
			
			//1.3 合成事件/事件切换
			//--hover()悬停控制元素[div]的显示和隐藏
			$("#aa").hide();//隐藏
			$("a").hover(function9(){//鼠标移上事件
				$("#aa").show();//显示
			},function(){//鼠标移除事件
				$("#aa").hide();//隐藏
			})
			
			//使用toggle()时应注意版本
			//--toggle()点击控制元素[div]的显示和隐藏[注意版本问题]
			$("#aa").hide();//隐藏
			$("a").toggle(function9(){//鼠标点击事件
				$("#aa").show();//显示
			},function(){//鼠标点击 事件
				$("#aa").hide();//隐藏
			})
			
			$("#aa").toggle(1000);//1s
			
			
			//1.4 事件的传播(事件冒泡) 小p->中div->大body
			//依次增加点击事件
			$("p").click(function(){
				console.info("p被点击了");
				return false;//阻止传播
			})
			$("div").click(function(){
				console.info("div被点击了");
				return false;//阻止传播
			})
			$("body").click(function(){
				console.info("body被点击了");
			})	
			
			//1.5 事件event的坐标[了解即可 pageX,pageY]
			$("aa").on("click",function(e){
				console.info(e.pageX,e.pageY);
				
			})
			
			
			//1.6 事件的移除
			//--按钮只能点击一次[2]
			$("#btn").click(function(){
				console.info(44944)
				//将该点击事件移除
				$("btn").unbind("click");
				//将按钮禁用
				$("#btn").prop("disabled",true);
			})
			
			$("btn").one("click",function(){
				console.info(44944)
				//将按钮禁用
				$("#btn").prop("disabled",true);
			]})
			
			//--按钮点击偶数次可行 奇数次不行
			var a=1;
			$("#btn").clic{k(function(){
				if(i%2==0){
					console.info(44944);
				}
				i++;
			})

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

二.动画

show(Time)	显示
hide(Time)	隐藏
toggle(Time)	切换（是显示就隐藏，隐藏就显示）
slideUp(Time)	动画收缩（向上滑动）隐藏
slideDown(Time)	动画展开（向下滑动）显示
slideToggle(Time)	动画切换
fadeIn(Time)	淡入（透明度减少）
fadeOut(Time)	淡出（透明度增大）
fadeToggle(Time)	切换

/* 二、动画 */
			//2.1 基本动画 [回调函数]
			$("#aa").hide();//默认隐藏
			$("#xx").click(function(){
				$("#aa").show(1000,function(){
					//回调函数
					alert("嗨害嗨");
				});//1s
			})
			$("#yy").click(function(){
				$("#aa").hide(2000);//2s
			})
			$("#zz").click(function(){
				$("#aa").toggle(1000);//1s
			})
			
			//2.2 滑动动画
			$("#aa").hide();//默认隐藏
			$("#xx").click(function(){
				$("#aa").skideUp(1000});//1s
			})
			$("#yy").click(function(){
				$("#aa").slideUp(2000);//2s
			})
			$("#zz").click(function(){
				$("#aa").slideToggle(1000);//1s
			})
			
			
			//2.3 淡入淡出(透明度)
			$("#aa").hide();//默认隐藏
			$("#xx").click(function(){
				$("#aa").fadeIn(1000});//1s
			})
			$("#yy").click(function(){
				$("#aa").fadeOut(2000);//2s
			})
			$("#zz").click(function(){
				$("#aa").fadeToggle(1000);//1s
			})



			//2.4 自定义动画
			//--缩放
			$("#bb").on("click",function(){
				$("aa").animate({
					width:"100px"
					heigth:"300px"
				},1000);
			})
			//--移动[2]
			$("#bb").click(function(){
				$("#aa").animate({
					left:"+=5",
					top:"+=10"
				},100)
			})
			 })