本文详细介绍了JQuery中的事件处理，包括加载DOM、事件绑定、合成事件、事件传播、事件坐标和移除事件。此外，还讲解了动画效果，如基本效果、滑动、淡入淡出和自定义动画，并提供了相应的案例代码。
如需查看上一节内容，请点击下方链接。
https://blog.csdn.net/m0_64522859/article/details/123437490目录
一、事件
(1)加载Dom两种方式
window.onload方式：
- 执行时间：整个网页中所有内容(包括图片)加载完成后，才会执行
- 编写个数：1个
jQuery方式：
- 执行时间：网页结构绘制完成后，执行
编写个数：多个
两个都有的情况下执行顺序【面试题】：
- jQuery3.0：window.onload比jQuery先执行
- jQuery1.0和2.0：jQuery比window.onload先执行
(2)绑定事件两种方式
- 元素.on("事件名",function(){})
- 元素.事件名(function(){})
- 案例1：演示事件(鼠标悬停和点击)的两种方式
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/* 一、事件 */
//1.1 加载DOM两种方式(区别)
// 原生态JavaScript加载DOM的方式
// 当网页全部加载完毕后才会执行的函数，该方式在一个页面上只能出现1次，如果出现多次 会覆盖
// 一个页面同时出现原生态jsDOM和jQueryDOM加载，版本不同，先后顺序不同。3.0版本以前--jQuery先执行，3.0版本以后--原生态JavaScript先执行
$(function() {
//1.2 绑定事件的两种方式 [eg.:点击、悬停事件等等]
//--元素.on/bind()
$("#obtn1").on('click', function() {
alert("on事件出现")
})
$("#obtn1").bind('click', function() {
alert("bind事件")
})
//--元素.事件名
$("#obtn1").click(function() {
alert("元素事件")
})
// 鼠标移入移除事件 mouserover mouseout
$("#obtn1").mouseover(function() {
console.log("鼠标移入")
})
$("#obtn1").mouseout(function() {
console.log("鼠标移出")
})(3)合成事件/事件切换
hover()：鼠标悬停合成事件：
- 鼠标移上去第一个函数
- 鼠标移除第二个函数
案例2：升级案例2鼠标悬停显示和隐藏
toggle()：鼠标点击合成事件：
案例3：升级案例2鼠标点击显示和隐藏
//1.3 合成事件/事件切换
//--hover()悬停控制元素[div]的显示和隐藏
$("#odiv").hover(function() {
$(this).addClass("over")
}, function() {
$(this).removeClass("over")
})
//--toggle()点击控制元素[div]的显示和隐藏[注意版本问题]
$("#obtn2").click(function() {
// 没有传递参数 调用后立即隐藏与显示
// 有参数（毫秒）调用后有延时效果
// 多个会覆盖
$("#odiv").toggle(1000);
$("#odiv").toggle(function() {
alert("隐藏中...")
}, function() {
alert("出现中...")
})
})(4)事件传播（事件冒泡）
- 传播：小-->中-->大
- 阻止传播：事件后面加上 return false
案例4：给body div span(在div中) 分别添加点击事件，测试事件传播
//1.4 事件的传播(事件冒泡) 小p->中div->大body
$("body").click(function() {
alert("事件冒泡了")
})
$("#obtn3").click(function() {
alert("要阻止了")
return false; //阻止body点击事件
})(5)事件坐标：
- offsetX：当前元素左上角
- clientX：窗口左上角
- pageX：网页左上角
案例5：pageX实现 鼠标悬浮，获取鼠标坐标
//1.5 事件event的坐标[pageX,pageY]
$("body").click(function() {
// pageX横坐标
// 鼠标
console.log(event.pageX, event.pageY);
// left和top body有默认的margin和padding
console.log(event.offsetX, event.offsetY);
// 窗口
console.log(event.clientX, event.clientY);
})(6)移除事件：
- 元素.unbind("事件名")
案例6：按钮点击一次，不能再次点击
- 注意1：一般情况下，不会使用unbind，推荐使用变量控制事件
案例7：点击按钮偶数次可以，奇数次则失效
- 注意2：如果某个元素只允许使用一次事件，则可以使用one()
案例8：按钮只允许点击一次
//1.6 事件的移除
//--按钮只能点击一次[2]
// var flag = true;
// $("#obtn4").click(function(){
// if(flag == true){
// alert("一次性")
// flag = false;
// }
// 一次性作用 通过调用解绑事件即可
// $(this).off();
// $(this).unbind();//解绑事件
// })
//jQuery中提供一个方法one
$("#obtn4").one('click', function() {
alert("jQuery方法一次性")
})
//--按钮点击偶数次可行 奇数次不行
var num = 1;
$("#obtn5").click(function() {
if (num % 2 == 0) {
console.log("点击了" + num)
}
num++;
console.log(num)
})
})
</script>
</head>完整代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/* *{margin: 0px;padding: 0px;} */
.over {
border: 50px solid salmon;
}
</style>
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/* 一、事件 */
//1.1 加载DOM两种方式(区别)
// 原生态JavaScript加载DOM的方式
// 当网页全部加载完毕后才会执行的函数，该方式在一个页面上只能出现1次，如果出现多次 会覆盖
// 一个页面同时出现原生态jsDOM和jQueryDOM加载，版本不同，先后顺序不同。3.0版本以前--jQuery先执行，3.0版本以后--原生态JavaScript先执行
$(function() {
//1.2 绑定事件的两种方式 [eg.:点击、悬停事件等等]
//--元素.on/bind()
$("#obtn1").on('click', function() {
alert("on事件出现")
})
$("#obtn1").bind('click', function() {
alert("bind事件")
})
//--元素.事件名
$("#obtn1").click(function() {
alert("元素事件")
})
// 鼠标移入移除事件 mouserover mouseout
$("#obtn1").mouseover(function() {
console.log("鼠标移入")
})
$("#obtn1").mouseout(function() {
console.log("鼠标移出")
})
//1.3 合成事件/事件切换
//--hover()悬停控制元素[div]的显示和隐藏
$("#odiv").hover(function() {
$(this).addClass("over")
}, function() {
$(this).removeClass("over")
})
//--toggle()点击控制元素[div]的显示和隐藏[注意版本问题]
$("#obtn2").click(function() {
// 没有传递参数 调用后立即隐藏与显示
// 有参数（毫秒）调用后有延时效果
// 多个会覆盖
$("#odiv").toggle(1000);
$("#odiv").toggle(function() {
alert("隐藏中...")
}, function() {
alert("出现中...")
})
})
//1.4 事件的传播(事件冒泡) 小p->中div->大body
$("body").click(function() {
alert("事件冒泡了")
})
$("#obtn3").click(function() {
alert("要阻止了")
return false; //阻止body点击事件
})
//1.5 事件event的坐标[pageX,pageY]
$("body").click(function() {
// pageX横坐标
// 鼠标
console.log(event.pageX, event.pageY);
// left和top body有默认的margin和padding
console.log(event.offsetX, event.offsetY);
// 窗口
console.log(event.clientX, event.clientY);
})
//1.6 事件的移除
//--按钮只能点击一次[2]
// var flag = true;
// $("#obtn4").click(function(){
// if(flag == true){
// alert("一次性")
// flag = false;
// }
// 一次性作用 通过调用解绑事件即可
// $(this).off();
// $(this).unbind();//解绑事件
// })
//jQuery中提供一个方法one
$("#obtn4").one('click', function() {
alert("jQuery方法一次性")
})
//--按钮点击偶数次可行 奇数次不行
var num = 1;
$("#obtn5").click(function() {
if (num % 2 == 0) {
console.log("点击了" + num)
}
num++;
console.log(num)
})
})
</script>
</head>
<body>
<button type="button" id="obtn1">obtn1事件</button>
<br>
<br>
<div id="odiv" style="width: 100px;height: 100px;background-color: #DDA0DD">
</div>
<button type="button" id="obtn2">obtn2</button>
<button type="button" id="obtn3">obtn3</button>
<button type="button" id="obtn4">obtn4</button>
<button type="button" id="obtn5">obtn5</button>
</body>
</html>二、动画效果
(1)基本效果
- 显示：show(Time)
- 隐藏:hide(Time)
- 切换：toggle（Time）
案例1：点击按钮，控制div显示和隐藏（基本动画）
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function() {
$(d1).click(function() {
//让图片隐藏
$("img").hide(3000)
})
$(d2).click(function() {
//让图片显示
$("img").show(3000)
})
$(d3).click(function() {
//让图片显示
$("img").toggle(3000)
})(2)滑动效果
- slideUp(Time)：动画收缩(向上滑动)-->隐藏
- slideDown(Time)：动画展开(向下滑动)-->显示
- slideToggle(Time)：动画切换
案例2：点击按钮，控制div显示和隐藏（滑动）
$(d4).click(function() {
//让图片显示
$("img").slideUp(3000)
})
$(d5).click(function() {
//让图片显示
$("img").slideDown(3000)
})(3)淡入淡出(透明度)
- fadeIn(Time)：淡入(透明度减少)
- fadeOut(Time)：淡出(透明度增大)
- fadeToggle(Time)：切换
案例3：点击按钮，控制div显示和隐藏（透明度）
$(d6).click(function() {
//让图片显示
$("img").fadeIn(3000)
})
$(d7).click(function() {
//让图片显示
$("img").fadeOut(3000)
})
})
</script>
</head>(4)自定义动画效果
- 元素.animate({属性：属性值},Time)
- 缩放：width、height
案例4：点击按钮，控制div的宽度和高度变大
- 移动：top、left
案例4：点击按钮，控制div的宽度和高度变大
- 移动(本元素)，距离：top= "+="、left= "-="
案例6：点击按钮，控制div移动，距离本元素
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>爱心表情包变化</title>
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function() {
$(d1).click(function() {
//让图片隐藏
$("img").hide(3000)
})
$(d2).click(function() {
//让图片显示
$("img").show(3000)
})
$(d3).click(function() {
//让图片显示
$("img").toggle(3000)
})
$(d4).click(function() {
//让图片显示
$("img").slideUp(3000)
})
$(d5).click(function() {
//让图片显示
$("img").slideDown(3000)
})
$(d6).click(function() {
//让图片显示
$("img").fadeIn(3000)
})
$(d7).click(function() {
//让图片显示
$("img").fadeOut(3000)
})
})
</script>
</head>
<body>
<img src="./img/1.gif" alt="">
<button id="d1">点我隐藏</button>
<button id="d2">点我显示</button>
<button id="d3">点我切换</button>
<button id="d4">点我向上</button>
<button id="d5">点我向下</button>
<button id="d6">点我淡入</button>
<button id="d7">点我淡出</button>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
