jQuery的动画和事件

菲仔yo

已于 2022-03-21 15:10:01 修改

阅读量1.2k

点赞数 5

分类专栏： jQuery 文章标签： html jquery

于 2022-03-21 15:05:52 首次发布

本文链接：https://blog.csdn.net/m0_67331668/article/details/123625985

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

hello，各位帅哥美女们，欢迎来到这次的分享环节，今天给大家带来的是jQuery简单的动画和事件，话不多说，让我们一起来看看吧

一、jQuery事件

1.加载Dom两种方式

1>.window.onload方式

执行时间：整个网页中所有内容（包括图片）加载完成后，才会执行
编写个数：1个

2>.jQuery方式

执行时间：网页结构绘制完成后，执行
编写个数：多个

3>.两个都有的情况下执行顺序【面试题】

jQuery3.0：window.onload比jQuery先执行
jQuery1.0和2.0：jQueryt比window.onload先执行

2.绑定事件两种方式

1>.元素.on(“事件名”，function(){}）

2>.元素，串件名（function(){}）

3.合成事件/事件切换

1>.hover0：鼠标悬停合成事件

鼠标移上去第一个函数

鼠标移除第二个函数

2>.toggle0：鼠标点击合成事件


    <style>
			div{
				width: 100px;
				height: 200px;
				display: inline-block;
				background: orangered;
				position: absolute;
				margin: auto;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);
			}
		</style>
	</head>
	<body>
		<div></div>
		<button onclick="$('div').toggle(1000)">点我</button>
		<script src="js/jquery-3.5.1.js"></script>
	</body>

点击前：

点击后：会根据设置的时间进行缩放

4.事件传播（事件冒泡）

1>.传播：小-->中-->大
2>.阻止传播：事件后面加上 return false

<body>
		<a href="https://www.baidu.com">
			<p>fsfdfsfsggsdg</p>
		</a>
		<script src="js/jquery-3.5.1.js"></script>
		<script>
			$("p").click(() => {
				alert("----")
				return false //阻止事件的冒泡
			})
		</script>
</body>

5.事件坐标

1>.offsetX：当前元素左上角

2>.clientX：窗口左上角

3>.pageX：网页左上角

<script>
    $("body").mousemove(e=>{
	    //e就是事件对象
	    console.log(e.clickX,e.pageX,e.offsetX)
    })
</script>

6.移除事件

注意1：一般情况下，不会使用unbind，推荐使用变量控制事件

注意2：如果某个元素只允许使用一次事件，则可以使用one()

二.jQuery动画

1.基本

显示：show(Time)

隐藏：hide(Time)

切换：toggle(Time)

2.滑动

slideUp(Time)：动画收缩（向上滑动)-->隐藏

slideDown(Time)：动画展开(向下滑动)-->显示

slideToggle(Time)：动画切换

3.淡入淡出（透明度）

fadeIn(Time)：淡入(透明度减少）

fadeOut(Time)：淡出(透明度增大)

fadeToggle(Time)：切换

4.自定义动画

1>.元素.animate({属性：属性值},Time)

2>.缩放

width

height

效果图如下：

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 100px;
				height: 200px;
				display: inline-block;
				background: orangered;
				position: absolute;
				margin: auto;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);
			}
		</style>
	</head>
	<body>
		<div></div>
		<script src="js/jquery-3.5.1.js"></script>
		<script>
			$("div").mouseover(function (){
				$(this).animate({
					width:"300px",
					height:"300px",
					// left:"30px",
					// top:"30px"
				})
			})
		</script>
	</body>
</html>

3>.移动

top

left

4>.移动（本元素），距离

top= "+="

left="-="

三、案例（表格添加、删除行）

初始表格：

增加一行：

删除一行：

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			$(()=>{//窗口加载完成后再进行操作
				/**
				$("td>button").click(function (){
					$(this).parents("tr").remove()
					alert("----")
				})
				**/
				$("table").on("click","button",function (){
					$(this).parents("tr").remove()
					alert("---")
				})
				//add有两个点击事件
				$("#add").click(function (){
					let str=`<tr>
				<td>❤❤❤❤</td>
				<td>
					<button>点我删除</button>
				</td>
			</tr>`
					$("table").append(str)
				})
				
				//this在正常函数中就是this
				//this在箭头函数中就是window
			})
		</script>
		<table border>
			<tr>
				<td>❤❤❤❤</td>
				<td>
					<button>点我删除</button>
				</td>
			</tr>
			<tr>
				<td>❤❤❤❤</td>
				<td>
					<button>点我删除</button>
				</td>
			</tr>
		</table>
		<button id="add">点我增加</button>
	</body>
</html>

好啦，今天就分享到这里了，下次再见咯