jQuery教程

JQuery事件绑定

本文主要是介绍JQuery事件绑定，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

JQuery事件绑定

1.jquery标准的绑定方式

  • jq对象.事件方法(回调函数)

HTML代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>绑定事件</title>
        <script src="../js/jquery-3.3.1.min.js"></script>

    </head>
    <body>
        <input id="name" type="text" value="绑定点击事件">
        <script type="text/javascript">
            /*//1.获取name对象 绑定click事件
            $("#name").click(function(){
                alert("我被点击了....")
            });*/
            //给name绑定鼠标移动到元素之上事件 绑定鼠标移除事件
        /*    $("#name").mouseover(function () {
                alert("鼠标来了...")
            });
            $("#name").mouseover(function () {
                alert("鼠标走了...")
            });*/

            //简化操作 链式编程
            $("#name").mouseover(function () {
                alert("鼠标来了...")
            }).mouseover(function () {
                alert("鼠标走了...")
            })

        </script>
    </body>
</html>

2.on绑定事件/off解除绑定

  • jq对象.on("事件名称”,回调函数)
  • jq对象.off("事件名称")

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>on绑定事件</title>
    <script src="../js/jquery-3.3.1.min.js"></script>
</head>
<body>
    <input id="btn" type="button" value="使用on绑定点击事件">
    <input id="btn2" type="button" value="使用off解绑点击事件">
    <script>
        $(function () {
            //使用on给按钮绑定单击事件 click
            $("#btn").on("click",function () {
                alert("我被点击了...")
            });
            //使用off解除btn按钮的单击事件
            $("#btn2").click(function () {
                //解除btn按钮的单击事件
                $("#btn").off();//将组件的所有事件全部解绑
            })
        });
    </script>
</body>
</html>

3.事件切换：toggle

  • jq对象.toggle(fn1,fn2...)
    • 当单机jq对象对应的组件后 会执行fn1.第二次点击会执行fn2....

 注意：1.9版本.toggle()方法删除，jQuery Migrate(迁移)插件可以恢复此功能

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定</title>
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script src="../js/jquery-migrate-1.0.0.js"></script>
</head>
<body>
    <input id="btn" type="button" value="事件切换">
    <div id="myDiv" style="width:300px;height:300px;background:pink;">
        点击按钮变成绿色 再次点击红色
    </div>
<script>
    $(function () {
        //获取按钮 调用toggle方法
        $("#btn").toggle(function () {
            //改变div背景色backgroudColor颜色为green
            $("#myDiv").css("backgroundColor","green");
        }),function () {
            //改变div背景色backgroundColor 颜色为pink
            $("#myDiv").css("backgroundColor","pink");
        }
    })
</script>
</body>
</html>
这篇关于JQuery事件绑定的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航