jQuery 事件&动画

最新推荐文章于 2024-07-26 20:46:33 发布

猪大爷爱你

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量463

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/weixin_66116818/article/details/123469769

版权

一.事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
		*{
			margin: 0px;padding: 0px;
		}
			.over{
				border: 100px solid yellow;
			}
		</style>
		
		
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//1.1 加载DOM两种方式(区别)
			//原生态javascript加载DOM的方式
			//当网页全部加载完毕后才执行的函数
			//该方式在一个页面上只能出现一次  如果出现多次 会覆盖
			// window.onload = function(){ 
			// 		alert(123); 
			// }
						
			//给定一个函数
			// function myload(){
			// 	alert(123);
			// }
			//通过onload调用
			// window.onload = myload();
			
			//添加事件监听的方式
			// window.addEventListener('load',function(){
			// 		alert(123);
			// } )
			// window.addEventListener('load',function(){
			// 		alert(456);
			// } )
			
			//jQuery的DOM加载
			//jQuery的DOM在一个页面上可以编写多个
			//1.完整写法
			// $(document).ready(function(){
			// 	alert(123);
			// } )
			//2.简写
			// $(function() {
			// 	alert(456);
			// })
			
			//一个页面上同时出现原生态jsDOM和jQueryDOM加载
			//  版本不同，先后执行顺序不同，3.0版本以前---jQuery先
			//  3.0版本以后，原生态javascript先
			// window.onload = function(){
			// 	alert('原生态js')
			// }
			// $(function(){
			// 	alert('jQuery') 
			// } )
			 
						
			$(function(){
				//1.2 绑定事件的两种方式 [eg.:点击、悬停事件等等]
				//--元素.on/bind() 
				// $("#oBtn1").on('click',function(){
				// 	alert(123);
				// } )   
				// biod 绑定
				// $("#oBtn1").bind('click',function(){
				// 	alert(123);
				// } )
				
				
				//--元素.事件名
				// $("#oBtn1").click(function(){
				// 	alert(123);
				// } )
				
				//鼠标移入移出事件   mouseover mouseout
				//  $('#oBtn1').mouseover(function(){
				// 	 // alert(1213);
				// 	 console.log("移入")
				//  })
				// $('#oBtn1').mouseout(function(){
				// 	// alert(1213);
				// 	console.log("移出")
				// })
				
				 
								
		 		//1.3 合成事件/事件切换
				//--hover()悬停控制元素[div]的显示和隐藏
				 $("#oDiv").hover(function(){
					 $(this).addClass("over");
				 },function(){
					 $(this).removeClass('over');
				 });
				
				//--toggle()点击控制元素[div]的显示和隐藏[注意版本问题]
				
				// $("#oBtn2").click(function(){
				// 	//没有传递参数  调用后立即隐藏与显示
				// 	 //有参数（毫秒）  调用后 有延时效果
				// 	// $("#oDiv").toggle(1000);
				// 	$("#oDiv").toggle(function(){
				// 		alert("隐藏了，我出现了");
				// 	},function(){
				// 		alert('我出现了');
				// 	} ); 
				// } );
				
				
								
								
								
				//1.4 事件的传播(事件冒泡) 小p->中div->大body
				// $("body").click(function(){
				// 	alert(123);
				// } )
				
				// $("#oBtn2").click(function(){
				// 	alert(456);
				// 	return false;//阻止事件传播
				// } )
				 
								
				//1.5 事件event的坐标[了解即可 pageX,pageY]
				$("body").click(function(){
					// pagex 横坐标
					//鼠标
					console.log(event.pageX,event.pageY);
					// left和top  body有默认的margin与padding值
					console.log(event.offsetX,event.offsetY);
					//窗口
					console.log(event.clientX,event.clientY);
				} )
			
				
				//1.6 事件的移除
				// --按钮只能点击一次[2]
				// var flag = true;
				// $("#oBtn3").click(function(){
				// 	if(flag == true){
				// 		alert(123);
				// 		flag =  false;
				// 	}
				// 	//alert(123);
				// 	//一次性作用  通过调用解绑事件即可 
				// 	// $(this).off();
				// 	//$(this).unbind();//解绑事件
				// } )
				//jQuery中提供一个方法 one
				// $("#oBtn3").one('click',function(){
				// 	alert(123);
				// } )
				 
				//--按钮点击偶数次可行 奇数次不行
				// var num = 1;
				// $("#oBtn3").click(function(){
				// 	if(num % 2 == 0){
				// 		// alert(123);
				// 		console.log('点击了'+num);
				// 	}
				// 	num++;
				// 	console.log(num);
				// } )
				
			
			} )			
		
			
			
		</script>
		
		
		
		
	</head>
	将onload作为body的事件属性onload="alrtt(123)"
	<body>
		<!-- <button onload="alert(456)">DOM</button> -->
		<h3>1.绑定时间的两种方式 on 元素.事件</h3>
		<button id="oBtn1">点击获取</button>
		
		<h3>2.合成|切换事件</h3>
		<div id="oDiv" style="width: 100px;height: 50px;background-color: red;"></div>
		
		<button type="button" id="oBtn2">boggle点击显示与隐藏</button>
		
		<button type="button" id="oBtn3">点击</button>
		
		
		
	</body>
