一,事件
常用的基本事件:
点击 onclick
鼠标 onmouseover onmouseout onmousemove
键盘 onkeydown onkeyup onkeypress
onsubmit 表单提交 onreset
onchange 输入框的值发生改变的时候
onblur 失去/onfocus 得到
ondblclick 双击事件
注意事项:
jquery的事件就是js去掉on
js的事件只能有一个,但是jQuery可以有多个事件,写代码时要注意不要出现事件重复的现象。
1.加载Dom两种方式
1>.window.onload方式
执行时间:整个网页中所有内容(包括图片)加载完成后,才会执行
编写个数:1个
2>.jQuery方式
执行时间:网页结构绘制完成后,执行
编写个数:多个
3>.两个都有的情况下执行顺序
jQuery3.0:window.onload比jQuery先执行
jQuery1.0和2.0:jQueryt比window.onload先执行
2.绑定事件的两种方式:
元素.事件名(function(){})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.5.1.js">
</script>
<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>
<script type="text/javascript">
$("div").click(()=>{
alert("zzzzzzzz")
})
$("div").click(()=>{
alert("aaaaaaaa")
})
</script>
</body>
</html>
由于jQuery可以有多个事件,所以它会弹出两次提示,而js则只会弹出后面事件的提示。
元素.on("事件名",function(){}) 事件委托
可以将事件委托给 body html 等·,但是注意千万不要委托在容易受影响的元素上,如:tr,td
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.5.1.js">
</script>
<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>
<script type="text/javascript">
$("div").click(()=>{
alert("zzzzzzzz")
})
$("div").click(()=>{
alert("aaaaaaaa")
})
//事件委托:委托给了"table"中的所有"button" 委托事件是:"click"事件
$("table").on("click","button",function () {
$(this).parents("tr").remove()
})
</script>
</body>
</html>
3.合成事件/事件切换
over():鼠标悬停合成事件(鼠标放入,鼠标移开两种状态)
鼠标移上去第一个函数
鼠标移除第二个函数
toggle():鼠标点击合成事件(控制是否显示)
注意:在箭头函数中 this代表的是window
在普通函数中,this代表的是 这个函数本身
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.5.1.js">
</script>
<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>
//设置了延迟时间为1S
<button onclick="$('div').toggle(1000)">点我</button>
<script type="text/javascript">
$("p").click(()=>{
alert("---")
return false //阻止事件的冒泡
})
</script>
</body>
</html>
4.事件传播(事件冒泡)
传播:小-->中-->大
阻止传播:时间后面加上 return false
事件的传播是从上到下传播,事件的冒泡是从下到上冒泡。它们是两个不同的方向。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.5.1.js">
</script>
<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>
<script type="text/javascript">
$("p").click(()=>{
alert("---")
return false //阻止事件的冒泡 当点击p标签时其实没有点击a标签,但是p有事件冒泡,所以可以跳转,加这行代码则可以阻断事件的冒泡
})
</script>
</body>
</html>
五,事件坐标
offsetX:当前元素左上角 针对整个body的位置
clientX:窗口左上角 针对屏幕位置
pageX:网页左上角 针对屏幕位
六:移除事件
元素.unbind("事件名")
$("body").unbind("mousemove")
二,动画效果
1.基本
显示:show(Time)
隐藏:hide(Time)
切换:toggle(Time) 它就包含了上面两个
2.滑动
slideUp(Time):动画收缩(向上滑动)-->隐藏
slideDown(Time):动画展开(向下滑动)-->显示
slideToggle(Time):动画切换
3.淡入淡出(透明度)
fadeIn(Time):淡入(透明度减少)
fadeOut(Time):淡出(透明度增大)
fadeToggle(Time):切换
4.自定义动画
元素.animate({属性:属性值},Time)
缩放:width heigth
移动:top left
移动(本元素),距离:top="+=" left="-="