目录
事件传播/事件冒泡方式:从自己往比自己等级高的地方一层一层传送
事件
加载Dom的方式
1.window.onload方式
执行时间:整个网页中所有内容加载完成后,才会执行
编写个数:1
<script type="text/javascript">
window.onload=()=>{
alert('pppp')
}
</script>
2.jQuery方式
执行时间:网页结构绘制完成后,执行
编写个数:多个
<script type="text/javascript">
$(()=>{
alert('jQuery加载完成')
})
</script>
js常用事件:
点击 onclick
鼠标 onmouseover onmouseout onmousemove
键盘 onkeydown onkeyup onkeypress
表单提交 onsubmit 表单重置 onreset
输入框的值发生改变的时候 onchange
失去焦点 onblur 得到焦点 onfocus
双击事件 ondblclickPS:jQuery事件仅在js事件上没有on,js的事件只有一个,jquery能有多个事件
ps:在正常函数中this是指自己
箭头函数中是指窗口(window)
<!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>
合成事件/事件切换
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 网页左上方
动画效果
基本动画
显示: 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"
在动画完成时执行的函数,每个元素执行一次。
<script type="text/javascript">
$('div').hover(function (){
$(this).fadeToggle(1000) //div隐藏
})
</script>
持续更新中