0
点赞
收藏
分享

微信扫一扫

jQuery04-事件-动画

求阙者 2022-04-22 阅读 38
java

绑定事件的两种方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
		<script type="text/javascript">
    $(function(){
		//			1.通过两种方式给div添加鼠标点击事件.
		// $("#da").click(function(){



		// 	alert("div被点击了！")

		// })
	    // $("#da").on("click",function(){alert("div被点击了！")})



		// $("#da").bind("click",function(){alert("div被点击了！")})



//			2.通过两种方式给div添加鼠标进入事件.

        // $("#da").mouseenter(function(){

        // 	alert("鼠标进入！")
        // });
        // $("#da").on("mouseenter",function(){alert("鼠标进入！")})

        // $("#da").bind("mouseenter",function(){alert("鼠标进入！")})

//			3.通过两种方式给div添加鼠标离开事件.

        // $("#da").mouseleave(function(){

        // 	alert("鼠标离开！")

        // });
        // $("#da").on("mouseleave",function(){alert("鼠标离开！")})

        // $("#da").bind("mouseleave",function(){alert("鼠标离开！")})

})
		</script>
	</head>
	<body>
		<div id="da" style="background-color:pink;width: 200px;height: 100px;">
		</div>
	</body>
</html>

合成事件（事件切换）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
		</head>
    <body>
		<div id="da" style="background-color:peachpuff;width: 200px;height: 100px;">
		</div>
		<img src="img/微信图片_20220421162227.jpg" id="ia" style="width: 500px;height: 100px;"/>
	</body>
		<script type="text/javascript">
		// //js方式
		// var a = document.getElementById("#da");
		// a.style.display = "none"
$(function(){
	//			1.hover:鼠标悬停合成事件

//				1.1给div添加鼠标悬停合成事件:打印内容.,

// $("#da").hover(function(){console.info("鼠标进去")},function(){console.info("鼠标出去")});

//				1.2给div添加鼠标悬停合成事件:显示和隐藏图片(图片一开始处于隐藏状态).

// $("#da").hover(function(){$("#ia").hide()},function(){$("#ia").show()});


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

//				2.1给div添加鼠标点击合成事件：显示和隐藏图片(图片一开始处于隐藏状态).
// $("#da").toggle(function(){$("#ia").hide()},function(){$("#ia").show()});

})

		</script>
	
	
</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>
		<script type="text/javascript">
		$(function(){
//			1.给span添加鼠标点击事件.
$("#sa").click(function(){
	console.info("span被点击了");



	//			4.点击span，事件传播截止到span.
	return false;
})
//			2.给div添加鼠标点击事件.
$("#da").click(function(){
	console.info("div被点击了");




	//			5.点击span，事件传播截止到div.
	return false;
})
//			3.给body添加鼠标点击事件.
$("body").click(function(){
	console.info("body被点击了");



})

		})

		</script>
	</head>
	<body>
		<div id="da" style="background-color: aqua;width: 200px;height: 100px;">
			<br />
			<center>
				<span id="sa" style="background-color:coral;">这是span标签</span>
			<center />
		</div>
	</body>
</html>

移除事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
		<script>
		$(function(){


//			1.给按钮添加鼠标点击事件，且只能点击一次。
 // $("#sb").click(function(){


	//  console.info("鼠标点击！")


	//  $("#sb").unbind("click")


	//  $("#sb").off("click")


 // })
// 			2.给i按钮添加鼠标点击事件,且只能偶数次点击才有效,奇数次则失效.
//方式一：
// var i = 1;
// $("#sb").click(function(){


// 	if(i%2==0){

// 		console.info("鼠标点击！")


// 	}
// 	i++;
// })
//.方式二
// $("#sb").toggle(function(){ $("#sb").unbind("click")},function(){console.info("鼠标点击！")})


// 			3.给按钮添加鼠标点击事件，且只能点击一次,通过函数one来完成.	
$("#sb").one("click",function(){


	console.info("鼠标点击！")


  })
		})

		</script>
	</head>
	<body>
		<input type="button" id="sb" value="这个按钮不一般" />
	</body>
</html>

动画-基本动画.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-1.7.2.js"></script>
		<script type="text/javascript">
		$(function(){

//			1.给隐藏按钮添加事件：使div在规定的时间内消失。

// $("#hide").click(function(){

// 	$("#da").hide(1000);


// })
//			2.给显示按钮添加事件：使div在规定的时间内显示。

// $("#hide").click(function(){

// 	$("#da").show(1000);

// })
//			3.给显示/隐藏按钮添加事件：使div在规定的时间内显示和隐藏。

// $("#toggle").toggle(function(){$("#da").hide(1000)},function(){$("#da").show(1000)})

//			4.给隐藏按钮添加事件：使div在规定的时间内隐藏，并且显示图片ia。

			// $("#hide").click(function(){$("#da").hide(1000),$("#ia").show(1000)})

		})
		</script>
	</head>
	<body>
		<input type="button" value="显示" id="show" />
		<input type="button" value="隐藏" id="hide" />
		<input type="button" value="显示/隐藏" id="toggle" />
		<div id="da" style="background-color: deeppink; width: 200px; height: 100px;">
