目录
事件
加载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
双击事件 ondblclickPS: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"
})
})
你要尽全力保护你的梦想。那些嘲笑你梦想的人,他们注定失败,他们想把你变成和他们一样。我坚信,只要心中有梦想,我就会与众不同。你也是。