jQuery 动画&事件

王真教掌门

已于 2022-03-19 21:07:48 修改

阅读量932

点赞数 4

文章标签：前端 javascript css 开发语言

于 2022-03-19 21:07:06 首次发布

本文链接：https://blog.csdn.net/WZJ278/article/details/123601402

版权

本文详细介绍了jQuery中的动画效果，包括显示、滑动、淡入淡出等，并通过代码演示了如何实现这些效果。同时，还讲解了jQuery事件处理，如加载事件、绑定事件、事件冒泡等，以及如何运用在实际场景中，例如元素的鼠标移入移出事件和表格的删除操作。最后，提供了关于jQuery事件和动画的实战代码示例。

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

动画

jQuery动画：基本包含了一个动画的显示滑动出入效果等三种效果

显示动画

1.显示动画 show()

2.隐藏动画 hide()

3.切换动画 toggle（）包含上面两种方法来回切换

滑动动画

1.动画收缩 slideUp() 向上收缩隐藏

2.动画展开sildeDown() 向下滑动展开

3.silddeToggle()切换包含上面两种方法来回切换

动画淡入淡出

1.淡入 fadeIn（）透明度减少

2.淡出 fadeOut () 透明度增大

3.切换 fadeToggle（）切换包含上面两种方法来回切换

还可以自义定动画放大切换等效果元素.animate({属性：属性值}，time)

代码演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		div{
			width:  100px;
			height: 100px;
			display: inline-block;
			background: hotpink;
		}
	</style>
	<body>
	<div id="">
		</div>
<button type="button" onclick="$('div').toggle(1000)">dd</button>	<!-- //togg属性隐藏和显示画面 -->
	</body>
<script src="jquery-3.5.1.js"></script>
<script>


</script>
</html>

效果图

显示的话就是隐藏隐藏的话就是显示来回切换

代码演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		div{
			width:  100px;
			height: 100px;
			display: inline-block;
			background: hotpink;
		}
	</style>
	<body>
	<div id="">
		</div>
	</body>
<script src="jquery-3.5.1.js"></script>
<script>
//给div设置鼠标移入移除事件 来切换大小
$("div").mouseover(function(){
			$(this).animate({
				width:"300px",
				height:"300px"
			})
		})
		$("div").mouseout(function(){
			$(this).animate({
				width:"100px",
				height:"100px"
			})
		})

</script>
</html>

效果图

使用了自定义放大缩小

事件

jQuery事件有加载事件绑定事件事件冒泡坐标事件移除事件

加载事件

加载Dom两种方法

window.onloadd=()=>{} window的加载方法

$(()=>{}) jQuery的加载方法有一个关于面试的问题 jQuery1.0和2.0 比window先运行但是3.0会后执行有兴趣的朋友可记一下

绑定事件的两种方法

元素.on("事件名",function(){})

元素.事件名（function(){}）

事件传播的意思从小到大一层一层提交阻止方法 return false

坐标事件

offsetX:当前这个元素的左上角

e.pageX：窗口左上角

e.client：网页左上角

移除事件

元素.unbind("事件名")

代码演练

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		div{
			width:  100px;
			height: 100px;
			display: inline-block;
			background: hotpink;
		}
	</style>
	
	<body>
		<div id="">
 		
		</div>
		<a href="https://www.baidu.com">
		    <p>dasdasdasdsada</p>
		</a>
		<!-- //togg属性隐藏和显示画面 -->
		<button type="button" onclick="$('div').toggle(1000)">dd</button>
	<table id="ta" border="" cellspacing="" cellpadding="">
		<tr>
			<td>dsada</td>
			<td><button type="button">删除</button></td>
		</tr>
		<tr>
			<td>dsada</td>
			<td><button type="button">删除</button></td>
		</tr>
		<tr>
			<td>dsada</td>
			<td><button type="button">删除</button></td>
		</tr>
		<tr>
			<td>dsada</td>
			<td><button type="button">删除</button></td>
		</tr>
	</table>
	<button type="button" id="add">点我增加</button>
	</body>
	<script src="jquery-3.5.1.js"></script>
	<script type="text/javascript">
	$("p").click(()=>{
		alert("----")
		return false;
	})
		//jQuery 有一个特性会有多个加载事件
		
		$("div").click(function(){
			alert("sss")
		})
		$("#ta button").click(function(){
			$(this).parents("tr").remove()	})
		$(()=>{})//加载事件
		//委托事件解决添加事件的重复，把添加事件委托给了其他人
		$("table").on("click","button",function(){})
		$("#add").click(function(){
			 let ad=`<tr>
			<td>dsada</td>
			<td><button type="button">删除</button></td>
		</tr>`
		$("table").append(ad)
		})
		//this特性在正常函数里面是this
		//在箭头函数里面是window
		
		$("body").mousemove(e=>{
			//屏幕位置和body位置
			console.log(e.clientX,e.pageX,e.offsetX);
		})
		//解除事件
		$("body").unbind("mousemove")
		//动画效果  sildeToggle 动画切换 
		//fadein: fadein:淡入
		//fadeout:淡出
		//fadeToggle:切换  
		$("div").mouseover(function(){
			$(this).animate({
				width:"300px",
				height:"300px"
			})
		})
		$("div").mouseout(function(){
			$(this).animate({
				width:"100px",
				height:"100px"
			})
		})
	</script>
</html>

今天关于jQuery事件&动画方法已经结束了，小编还会写一些关于jQuery的文章

再见了各位！！！