JQuery 05 事件绑定及案例

事件绑定


        1. jquery标准的绑定方式
            * jq对象.事件方法(回调函数);
            * 注:如果调用事件方法,不传递回调函数,则会触发浏览器默认行为。
                * 表单对象.submit();//让表单提交
        2. on绑定事件/off解除绑定
            * jq对象.on("事件名称",回调函数)
            * 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("clicked...")
            });
            //使用off解除按钮绑定点击事件
            $("#btn2").click(function () {
                $("#btn").off("click");
            })
        })
    </script>
</head>
<body>
<input id="btn" type="button" value="使用on绑定点击事件">
<input id="btn2" type="button" value="使用off解绑点击事件">
</body>
</html>


        3. 事件切换:toggle
            * 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>

案例

发布了66 篇原创文章 · 获赞 0 · 访问量 1072

猜你喜欢

转载自blog.csdn.net/smallrain6/article/details/105288794
今日推荐