JQuery事件绑定

2022-08-20 17:00:52 阅读：163 来源： 互联网

标签：JQuery function name ... 绑定 alert 事件

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,function,name,...,绑定,alert,事件
来源： https://www.cnblogs.com/aimz01/p/16608077.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

JQuery事件绑定

JQuery事件绑定