本文已参与「新人创作礼」活动，一起开启掘金创作之路。
一、JQ事件
1.单击事件：click
2.双击事件：dblclick
3.划入事件：mouseenter
4.划出事件：mouseleave
5.划入划出事件：hover
6.绑定事件：on
7.绑定事件：以键值对的形式进行绑定
8.删除绑定事件：off
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 100px;
height: 100px;
background-color: black;
}
</style>
</head>
<body>
<div></div>
<button>按钮</button>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.js"></script>
<script>
// 1.JQ单击事件
// JS里单击事件是onclick = func(){}
// JQ里面单击事件是click()
// $("button").click(function () {
// console.log(1);
// })
// 2.JQ双击事件
// JS里面是ondblclick
// JQ里面是dblclick JQ里面去掉前面的on就行
// $("button").dblclick(function () {
// console.log(2);
// })
// 3.JQ划入事件
// $("div").mouseenter(function(){
// console.log(11);
// })
// 4.JQ划出事件
// $("div").mouseleave(function(){
// console.log(22);
// })
// 5.hover:既有划入事件功能，又有划出事件功能
// $("div").hover(function () {
// console.log("划入事件");
// },function(){
// console.log("划出事件");
// })
// 6.绑定事件 on
// 点击改变背景颜色
$("div").on("click",function(){
$(this).css("background","red")
})
// 7.绑定多个事件：以键值对的方式
$("div").on({
"mouseenter":function () {
$(this).css("background","skyblue")
},
"mouseleave":function () {
$(this).css("background","yellow")
}
})
// 8.删除绑定事件 off() 不传参 删除全部事件
// $("button").click(function () {
// $("div").off()
// })
// 删除指定事件 off()传参 删除固定的事件
$("button").click(function () {
$("div").off("click")
})
</script>
</body>
</html>
二、JQ动画
1.淡出
1）hide：向左上角隐藏
2）slideUp：向上隐藏
2.淡入
1）show：右下角显示
2）slideDown：向下显示
3.淡入淡出
1）slideToggle：向上向下淡入淡出
2）toggle：向左上向右下淡入淡出
4.渐出：fadeOut
5.渐入：fadeIn
6.渐入渐出：fadeToggle
7.JQ动画：添加动画事件
8.停止动画：stop
9.延迟动画固定时间后，继续执行动画效果：delay
具体使用方法如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
background-color: red;
position: relative;
}
</style>
</head>
<body>
<button>淡入</button>
<button>淡出</button>
<button>淡入/淡出</button>
<button>渐入</button>
<button>渐出</button>
<button>渐入/渐出</button>
<button>动画</button>
<button>停止动画</button>
<button>延迟执行</button>
<div></div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.js"></script>
<script>
// JQ动画
// 1.JQ淡出（隐藏）
$("button").eq(0).click(function () {
// $("div").hide(2000) //2000：2秒内隐藏向左上角隐藏
$("div").slideUp(2000) //2000：2秒内隐藏向上隐藏
})
// 2.JQ淡入（显示）
$("button").eq(1).click(function () {
// $("div").show(2000) //2000：2秒内隐藏向右下角显示
$("div").slideDown(2000) //2000：2秒内隐藏向下显示
})
// 3.JQ淡入淡出
$("button").eq(2).click(function () {
// $("div").slideToggle(2000) //向上向下淡入淡出
$("div").toggle(2000) //向左上向右下淡入淡出
})
// 4.JQ渐出
$("button").eq(3).click(function () {
$("div").fadeOut(2000)
})
// 5.JQ渐入
$("button").eq(4).click(function () {
$("div").fadeIn(2000)
})
// 6.JQ渐入渐出
$("button").eq(5).click(function () {
$("div").fadeToggle(2000)
})
// 7.JQ动画
$("button").eq(6).click(function () {
// 点击动画按钮，盒子变大
$("div").animate({
// 以键值对的形式传递操作，后面可以输入时间
// 颜色无法生效，只能改变宽高
// "width":"300px",
// "height":"300px",
// "height":"300px" //颜色不生效
"top":"100px", //要给父级盒子加上相对行为后才能生效，应为默认是静态定位
"left":"100px",
},2000)
})
// 8.停止动画
$("button").eq(7).click(function () {
$("div").stop()
})
// 9.延迟动画固定时间后，继续执行动画效果
$("button").eq(8).click(function () {
$("div").delay(5000).animate({
"top":"50px", //要给父级盒子加上相对行为后才能生效，应为默认是静态定位
"left":"50px",
},2000)
})
</script>
</body>
</html>
