一、JQuery 标准的绑定方式
* jq对象.事件方法(回调函数);
* 注:如果调用事件方法,不传递回调函数,则会触发浏览器默认行为。
* 表单对象.submit();
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/jquery-migrate-1.0.0.js"></script>
<script type="text/javascript">
$(function () {
$("#name").click(function () {
alert("我被点击了。。。")
})
$("#name").mouseover(function () {
alert("鼠标来了。。。。")
}).mouseout(function () {
alert("鼠标走了")
})
$("#name").focus();
})
</script>
</head>
<body>
<input id="name" type="text" value="绑定点击事件">
二、on绑定事件/off解除绑定
* jq对象.on("事件名称",回调函数)
* jq对象.off("事件名称")
* 如果off方法不传递任何参数,则将组件上的所有事件全部解绑
<script type="text/javascript">
$(function () {
$("#btn").on("click", function () {
alert("我被点击了。。。")
})
$("#btn2").click(function () {
$("#btn").off();
})
})
</script>
</head>
<body>
<input id="btn" type="button" value="使用on绑定点击事件">
<input id="btn2" type="button" value="使用off解绑点击事件">
三、事件切换:toggle
* jq对象.toggle(fn1,fn2...)
* 当单击jq对象对应的组件后,会执行fn1.第二次点击会执行fn2.....
* 注意:1.9版本 .toggle() 方法删除,jQuery Migrate(迁移)插件可以恢复此功能。
* <script src="js/jquery-migrate-1.0.0.js"></script>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/jquery-migrate-1.0.0.js"></script>
<script type="text/javascript">
$(function () {
$(function () {
$("#btn").toggle(function () {
$("#myDiv").css("backgroundColor", "green");
}, function () {
$("#myDiv").css("backgroundColor", "pink");
});
});
})
</script>
</head>
<body>
<input id="btn" type="button" value="事件切换">
<div id="myDiv" style="width:300px;height:300px;background:pink">
点击按钮变成绿色,再次点击红色
</div>