目录
事件
常用的基本事件
点击事件： onclick
鼠标： onmouseover移入 onmouseout移出 onmousemove移动
键盘 ：onkeydown按下 onkeyup松开 onkeypress按下后松开
表单 ：onsubmit 表单提交 onreset表单重置
onchange 输入框的值发生改变的时候
onblur 失去焦点 onfocus 得到焦点
双击事件：ondblclick 右击事件：contextmenu 窗口加载事件：window.onload和 $(()=>{})
加载DOM的两种方式
window.onload方式：
执行时间：整个网页中所有内容(包括图片)加载完成后,才会执行
编写个数：1个
jQuery方式：
执行时间：网页结构绘制完成后，执行
编写个数：多个
两种方式都有情况下的执行顺序：
jQuery3.0：window.onload比jQuery先执行
jQuery1.0和 jQuery2.0： jQuery比window.onload先执行
jquery事件基本介绍
js的事件一个标签只能设置一个但jquery能设置多个事件
例如：
<!DOCTYPE html>
<html>
<head></head>
<style type="text/css">
div{
width: 100px;
height: 100px;
background: red;
position: absolute;
}
</style>
<body>
<div></div>
<script src="./js/jquery-3.5.1.js"></script>
<script type="text/javascript">
//jquery的事件就是js去掉on
//js的事件一个标签只能设置一个但jquery能设置多个事件
// 给div添加多个事件(都会执行)
$('div').click(()=>{
alert('你好')
})
$('div').click(()=>{
alert('世界')
})
</body>
</html>
如果是js中给同一个元素设置这两个点击事件,那么就只会执行第二个点击事件,因为js的事件一个标签只能设置一个,第二个事件会将前面的事件覆盖。而在jquery中一个元素能设置多个事件,所以这两个点击事件都会被执行：
绑定事件的两种方式
元素.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>
这样写出来的效果就是不论是不是新增的按钮，只要是表格中的按钮，都会在窗口加载后具备删除按钮的实际功能：
合成事件/事件切换
hover()：鼠标悬停合成事件,鼠标移入是第一个函数,鼠标移除是第二个函数
toggle()：鼠标点击合成事件
例：控制div元素的显示和隐藏
<!DOCTYPE html>
<html>
<head></head>
<style type="text/css">
div{
width: 100px;
height: 100px;
position: block;
background: red;
}
</style>
<body>
<!-- 控制div的显示和隐藏 -->
<div></div>
<!-- $('元素').toggle(延迟时间):切换:将显示的元素隐藏/隐藏的元素显示
默认为元素的长和宽都改变：优化菜单-->
<button onclick="$('div').toggle(1000)">点我</button>
<script src="./js/jquery-3.5.1.js"></script>
<script type="text/javascript">
</script>
</body>
</html>
运行效果：
如果div元素默认是隐藏：
那么点击这个按钮就会显示：
事件传播/事件冒泡
事件冒泡：向下/子元素的方向传播 事件传播：向上/父元素的方向传播
阻止事件传播：在事件后面加上return false
例如：
<!DOCTYPE html>
<html>
<head></head>
<body>
<!-- 事件冒泡 -->
<a href="1.html">
<p>aaaaaaa</p>
</a>
<script src="./js/jquery-3.5.1.js"></script>
<script type="text/javascript">
$('p').click(()=>{
alert('-----')//点击p标签会弹出提示,也会跳转到父元素a标签的网页
//虽然只点击了p没有点击a,但p标签有事件冒泡,会向上触发父元素a标签的事件,即一直向上触发所有父元素的所有事件
// 阻止事件冒泡：事件后面加上return false
return false
})
</script>
</body>
</html>
没有加上return false时点击确定会跳转网页(a标签的功能),加上后则不会跳转网页：
事件坐标
offsetX：当前元素左上角
clientX： 窗口左上角
pageX： 网页左上角
调用一下叭：
// 比如:鼠标事件对象e可以点出这些事件坐标
// jquery中省去e
$('body').mousemove(e=>{
console.log(e.clientX,e.pageX,e.offsetX)
})这样就可以获得相关坐标了：
移除事件
unbind：不/解除绑定
元素.unbind('事件名')
如：解除/取消上面鼠标的移入事件
$('body').unbind('mousemove')动画
基本动画
显示:show(Time)+隐藏:hide(Time)=切换toggle(Time):将显示的元素隐藏/隐藏的元素显示
滑动动画
slideUp(Time):动画收缩/向上滑动+slideDown(Time)动画展开/向下滑动=slideToggle(Time)动画切换,效果与toggle(Time)同理
淡入淡出(透明度)
fadeIn(Time):淡入(透明度减少)
fadeOut(Time):淡出(透明度增加)
fadeToggle(Time):切换(效果同上)
$('div').fadeOut(5000)//5000毫秒内淡出自定义动画
元素.animate({属性:属性值},Time)
移动(本元素),距离：top='+=',left("-=")
缩放：width,height
例如：
<!DOCTYPE html>
<html>
<head></head>
<style type="text/css">
div{
width: 100px;
height: 100px;
background: red;
/* position: inline-block; */
/* top left只针对与相对布局 */
/* position:absolute; */
/* 想让元素从它之间移动 */
margin: auto;
/* margin只针对与块状标签 */
position:block;
/* 上下居中,不要top left */
/* left: 50%;
top: 50%;
transform: translate(-50%,-50%); */
}
</style>
<body>
<div></div>
<script src="./js/jquery-3.5.1.js"></script>
<script type="text/javascript">
// 自定义动画
// 元素.animate({属性:属性值},Time)
$('div').mouseover(function (){
$(this).animate({
// 鼠标放上后的动画效果
// 缩放：width,height
width:"200px",
height:"200px",
// 移动：top left只针对与相对布局absolute
left:'30px',
top:'30px'
},5000)
})
// 移动(本元素),距离：top='+=',left("-=")
</script>
</body>
</html>
当鼠标移入时div元素会慢慢按照自定义的动画变化：
就写先到这吧，感谢阅读^_^
7390
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
