今天是JQuery的第四节课啦，今天主要讲JQuery的动画和事件,大家有不懂的在下方评论或者私信，也希望和小编一样在长沙的家人们，做好防疫措施，出门带好口罩，能不出门尽量不出门，不给国家添麻烦。好啦我们要开始今天的课程啦，大家有不懂的在下方评论或者私信小编噢，看到一定会回复的。
目录
2. on("事件",function (){})：绑定事件
3.元素.animate({属性,"属性值"},time）：自定义动画
一.事件
先带大家回忆下我们学过的一些事件。
注:
- jquery的事件就是js去掉on
- jquery的事件可以有多个
- js的事件只有一个
| onclick | 点击事件 |
| ondblclick | 双击事件 |
| onmouseover | 鼠标移入事件 |
| onmouseout | 鼠标移出事件 |
| onkeydown | 键盘按下事件 |
| onkeyup | 键盘松开事件 |
| onsubmit | 表单提交事件 |
| onchange | 输入框的值发生改变事件 |
| onblur | 失去焦点事件 |
| onfocus | 获得焦点事件 |
1. window.onload() :窗口加载事件
window.onload=()=>{}
2. on("事件",function (){})：绑定事件
绑定事件我们可以理解为，当一件事情你做不好时，于是我让别人来做。
格式：
- 元素.on("事件",function(){})
- 元素.事件名(function (){})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery-3.5.1.js"></script>
</head>
<body>
<script>
// jq中的点击事件就是js中的事件去掉on
// js中事件只有一个
// jq中事件可以有多个
// window.onload加载事件
// 因为我们的表格是写在下方，如果不写加载事件，那么删除按钮无效
window.onload=()=>{
/**
* 这种写法会导致新增加的行的删除按钮不具备删除功能
// td button意思：td下的button
$("td button").click(function(){
// this是js 要转成jq js转成jq 格式 $(js)
$(this).parents("tr").remove();
})
**/
// 元素.on("事件名"，function(){})
// 我们可以把这种叫做事理解为，你做不好，我委托给别人
// 这样子我们的button都具备删除的功能
$("table").on("click","button",function (){
// 这里的this是button
$(this).parents("tr").remove();
})
// 增加
// 在这一步会发现新增加的行，删除按钮没有具备删除功能
$("#add").click(function (){
//使用反引号``
let i=`<tr>
<td>🍉🍉🍉🍉🍉🍉 </td>
<td><button>删除</button></td>
</tr>`;
// 增加进表格中
$("table").append(i);
})
}
</script>
<table border>
<tr>
<td>🍉🍉🍉🍉🍉🍉 </td>
<td><button>删除</button></td>
</tr>
<tr>
<td>🍉🍉🍉🍉🍉🍉 </td>
<td><button>删除</button></td>
</tr>
</table>
<button id="add">增加</button>
</body>
</html>
3.hover() : 鼠标悬停合成事件
当鼠标移入时执行第一个函数，移出时执行第二个函数。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery-3.5.1.js"></script>
<style>
.hover{
width: 200px;
height: 300px;
background: aliceblue;
}
</style>
</head>
<body>
<div>hhh</div>
<script>
// hover 当你移入时执行第一个函数，移出时执行第二个函数
$("div").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);
</script>
</body>
</html>
4.toggle（）：鼠标点击合成事件
鼠标点击时，显示时隐藏，隐藏时显示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery-3.5.1.js"></script>
<style>
#xx{
width: 200px;
height: 300px;
background:bisque;
}
</style>
</head>
<body>
<div id="xx">xx</div>
<!-- toggle:鼠标点击事件，显示时，点击隐藏， 隐藏时点击显示-->
<button onclick="$('#xx').toggle(1000)">点我</button>
</body>
</html>
5.事件传播(事件冒泡 )
事件传播是由小----中----大
阻止事件传播：在事件后面加上 return false;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery-3.5.1.js"></script>
</head>
<body>
<---这个时候我们的代码还是可以跳转到百度界面--->
<a href="https://www.baidu.com">
<p>点我</p>
</a>
<script>
$("p").click(function (){
return false //阻止事件的冒泡:无法在跳转到百度界面
});
</script>
</body>
</html>
6.事件坐标
offsetX当前元素左上角
clientX窗口左上角
pageX 网页左上角
$("body").mousemove(e=>{
// e就是事件对象
// offsetX当前元素左上角
// clientX窗口左上角
// pageX 网页左上角
console.log(e.offsetX,e.clientX,e.pageX);
})7.unbind("事件名")：移出事件
$("body").mousemove(e=>{
// e就是事件对象
// offsetX当前元素左上角
// clientX窗口左上角
// pageX 网页左上角
console.log(e.offsetX,e.clientX,e.pageX);
})
// 移出事件
$("body").unbind("mousemove");二.动画
1.滑动切换
- toggle(time) 从左右滑动
- slideToggle(time) 是上下滑动
- 两个都是当显示时隐藏，隐藏时显示
toggle(time)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery-3.5.1.js"></script>
<style>
#xx{
width: 200px;
height: 300px;
background:bisque;
}
</style>
</head>
<body>
<div id="xx">xx</div>
<!-- toggle:鼠标点击事件，显示时，点击隐藏， 隐藏时点击显示-->
<button onclick="$('#xx').toggle(1000)">点我</button>
</body>
</html>
slideToggle(time) 是上下滑动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery-3.5.1.js"></script>
<style>
#hh{
width: 200px;
height: 300px;
background:chartreuse;
}
</style>
</head>
<body>
<div id="hh">哈哈哈</div>
<button id="but">哈哈哈</button>
<script>
$("#but").click(function (){
$("#hh").slideToggle(1000);
})
</script>
</body>
</html>
2.fadeToggle（time）:淡出动画
<div id="ll"></div>
<button onclick="$('#ll').fadeToggle(1000)">啦啦</button>3.元素.animate({属性,"属性值"},time）：自定义动画
缩放 宽和高
width
height
移动
left
top
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery-3.5.1.js"></script>
<style>
#dd{
width: 100px;
height: 100px;
background: red;
position: absolute;
margin: auto;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div id="dd"></div>
<script>
$("#dd").mouseover(function (){
$(this).animate({
width:"400px",
height:"400px",
// left:"30px",
// top:"30px"
})
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery-3.5.1.js"></script>
<style>
li{
/*去除选项前面的点点*/
list-style: none;
}
</style>
</head>
<body>
<ul>
<li>
<p>电器</p>
<ol>
<li>冰箱</li>
<li>电视机</li>
<li>洗衣机</li>
<li>吹风机</li>
</ol>
</li>
<li>
<p>水果</p>
<ol>
<li>菠萝</li>
<li>西瓜</li>
<li>哈密瓜</li>
<li>草莓</li>
</ol>
</li>
<li>
<p>奶茶</p>
<ol>
<li>烧仙草</li>
<li>葡萄啵啵</li>
<li>草莓啵啵奶茶</li>
<li>金桔柠檬</li>
</ol>
</li>
</ul>
<script>
// 当点击展开时展开
$("p").click(function (){
$(this).siblings().slideToggle(1000);
})
</script>
</body>
</html>
好啦，今天的课程到此结束，大家一定要好好敲代码，一定要做好防疫措施噢，让我们一起对抗病毒，不给国家添麻烦，下次见啦，有不懂的在下方评论或者私信噢，拜拜啦！
