jQuery动画和事件

筱☆

已于 2022-12-03 18:20:05 修改

阅读量823

点赞数 4

文章标签： javascript

于 2022-03-21 20:48:49 首次发布

本文链接：https://blog.csdn.net/weixin_67235801/article/details/123642236

版权

一、事件

说到事件，小编先来个大家普及一下常用的事件。（表格中为js事件）

onclick	点击事件
onmouseover	鼠标移入
onmouseout	鼠标移出
onmousemove	鼠标移动
onkeydown	键盘按下
onkeyup	键盘松开
onkeypress	键盘按一次
onsubmit	表单提交
onreset	表单重置
onchange	输入框的值发生改变的时候
onfocus	获得焦点
onblur	失去焦点
ondblclick	双击事件

jQuery的事件就是js去掉on，js事件只有一个，jQuery事件能够有多个事件。

1.绑定事件的方法

一、元素.on("事件名",function(){}) （这也是委托事件）

二、元素.事件名(function(){})

<style>
	div{
		width: 200px;
		height: 200px;
		background: red;
	}
</style>

<div></div>

<script src="js/jquery-3.5.1.js"></script>
<script>
	$("div").click(()=>{
		alert("==")
	})
	
	$("div").click(function (){
		alert("￥￥")
	})
</script>

点击红色方块，在jQuery中执行为以下两个图片所示

这体现出jQuery能够有多个事件，在js中，只执行最后那个事件

2.加载事件

window.οnlοad=()=>{} js加载事件
$(()=>{}) jQuery加载事件

下面我们用加载事件来实现表格删除一行以及增加一行的案例

<table border="">
	<tr>
		<td>🥪🥪🥪🥪🥪🥪🥪</td>
		<td>
			<button>删除</button>
		</td>
	</tr>
	<tr>
		<td>🥪🥪🥪🥪🥪🥪🥪</td>
		<td>
			<button>删除</button>
		</td>
	</tr>
	<tr>
		<td>🥪🥪🥪🥪🥪🥪🥪</td>
		<td>
			<button>删除</button>
		</td>
	</tr>
</table>
<button id="add">增加一行</button>

<script src="js/jquery-3.5.1.js"></script>
<script>
	$(()=>{ //窗口加载完成之后执行
	// 	$("td>button").click(function (){
	// 		$(this).parents("tr").remove()
	// 	})
		$("table").on("click","button",function(){
			$(this).parents("tr").remove()
		})
		$("#add").click(function (){
			let str=`<tr>
						<td>🥪🥪🥪🥪🥪🥪🥪</td>
						<td>
							<button>删除</button>
						</td>
					</tr>`
			$("table").append(str)
		})
</script>

this在正常函数（function）中就是this
this在箭头函数中就是window

3.事件坐标

offsetX	当前元素左上角
clientX	窗口左上角
pageX	页面左上角

<script src="js/jquery-3.5.1.js"></script>
<script>
	$("body").mousemove(e=>{
		//e就是事件对象
		console.log(e.clientX,e.pageX,e.offsetX)
		//取页面坐标
		// e.clientX,e.pageX 屏幕位置
		// e.offsetX body位置
	})
</script>

图片为鼠标的位置（鼠标移动，位置也跟着改变）

e.clientX,e.pageX 屏幕位置
e.offsetX body位置

4.移出事件

元素.unbind("事件名")

$("body").unbind("mousemove") //移除后就不会输出鼠标位置了

二、动画效果

1.基本

show(Time)	显示
hide(Time)	隐藏
toggle(Time)	切换（是显示就隐藏，隐藏就显示）

<div></div>
<button onclick="$('div').toggle(1000)">点我</button>

2.滑动

slideUp(Time)	动画收缩（向上滑动）隐藏
slideDown(Time)	动画展开（向下滑动）显示
slideToggle(Time)	动画切换

3.淡入淡出

fadeIn(Time)	淡入（透明度减少）
fadeOut(Time)	淡出（透明度增大）
fadeToggle(Time)	切换

滑动，淡入淡出与基本动画使用方法一样，但展现效果不同，可挑选自己喜欢的使用

4.自定义动画

元素.animate({属性:属性值},Time)

缩放

width	宽
height	高

移动

top	顶部
left	左边

left跟top只针对于绝对布局生效

<div></div>

效果不太好展示，可自行去试试

<script src="js/jquery-3.5.1.js"></script>
<script>
	$("div").mouseover(function (){
		$(this).animate({
			width:"300px",
			height:"300px",
		})
	})
</script>

今日分享就到这里啦，我们下次见