java web-11.6Jquery事件绑定和切换

事件绑定-标准方式

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>