0
点赞
收藏
分享

微信扫一扫

jQuery事件&动画

金刚豆 2022-03-20 阅读 70
jqueryjavascript前端css

先说一下事件，事件分为：加载Dom两种事件/绑定事件的两种方式/合成事件/事件切换//事件的传播(事件冒泡)/事件event的坐标/事件的移除，六种事件

首先看看加载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方式q")
			})
			$(function(){
				console.info("jQuery方式2")
			})
			$(function(){
				console.info("jQuery方式3")
			})

第二种绑定事件的两种方式 [eg.:点击、悬停事件]

				//--元素.on/bind()
				 $("#aa").on("click",function(){
					alert("广告")
				}) 
				 $("#aa").bind("mouseover",function(){
					alert("aa")
				}) 
				
				//--元素.事件名
			 	$("#aa").click(function(){
					alert("干哈")
				})

第三种：合成事件/事件切换

                --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").toggle(1000);

第四种：事件的传播(事件冒泡) 

                 $("p").click(function(){
					console.info("p被打了")
				})
				$("div").click(function(){
					console.info("div被打了")
					return false;//阻止传播
				})
				$("body").click(function(){
					console.info("body被打了")
				})

第五种： 事件event的坐标

                 $("#aa").click(function(e){
					console.info(e.pageX,e.pageY)
				})

第六种：事件的移除

                $("#btn").click(function(){
					//做一系列事情
					console.info(44944);
					//将点击事件进行移除
					$("#btn").off("click");//unbind();
					//按钮禁用
					$("#btn").attr("disabled",true);
				}) 
				
				  $("#btn").one("click",function(){
					console.info(44944);
					//将按钮禁用
					$("#btn").attr("disabled",true)
				}) */
				
				//--按钮点击偶数次可行 奇数次不行
			 	var i=1;
				$("#btn").click(function(){
					if(i%2==0){
						console.info(44944,i);
					}
					i++;
				})

接下来是动画，动画分为：基本动画 [回调函数]/滑动动画/淡入淡出(透明度)

先看基本动画：

               	 $("#aa").hide();
				$("#xx").on("click",function(){
					$("#aa").show(1000,function(){
						//回调函数
						alert("来了")
					});//1s
				})
				$("#yy").click(function(){
					$("#aa").hide(2000);
				})
				$("#zz").click(function(){
					$("#aa").toggle(1000);
				})

滑动动画

                 $("#aa").hide();
				$("#xx").on("click",function(){
					$("#aa").slideDown(1000)//1s
				})
				$("#yy").click(function(){
					$("#aa").slideUp(2000);
				})
				$("#zz").click(function(){
					$("#aa").slideToggle(1000);
				})

淡入淡出动画

                 $("#aa").hide();
				$("#xx").on("click",function(){
					$("#aa").fadeIn(1000)//1s
				})
				$("#yy").click(function(){
					$("#aa").fadeOut(2000);
				})
				$("#zz").click(function(){
					$("#aa").fadeToggle(1000);
				})

自定义动画(缩放、移动、在自身基础上移动)

	            //--缩放
				 $("#bbb").click(function(){
					$("#aa").animate({
						width:100,
						height:300
					},1000);
				}) 
				
				//--移动[2]
				 $("#bbb").click(function(){
					$("#aa").animate({
						left:100,
						top:100
					},1000);
				}) 
				//在自身基础上面移动
				 $("#bbb").click(function(){
					$("#aa").animate({
						left:"+=5",
						top:"+=8"
					},100);
				})

再给大家看看我的全部代码，记得要一个事件一个事件的运行，如果全部运行会运行不出来

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#aa{
				width: 200px;
				height: 200px;
				background-color: orange;
				position: absolute;/* 绝对定位 */
				top: 50px;
				left: 50px;
			}
			p{
				text-align: center;
				background-color: yellow;
			}
			.xyz{
				transform: rotate(720000000deg);
				transition: all 10s;
			}
		</style>
		<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
		<script type="text/javascript">
			
			/* jQuery第四次课 */
			
			/* 一、事件 */
			//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方式q")
			})
			$(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("aa")
				}) 
				
				//--元素.事件名
			 	$("#aa").click(function(){
					alert("干哈")
				}) 
				//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").toggle(1000);
				
				
				//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被打了")
				}) 
				
				
				//1.5 事件event的坐标[了解即可 pageX,pageY]
				 $("#aa").click(function(e){
					console.info(e.pageX,e.pageY)
				}) 
	

				//1.6 事件的移除
				//--按钮只能点击一次[2]
				 $("#btn").click(function(){
					//做一系列事情
					console.info(44944);
					//将点击事件进行移除
					$("#btn").off("click");//unbind();
					//按钮禁用
					$("#btn").attr("disabled",true);
				}) 
				
				  $("#btn").one("click",function(){
					console.info(44944);
					//将按钮禁用
					$("#btn").attr("disabled",true)
				}) */
				
				//--按钮点击偶数次可行 奇数次不行
			 	var i=1;
				$("#btn").click(function(){
					if(i%2==0){
						console.info(44944,i);
					}
					i++;
				}) 
				
				/* 二、动画 */
				//2.1 基本动画 [回调函数]
				 $("#aa").hide();
				$("#xx").on("click",function(){
					$("#aa").show(1000,function(){
						//回调函数
						alert("来了")
					});//1s
				})
				$("#yy").click(function(){
					$("#aa").hide(2000);
				})
				$("#zz").click(function(){
					$("#aa").toggle(1000);
				}) 
				
				//2.2 滑动动画
				 $("#aa").hide();
				$("#xx").on("click",function(){
					$("#aa").slideDown(1000)//1s
				})
				$("#yy").click(function(){
					$("#aa").slideUp(2000);
				})
				$("#zz").click(function(){
					$("#aa").slideToggle(1000);
				}) 
				
				//2.3 淡入淡出(透明度)
				 $("#aa").hide();
				$("#xx").on("click",function(){
					$("#aa").fadeIn(1000)//1s
				})
				$("#yy").click(function(){
					$("#aa").fadeOut(2000);
				})
				$("#zz").click(function(){
					$("#aa").fadeToggle(1000);
				}) 
				
				//2.4 自定义动画
				//--缩放
				 $("#bbb").click(function(){
					$("#aa").animate({
						width:100,
						height:300
					},1000);
				}) 
				
				//--移动[2]
				 $("#bbb").click(function(){
					$("#aa").animate({
						left:100,
						top:100
					},1000);
				}) 
				//在自身基础上面移动
				 $("#bbb").click(function(){
					$("#aa").animate({
						left:"+=5",
						top:"+=8"
					},100);
				}) 
				
				
				//旋转动画
				$("#bbb").click(function(){
					$("#aa").addClass("xyz");
				})
				
			})
			
			
		</script>
	</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>
</html>
举报

相关推荐

jQuery事件 jQuery动画

jquery

jQuery 动画&事件

jquery

jQuery动画和事件

jqueryjavascripthtml

jQuery 事件和动画

jqueryjavascript

jQuery事件与动画

jquery

jQuery-04 (事件&动画)

jquery动画javascript

jQuery04-事件-动画

java

jQuery04(事件&动画)

jquery前端

jQuery_04 事件&动画

jqueryjavascriptecmascript

jQuery04 事件&动画

javascript前端
0 条评论