0
点赞
收藏
分享

微信扫一扫

jQuery 事件和动画

戴老师成长记录仪 2022-03-20 阅读 107

思维导图:

Dom加载的两种方式:

js方式:不能写多个,写多个会被覆盖

jQuery方式:可以写多个,不会被覆盖

在3.3版本的类库中优先运行  jQuery

在1.7版本的类库中优先运行  js

//js方式				 				
window.onload=function(){							
console.info("js方式");						
}
	
//jQuery方式		     				
$(function(){					
	console.info("jQuery方式");
}

绑定事件的两种方式  点击和悬停事件等

js部分:

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

//点击事件
//--元素.事件名
$("#aa").click(function(){
	alert("ddd");
}) 

body部分:

<a style="text-decoration: none;" href="#">显示</a>
		<div id="aa">
			<br />
			<br />
			<br />
			<p>有点东西</p>
		</div>

合成事件/切换事件:

js部分:

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

body部分:

<a style="text-decoration: none;" href="#">显示</a>
		<div id="aa">
			<br />
			<br />
			<br />
			<p>有点东西</p>
		</div>

toggle要注意版本问题,1.7的版本是隐藏,3.3的版本是动画

js部分:

// --toggle()点击控制元素[div]的显示和隐藏[注意版本问题]    				            
        $("#aa").hide();//隐藏
		$("a").toggle(function(){//点击一下
		$("#aa").show();//显示
		},function(){//再点击一下
			$("#aa").hide();//隐藏
		})
//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);//x,y轴
		})
//1.6 事件的移除
//--按钮只能点击一次[2]
			 	$("#btn").on("click",function(){
						//做一系列事情
						console.info(211015);
						//将点击事件经行移除
						$("#btn").off("click");//unbind()
						//将按钮禁用
						$("#btn").attr("disabled",true);
					}) 

				//一次
				 $("#btn").one("click",function(){
					console.info(211015);
					//将按钮禁用
					$("#btn").attr("disabled",true);
				}) 


				//--按钮点击偶数次可行 奇数次不行
				var i = 1;
				$("#btn").click(function(){
					if(i%2==0){
						console.info(211015,i);//做一系列事情
					}
					i++;
				}) 

body部分:

<button id="hmj">一边去</button>
		<button id="xx">显示</button>
		<button id="yy">隐藏</button>
		<button id="zz">显示/隐藏</button>
		<button id="bb">点我试试</button>
		<a style="text-decoration: none;" href="#">显示</a>
		<div id="aa">
			<br />
			<br />
			<br />
			<p>有点东西</p>
		</div>

动画

js部分:

				/* 二、动画 */
				//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(2000);//切换
				}) 

				//2.2 滑动动画
 				$("#aa").hide(); //默认隐藏
 				$("#xx").on("click", function() {
 					$("#aa").slideDown(1000); //1s显示
				})
 				$("#yy").click(function() {
 					$("#aa").slideUp(2000); //隐藏
 				})
 				$("#zz").click(function() {
 					$("#aa").slideToggle(2000); //切换
 				})
				//2.3 淡入淡出(透明度)
 				$("#aa").hide(); //默认隐藏
 				$("#xx").on("click", function() {
 					$("#aa").fadeIn(1000); //1s显示
 				})
 				$("#yy").click(function() {
 					$("#aa").fadeOut(2000); //隐藏
 				})
 				$("#zz").click(function() {
 					$("#aa").fadeToggle(2000); //切换
 				})
				//2.4 自定义动画
				//--缩放
 				$("#hmj").click(function(){
 					$("#aa").animate({
 						width:100,
 						heigth:400,
 					},1000);
 				})
 				
				
				//--移动[2]
 				$("#hmj").click(function(){
 					$("#aa").animate({
 						left:"+=100",
 						top:"+=100",
 					},1000);
 				})

				// 旋转
 				$("#hmj").click(function(){
 					$("#aa").addClass("lll");
				})

body部分:

<button id="hmj">一边去</button>
		<button id="xx">显示</button>
		<button id="yy">隐藏</button>
		<button id="zz">显示/隐藏</button>
		<button id="bb">点我试试</button>
		<a style="text-decoration: none;" href="#">显示</a>
		<div id="aa">
			<br />
			<br />
			<br />
			<p>有点东西</p>
		</div>

旋转移动淡出效果:

<html>
	<head>
		<meta charset="utf-8">
		<title>作业1</title>
		<style type="text/css">
			#aa{
				position: absolute;
				top:500px;
				left: 500px;
				
			}
			.ll{
				transform: rotate(7200deg);
				transition: all 10s;
			}
		</style>
		<script src="../js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
			//淡出
			$("#btn").click(function() {
				$("#aa").addClass("ll");//旋转
				for(i=0;i<100;i++){
					$("#aa").animate({
						left:"-=2000",
						top:"-=2000",
					},200);
					$("#cc").fadeOut(8000); //淡出
					
				}
			})
			
			})
		</script>
	</head>
	<body>
		<button id="btn">点击</button>
		<div id="aa">
			<img id="cc" src="../img/3.jpg" width="100px" height="100px" >
		</div>
	</body>
</html>

模拟心脏跳动效果:

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#aa{
				position: absolute;
				top: 200px;
				left: 200px;
			}
		</style>
		<script src="../js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
			$("#bb").click(function(){
				for(i=0;i<=100;i++){
					
					$("#aa").animate({
						width:400,
						height:400,
					},1000);
					$("#aa").animate({
						width:200,
						height:200,
					},1000);

				}
				})				
			})
		</script>
	</head>
	<body>
		<button id="bb">跳动</button>
		<img id="aa" src="../img/3.jpg" width="200px" height="200px" >
	</body>
</html>
举报

相关推荐

jQuery动画和事件

jQuery事件 jQuery动画

jQuery 动画&事件

jQuery事件&动画

JQuery04 动画和事件

jQuery.04.动画和事件

jQuery事件与动画

jQuery04 事件&动画

jQuery04(事件&动画)

0 条评论