硬核解析，巧用案例学习 jQuery 框架三种事件绑定方式，最新阿里 + 头条 + 腾讯大厂 Java 笔试真题
[](
)二、on 绑定事件/off 解除绑定
===================================================================================
利用 jquery 的 on()方法可以将的一个事件绑定到 jquery 对象上，
语法格式如下：
jq 对象.on("事件名称",回调函数)
利用 jquery 的 off()方法可以将的一个事件从 jquery 对象上解绑。
语法格式如下：
jq 对象.off("事件名称")
注意：如果 off 方法不传递任何参数，则将组件上的所有事件全部解绑，
如下面的实例：为第一个按钮绑定一个弹窗事件，点击按钮触发弹窗，点击第二个按钮，解除第一个按钮的弹窗事件，当再点击第一个按钮的时候就不会触发弹窗了。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript"> $(function () {
// 使用 on 方法给第一个按钮添加事件绑定
$("#btn").on("click",function () {
alert("我被点击了..")
});
// 解除第一个按钮的绑定事件
$("#btn2").click(function () {
alert("第一个按钮解绑了~")
// 解除绑定事件
// $("#btn").off
("click")
// 解除所有绑定
$("#btn").off();
});
}); </script>
</head>
<body>
<input id="btn" type="button" value="使用 on 绑定点击事件">
<input id="btn2" type="button" value="使用 off 解绑点击事件">
</body>
</html>
效果如下：
[](
)三、事件切换：toggle
================================================================================
Jquery 中的事件切换方法可以实现方法中定义的多个事件的循环触发。语法格式如下：
jq 对象.toggle(fn1,fn2...)
当单击 jq 对象对应的组件后，会执行 fn1.第二次点击会执行 fn2…依次执行下去，当执行完之后会重新从第一个事件开始执行。
在这里要提醒一下大家：1.9 版本 .toggle() 方法删除,jQuery Migrate（迁移）插件可以恢复此功能。在中添加以下代码即可添加插件：
script src="../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>
下面看这个实例：
点击按钮触发 toggle()方法，并修改 div 的背景颜色
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript"> $(function () {
// toggle 函数只能用于 1.xx 版本，使用时需要引入插件
$("#btn").toggle(function () {
// 切换 myDiv 的背景颜色
$("#myDiv").css("backgroundColor","green");
},function () {
$("#myDiv").css("backgroundColor","red");
});
}); </script>
</head>
<body>
<input id="btn" type="button" value="事件切换">
<div id="myDiv" style="width:300px;height:300px;background:pink">
点击按钮变成绿色，再次点击红色
</div>
</body>
</html>
还未添加个人签名 2021.03.18 加入
还未添加个人简介
评论