事件
jQuery事件 有加载事件 绑定事件 事件冒泡 坐标事件 移除事件
加载事件
加载Dom两种方法
window.onloadd=()=>{} window的加载方法
$(()=>{}) jQuery的加载方法 有一个关于面试的问题 jQuery1.0和2.0 比window先运行 但是3.0会后执行有兴趣的朋友可记一下
绑定事件的两种方法在这里插入代码片
元素.on(“事件名”,function(){})
元素.事件名（function(){}）
事件传播的意思 从小到大 一层一层提交 阻止方法 return false
坐标事件
offsetX:当前这个元素的左上角
e.pageX：窗口左上角
e.client：网页左上角
移除事件
元素.unbind(“事件名”)
动画
显示动画
1.显示动画 show()
2.隐藏动画 hide()
3.切换动画 toggle（）包含上面两种方法来回切换
滑动动画
1.动画收缩 slideUp() 向上收缩 隐藏
2.动画展开sildeDown() 向下滑动展开
3.silddeToggle()切换包含上面两种方法来回切换
动画淡入淡出
1.淡入 fadeIn（）透明度减少
2.淡出 fadeOut () 透明度增大
3.切换 fadeToggle（）切换包含上面两种方法来回切换
还可以自义定动画放大切换等效果 元素.animate({属性：属性值}，time)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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>
<a href="https://www.baidu.com">
<p>dasdasdasdsada</p>
</a>
<button onclick="$('div').toggle(1000)">点我</button>
<script src="js/jquery-3.5.1.js"></script>
</head>
<body>
</body>
</html>
执行结果：
事件的两种方式
元素.on(‘事件名’,‘委托人’,function(){})
元素.事件名(function(){})
调用：用窗口的加载事件和jquery优化表格行数据删除的功能
<!DOCTYPE html>
<html>
<head></head>
<style type="text/css">
div{
width: 100px;
height: 100px;
background: red;
position: absolute;
}
</style>
<body>
<script src="./js/jquery-3.5.1.js"></script>
<script type="text/javascript">
/*错误示范：*/
// 删除按钮的点击事件(要先有表格和表格中的按钮才能生效)：
// $('button').click(function (){
// $(this).parents('tr').remove()
// })
//给删除按钮添加窗口的加载事件(页面一加载就生效)：
// $(()=>{//窗口加载完成
// $('button').click(function (){//这里就给全部按钮设置了点击事件
// $(this).parents('tr').remove()
// alert("你调用了删除方法")//点击删除会弹出提示
// })
// })
//给增加按钮添加窗口的加载事件
// $(()=>{//点击增加也会调用删除的方法!!!:你调用了删除方法
// $('#add').click(function (){//这里增加按钮已经有两个点击事件了(jquery能设置多个事件)
// var str=`
// <tr>
// <td>🍉🍉🍉🍉🍉🍉</td>
// <td>
// <button>点我删除</button>
// </td>
// </tr>`
// $('table').append(str)
// })
// })
/*更改：*/
//给删除按钮添加窗口的加载事件(页面一加载就生效)：
// $(()=>{//窗口加载完成
// $('td>button').click(function (){//这里只给表格中的按钮设置点击事件
// $(this).parents('tr').remove()
// alert("你调用了删除方法")//点击删除会弹出提示
// })
// })
//给增加按钮添加窗口的加载事件
$(()=>{
// 被委托人:元素.on('事件名','委托人',function(){}),on:将事件委托给他人
// $('table').on():不可委托给td和tr,因为也会被删除
// 将按钮的点击事件给了表格,则只要是表格中的按钮(不管是不是新增的)都会具备已写的点击事件
$('table').on('click','button',function(){
// this在正常函数中就是this,在箭头函数中是Window
// 所以这里用箭头函数的话拿this就变成了Window
$(this).parents('tr').remove()
})
$('#add').click(function (){
var str=`
<tr>
<td>🍉🍉🍉🍉🍉🍉</td>
<td>
<button>点我删除</button>
</td>
</tr>`
$('table').append(str)
// 增加一行后将新增的删除按钮又一次添加点击事件
// 但是这个事件和上面的删除事件相同，并且已经在上面添加过了删除事件：
// $('td>button').click(function (){//这里只给表格中的按钮设置点击事件
// $(this).parents('tr').remove()
// alert("你调用了删除方法")//点击删除会弹出提示
// })
})
})
</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>
执行结果：
总结：好了，这就是今天给大家分享的内容了，留个足迹在走吧！
