事件绑定-标准方式
jquery标准的绑定方式
jq对象.事件方法(回调函数);
$(function () {
//1获取name对象,绑定click事件
/*
//方法1
$("#name").click(function () {
alert("我被点击了。。。")
})
*/
//简化操作,链式编程
$("#name").mouseover(function () {
alert("鼠标来了。。")
}).mouseout(function () {
alert("鼠标走了。。")
})
})
事件绑定-on&off
on绑定事件/off解除绑定
jq对象.on(“事件名称”,回调函数)
jq对象.off(“事件名称”)
<script type="text/javascript">
$(function () {
//1获取n绑定点击事件
$("#btn").on("click",function () {
alert("我被点击了。。。");
});
//使用off解绑点击事件
$("#btn2").click(function () {
//解除btn按钮的单击事件
// $("#btn").off("click");
$("#btn").off()//将组件上的所有事件全部解绑
})
})
</script>
事件绑定-事件切换
事件切换toggle
jq对象.toggle(fn1,fn2…)
当单击jq对象对应的组件后,会执行fn1,第二次点击会执行fn2
注意:1.9版本.toggle()方法删除,jQuery Migrate(迁移)插件可以恢复此功能
<script type="text/javascript">
$(function () {
//获取按钮,调用toggle方法
$("#btn").toggle(function () {
//改变div背景色backgroundColor颜色为green
$("#myDiv").css("backgroundColor","green");
},function () {
//改变div背景色backgroundColor颜色为pink
$("#myDiv").css("backgroundColor","pink");
})
})
</script>