</div><br />
		<img src="img/微信图片_20220421162227.jpg" id="ia" width="100px"height="100px"style="display: none;"/>
	</body>
</html>

动画-滑动动画

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
		<script type="text/javascript">
		$(function(){

//				1.给显示按钮添加鼠标点击事件：使div在指定时间内向下显示.

$("#show").click(function(){

	$("#da").slideDown(5000);

})
//				2.给隐藏按钮添加鼠标点击事件：使div在指定时间内向下隐藏.

$("#hide").click(function(){

	$("#da").slideUp(5000);

})
//				3.给显示/隐藏按钮添加鼠标点击事件：使div在指定时间内向下显示和向下隐藏.	


		$("#toggle").toggle(function(){$("#da").slideUp(3000)},function(){$("#da").slideDown(3000)})
		})

		</script>
		
		
	</head>
	<body>
		<input type="button" value="显示(向下)" id="show" />
		<input type="button" value="隐藏(向上)" id="hide" />
		<input type="button" value="显示/隐藏" id="toggle" />
		<div id="da" style="background-color: pink; width: 240px; height: 500px;">
		</div>
	</body>
</html>

动画-淡入淡出动画

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
		<script type="text/javascript">
		$(function(){

			// 显示(淡入)

			$("#show").click(function(){

				$("#da").fadeIn(1000);

			})

			// 隐藏(淡出)

			$("#hide").click(function(){

				$("#da").fadeOut(1000);

			})

			// 显示/隐藏

			$("#toggle").toggle(function(){$("#da").fadeOut(1000)},function(){$("#da").fadeIn(1000)})

		})
			
	
		</script>
	</head>
	<body>
		<input type="button" value="淡入" id="show" />
		<input type="button" value="淡出" id="hide" />
		<input type="button" value="淡入/淡出" id="toggle" />
		<div id="da" style="background-color: coral; width: 240px; height: 500px;">
		</div>
	</body>
</html>

动画-自定义动画.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(function(){

				// 放大

				$("#big").click(function(){

					$("#da").animate({

						width:500 +"px",

						height:500 +"px"

					},1000)

				})

				// 缩小

				$("#small").click(function(){

					$("#da").animate({

						width:300+"px",

						height:300+"px"

					},2000)

				})
				// 往右移动

				$("#right").click(function(){

					$("#da").animate({

						left:500+"px",

					},2000)
				})
				// 往左移动

				$("#left").click(function(){

					$("#da").animate({

						left:300+"px",

					},2000)
				})
				// 往下移动

				$("#down").click(function(){

					$("#da").animate({

						top:300+"px",

					},2000)
				})
				// 往上移动

				$("#up").click(function(){

					$("#da").animate({

						top:200+"px"

					},2000)
				})
				// 斜下右移动

				$("#xxy").click(function(){

					$("#da").animate({

						top:300+"px",

						right:300+"px"

					},2000)
				})
				// 斜上左移动

				$("#xsz").click(function(){

					$("#da").animate({

						top:100+"px",

						left:100+"px"

					},2000)
				})
			});
		</script>
	</head>
	<body>
		<input type="button" value="上移" id="up" />
		<input type="button" value="下移" id="down" />
		<input type="button" value="右移" id="right" />
		<input type="button" value="左移" id="left" />
		<input type="button" value="放大" id="big" />
		<input type="button" value="缩小" id="small" />
		<input type="button" value="斜下右" id="xxy" />
		<input type="button" value="斜上左" id="xsz" />
		<div id="da" style="background-color: pink; width: 100px; height: 100px;position: absolute;">
	</body>
</html>
举报

相关推荐

jQuery-04 (事件&动画)

jquery动画javascript

jQuery04 事件&动画

javascript前端

jQuery04(事件&动画)

jquery前端

jQuery_04 事件&动画

jqueryjavascriptecmascript

JQuery04 动画和事件

html前端jquery

jQuery.04.动画和事件

jqueryjavascripthtml

jQuery事件 jQuery动画

jquery

jQuery 动画&事件

jquery

jQuery事件&动画

jqueryjavascript前端css

jQuery动画和事件

jqueryjavascripthtml
0 条评论