</html>

二.动画

<!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>
	
	</head>
	<body> 
		<button type="button" id="btn1">显示</button>
		<button type="button" id="btn2">隐藏</button>
		<button type="button" id="btn3">显示隐藏（toggle）</button>
		<button type="button" id="btn4">滑动</button>
		<button type="button" id="btn5">滑动（向下）</button><br>
		<button type="button" id="btn6">滑动（切换）</button>
		<button type="button" id="btn7">淡入</button>
		<button type="button" id="btn8">淡出</button><br>
		<button type="button" id="btn9">淡入淡出</button>
		<button type="button" id="btn10">点击变化（宽高）</button>
		<button type="button" id="btn11">点击变化（左右）</button>
		<button type="button" id="btn12">点击变化（叠加）</button>
		<div  style="background-color: red; width: 100px ; height: 100px;position: absolute;left: 0px;top: 150px;">
			
		</div>
		
		<script type="text/javascript">
		
			/* 二、动画 */
			//2.1 基本动画 [回调函数]
			// 隐藏
			// $("#btn2").click(function(){
			// 	// alert(123)
			// 	$("div").hide(5000);
			// })
			// // 显示
			// $("#btn2").click(function(){
			// 	$("div").show(2000);
			// })
			// // 切换
			// $("#btn3").click(function(){
			// 	$("div").toggle(2000);
			// })
		
			//2.2 滑动动画
			// $("#btn4").click(function(){
			// 	// 往上拉
			// 	$("div").slideUp(2000);
				
			// })
			// $("#btn5").click(function(){
			// 	// 往上拉
			// 	$("div").slideDown(2000);
				
			// })
			// $("#btn6").click(function(){
			// 	// 往上拉
			// 	$("div").slideToggle(2000);
				
			// })
			
			//2.3 淡入淡出(透明度)
			// $("#btn7").click(function(){
			// 	// 淡入
			// 	$("div").fadeOut(2000);
				
			// })
			// $("#btn8").click(function(){
			// 	// 淡出
			// 	$("div").fadeIn(2000);
				
			// })
			// $("#btn9").click(function(){
			// 	// 淡入淡出切换
			// 	$("div").fadeToggle(2000);
				
			// })
			//2.4 自定义动画
			$("#btn10").click(function(){
				
				$("div").animate({
					width:"500px",
					height:"500px"
				},3000);
				
			})
			$("#btn11").click(function(){
				
				$("div").animate({
					left:"500px",
					top:"300px"
				},3000);
				
			})
			
			$("#btn12").click(function(){
				
				$("div").animate({
					left:"+=50px",
					top:"+=3px"
				},3000);
				
			})
			//--缩放
			//--移动[2]
		</script>
	</body>
</html>

猪大爷爱你

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 事件&动画

一.事件<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{ margin: 0px;padding: 0px; } .over{ border: 100px solid yellow; } </style&gt...
复制链接

扫一扫