jQuery04.事件&动画

也跌

已于 2022-03-20 17:08:14 修改

阅读量450

点赞数 3

文章标签： javascript jquery 前端 html5

于 2022-03-19 17:44:42 首次发布

本文链接：https://blog.csdn.net/github_67177094/article/details/123598562

版权

回顾:jQuery03.筛选&文档

目录

事件

加载Dom的方式

绑定事件的方式

合成事件/事件切换

事件传播/事件冒泡

事件坐标

移除事件

动画效果

基本动画

滑动动画

淡入淡出

自定义动画

事件

加载Dom的方式

1.window.onload方式

执行时间:整个网页中所有内容(包括图片)加载完成后,才会执行

编写个数:1

<script type="text/javascript">
	window.onload=()=>{
		alert('js加载完成了')
	}
</script>

2.jQuery方式

执行时间:网页结构绘制完成后,执行

编写个数:多个

<script type="text/javascript">
	$(()=>{
		alert('jQuery加载完成')
	})
</script>

两种情况的执行顺序

jQuery3.0：window.onload比jQuery先执行

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

绑定事件的方式

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

2. 元素.事件名(function(){})

js常用事件:

点击 onclick
鼠标 onmouseover onmouseout onmousemove
键盘 onkeydown onkeyup onkeypress
表单提交 onsubmit 表单重置 onreset
输入框的值发生改变的时候 onchange
失去焦点 onblur 得到焦点 onfocus
双击事件 ondblclick

PS:jQuery事件仅在js事件上没有on，js的事件只有一个，jquery能有多个事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/jquery-3.5.1.js"></script>
		<style type="text/css">
			div{
				width: 200px;
				height: 200px;
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<div id="div"></div>
		<button type="button" id="del">点我删除div</button>
		<script type="text/javascript">
			$('#del').click(function (){
				$(this).siblings('div').remove()
			})
		</script>
	</body>
</html>

注意: this在正常函数中就是this
this在箭头函数中就是window

合成事件/事件切换

1. hover(over,out) 鼠标悬停合成事件

over:鼠标移到元素上要触发的函数

out:鼠标移出元素要触发的函数

2. toggle(speed,easing,fn) 鼠标点击合成事件(第一次为隐藏第二次为显示)

speed: 隐藏/显示效果的速度。默认是 "0"毫秒。可能的值：slow，normal，fast。"

easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"

fn:在动画完成时执行的函数，每个元素执行一次。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/jquery-3.5.1.js"></script>
		<style type="text/css">
			div{
				width: 200px;
				height: 200px;
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<div id="div"></div>
		<button type="button" id="del" onclick="$('div').toggle(1000)">点我隐藏div</button>
		<script type="text/javascript">
			$('div').hover(function (){
				$(this).hide(1000) //div隐藏
			})
		</script>
	</body>
</html>

事件传播/事件冒泡

传播：小-->中-->大

阻止传播：事件后面加上 return false

事件坐标

1. offsetX 当前元素左上方

2. clientX 窗口左上方

3. pageX 网页左上方

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

移除事件

元素.unbind("事件名")

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

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

$("body").unbind("mousemove")

动画效果

基本动画

显示: show(speed,easing,fn)

隐藏: hide(speed,easing,fn)

切换: toggle(speed,easing,fn)

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"

fn:在动画完成时执行的函数，每个元素执行一次。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            margin: auto;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <div></div>
    <button onclick="$('div').toggle(1000)">点我</button>
</body>
</html>

滑动动画

1. slideUp(speed,easing.fn) 动画收缩(向上滑动)-->隐藏

2. slideDown(speed,easing.fn) 动画展开(向下滑动)-->显示

3. slideToggle(speed,easing.fn) 动画切换

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"

fn:在动画完成时执行的函数，每个元素执行一次。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/jquery-3.5.1.js"></script>
		<style type="text/css">
			div{
				width: 200px;
				height: 200px;
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<div id="div"></div>
		<button type="button" id="del" onclick="$('div').slideToggle(1000)">点我隐藏</button>
	</body>
</html>

淡入淡出

1. fadeIn(speed,easing,fn) 淡入(透明度减少)

2. fadeOut(speed,easing,fn) 淡出(透明度增大)

3. fadeToggle(speed,easing,fn) 切换

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"

fn:在动画完成时执行的函数，每个元素执行一次。

<script type="text/javascript">
	$('div').hover(function (){
		$(this).fadeToggle(1000) //div隐藏
	})
</script>

自定义动画

元素.animate({params,speed,easing,fn)

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

params:一组包含作为动画属性和终值的样式属性和及其值的集合

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".

fn:在动画完成时执行的函数，每个元素执行一次。

缩放: width height

移动: top left

移动(本元素),距离: top="+=" left="+="

$("div").mouseover(function (){
         $(this).animate({
         width:"300px",
         height:"300px",
         // left:"30px",
         // top:"30px"
      })
 })

你要尽全力保护你的梦想。那些嘲笑你梦想的人，他们注定失败，他们想把你变成和他们一样。我坚信，只要心中有梦想，我就会与众不同。你也是。

也跌

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery04.事件&动画

回顾:jQuery03.筛选&文档目录事件加载Dom的方式绑定事件的方式合成事件/事件切换事件传播/事件冒泡事件坐标移除事件动画效果基本动画滑动动画淡入淡出自定义动画事件加载Dom的方式1.window.onload方式执行时间:整个网页中所有内容(包括图片)加载完成后,才会执行编写个数:12.jQuery方式执行时间:网页结构绘制完成后,执行编写个数:多个两种情况的执行顺序jQuery3.0.
复制链接

扫一扫