一.了解本章学习的东西
1.首先来总结一下一部分常用的事件
点击事件 onclick
鼠标事件
onmouseover（鼠标移入）
onmouseout（鼠标移出）
onmousemove（鼠标移动）
onmouseleave（鼠标移开） onmouseenter（鼠标点击）
onmousedown（鼠标按下） onmouseup（鼠标移开）
onmousewheel（鼠标滑轮）
键盘事件
onkeydown（键盘按下）
onkeyup（键盘松开）
onkeypress（键盘按一次）
表单事件
onsubmit（表单提交）
onreset（表单重置）
onchange（表单或输入框的值改变事件）
onblur（失去焦点）
onfocus（得到焦点）
ondblclick（双击事件）
注：在鼠标事件中两个连写的是两两搭配的不能随意组合使用，在jquery中的事件就是js中的事件去掉on
二.用法和代码展示
1.表格增删
js只能有一个事件（只显示最后一个），jquery可以有多个
加载事件整个窗口加载完毕是执行
this在正常函数中就是this
this在箭头函数中就是window(需要传this为参是就不能使用箭头函数)
let声明一个局部变量(注意用反引号的地方)
注意不能将所有的button设点击事件（$("td button")用这种方法设点击事件）
新增按钮时注意要调用方法给新增按钮也增加事件
<body> <script src="./jquery-3.5.1.js"></script> <script> //将所有的div设置点击事件 $("div").click(()=>{ }) $("div").click(function (){ }) //js只能有一个事件（只显示最后一个），jquery可以有多个 $("div").click(()=>{ alert("aa") }) $("div").click(()=>{ alert("@@") }) window.onload=()=>{//js的加载事件 } $(()=>{//jquery的加载事件整个窗口加载完毕是执行 }) $(()=>{ // this在正常函数中就是this // this在箭头函数中就是window // 箭头函数不能调用，如果用箭头函数效果将无法显示 $("td button").click(function (){ //注意不能将所有的button设点击事件 $(this).parents("tr").remove() }) $("#a").click(function (){ let s=`<tr> <td>🍉🍉🍉🍉🍉🍉</td> <td> <button>点我删除</button> </td> </tr>` //let声明一个局部变量，增加行后面复制的代码用反引号 $("table").append(s) //append()追加 $("td button").click(function (){ $(this).parents("tr").remove() }) //重复一次为了给新加的按钮加事件 }) }) </script> <table border> <tr> <td>🍉🍉🍉🍉🍉🍉</td> <td> <button>点我删除</button> </td> </tr> <tr> <td>🍉🍉🍉🍉🍉🍉</td> <td> <button>点我删除</button> </td> </tr> </table> <button id="a">增加</button> </body>
一个简单的表格行的增加，删除就完成了，往往很多人以为真的完成了，但细心的人就会发现有些地方会重复执行一般不容易被发现。
$("td button").click(function (){ $(this).parents("tr").remove() alert("---") })
当你在删除后面加一行提示框时你运行时会发现随着你增加次数的增加提示框提示次数也会变多
那么问题来了怎么解决？
代码如下：
元素.on 委托事件
<body> <script src="./jquery-3.5.1.js"></script> <script> $(()=>{ //委托事件，将按钮的点击事件委托给table $("table").on("click","button",function (){ $(this).parents("tr").remove() //拿所有父级查找tr，删除 }) $("#a").click(function (){ let s=`<tr> <td>🍉🍉🍉🍉🍉🍉</td> <td> <button>点我删除</button> </td> </tr>` //let声明一个局部变量，增加行后面复制的代码用反引号 $("table").append(s) //append()追加 }) }) </script> <table border> <tr> <td>🍉🍉🍉🍉🍉🍉</td> <td> <button>点我删除</button> </td> </tr> <tr> <td>🍉🍉🍉🍉🍉🍉</td> <td> <button>点我删除</button> </td> </tr> </table> <button id="a">增加</button> </body>
2.div的动态隐藏
!important 设置隐藏方式不从那个方向开始（设为不改变）
display: inline-block 行块标签，使其在同一行，在span a标签加上后使其能设置宽和高
toggle() 设置是否显示，后面填时间，多少秒后隐藏
<style> div{ display: inline-block;//行块标签，使其在同一行，在span a标签加上后使其能设置宽和高 width: 100px !important;//设置从下到上隐藏 height: 100px; background: red; } </style> <body> <div></div> <button onclick="$('div').toggle(1000)">aaa</button> //toggle设置是否显示，后面填时间，多少秒后隐藏 <script src="./jquery-3.5.1.js"></script> </body>
3.动画效果
坐标事件
offsetX clientX pageX（获得横坐标，前面相对于body，后者相对于屏幕）
unbind 移出事件（移除坐标事件）
fadeOut 淡出事件 fadeIn 淡入 fadeToggle 切换
div动态变大代码如下:
<style> #div{ display: inline-block; height: 100px; width: 200px !important; background: #FF0000; position: absolute; } </style> <body> <div id="div"></div> <script src="./jquery-3.5.1.js"></script> <script> $("#div").mouseover(function() { $(this).animate({ width: "300px", height: "300px", left:"30px", //左边距 top:"30px", //上边距 }) }) //事件坐标事件 $("body").mousemove(e=>{ console.log(e.clientX,e.pageX,e.offsetX) //前面两个相对于屏幕 e事件对象 }) //移除事件 $("body").unbind("mousemove") //5秒后淡出 $("div").fadeOut(5000) </script> </body>
div居中变大
使div居中需要用到：margin：auto(设外边距居中)
left：50% 左边距居自身50%
top：50%上边距居自身50%
transform: translate(-50%,-50%) 左，上-50%
<style> #div{ display: inline-block; height: 100px; width: 200px !important; background: #FF0000; position: absolute; margin: auto; //外边距,居中 left: 50%; top: 50%; transform: translate(-50%,-50%); //是左和上移动自身-50% } </style> <body> <div id="div"></div> <script src="./jquery-3.5.1.js"></script> <script> $("#div").mouseover(function() { $(this).animate({ width: "300px", height: "300px", }) }) //事件坐标事件 $("body").mousemove(e=>{ console.log(e.clientX,e.pageX,e.offsetX) //前面两个相对于屏幕 e事件对象 }) //移除事件 $("body").unbind("mousemove") //5秒后淡出 $("div").fadeOut(5000) </script> </body>
注：在设div样式时我经常不注意将它设为行块时的语句放在中间没有在意顺序，就会出现一个问题div不显示，还不易发现，我们要注意最好将display: inline-block;语句放最前面。
今天的分享就到这了，图片中还有许多方法只不过不常用没有一一列举，可以自己试试，会有不一样的效果
