硬核解析,巧用案例学习jQuery框架三种事件绑定方式

举报
灰小猿 发表于 2021/06/18 11:43:33 2021/06/18
【摘要】 Hello,你好呀!我是灰小猿!一个超会写bug的程序猿!在jquery框架的使用中,难免会遇到按钮或文本框等各种各样的要求要进行相应事件的绑定操作,进行事件的绑定能够增加页面的交互效果,相信在html和js中进行事件的绑定大家都不陌生,那么今天我就来和小伙伴们分享一下利用jquery如何进行事件的绑定!Jquery中有三种基本的事件绑定方式,那么我们就以三个小案例的形式来分别和大家讲一下这...

Hello,你好呀!我是灰小猿!一个超会写bug的程序猿!

在jquery框架的使用中,难免会遇到按钮或文本框等各种各样的要求要进行相应事件的绑定操作,进行事件的绑定能够增加页面的交互效果,相信在html和js中进行事件的绑定大家都不陌生,那么今天我就来和小伙伴们分享一下利用jquery如何进行事件的绑定!

Jquery中有三种基本的事件绑定方式,那么我们就以三个小案例的形式来分别和大家讲一下这三种基本的事件绑定方式。

一、 jquery标准的绑定方式

Jquery框架的标准绑定的语法是:

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

如:

Jquery对象.cilck();点击事件
Jquery对象.mouseover();鼠标移入时触发
Jquery对象.mouseout();鼠标移出时触发
表单对象.submit();//让表单提交***

在这里需要注意:如果调用事件方法,不传递回调函数,则会触发浏览器默认行为。

如下面的实例:鼠标移入时触发弹窗,移出时再触发弹窗事件。

<!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 () {
            // 设置点击相应事件
            /*$("#name").click(function () {
                alert("鼠标点击了~");
            });*/

            // 利用jQuery对象获取鼠标移入和移出响应事件
            // 鼠标移入
            $("#name").mouseover(function () {
                alert("鼠标进入了1~");
            });
            
            // 鼠标移出
            $("#name").mouseout(function () {
                alert("鼠标移除了~");
            });
        });
    </script>
</head>
<body>
<input id="name" type="text" value="绑定点击事件">
</body>
</html>

效果如下: 在这里插入图片描述

二、on绑定事件/off解除绑定

利用jquery的on()方法可以将的一个事件绑定到jquery对象上,

语法格式如下:

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

利用jquery的off()方法可以将的一个事件从jquery对象上解绑。

语法格式如下:

    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("我被点击了..")
            });
            
            // 解除第一个按钮的绑定事件
            $("#btn2").click(function () {
                alert("第一个按钮解绑了~")
                // 解除绑定事件
                // $("#btn").off("click")
                // 解除所有绑定
                $("#btn").off();
            });
        });

    </script>
</head>
<body>
<input id="btn" type="button" value="使用on绑定点击事件">
<input id="btn2" type="button" value="使用off解绑点击事件">
</body>
</html>

效果如下: 在这里插入图片描述

三、事件切换:toggle

Jquery中的事件切换方法可以实现方法中定义的多个事件的循环触发。语法格式如下:

   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>

下面看这个实例:

点击按钮触发toggle()方法,并修改div的背景颜色

代码如下:

<!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 src="../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript">
        $(function () {

            // toggle函数只能用于1.xx版本,使用时需要引入插件
            $("#btn").toggle(function () {
                // 切换myDiv的背景颜色
                $("#myDiv").css("backgroundColor","green");
            },function () {
                $("#myDiv").css("backgroundColor","red");
            });
        });

    </script>
</head>
<body>

    <input id="btn" type="button" value="事件切换">
    <div id="myDiv" style="width:300px;height:300px;background:pink">
        点击按钮变成绿色,再次点击红色
    </div>
</body>
</html>

效果如下: 在这里插入图片描述以上就是jQuery框架中实现事件绑定的三种方式,

有问题的小伙伴记得在评论区留言提出!

觉得不错记得点赞关注哟!之后继续和大家分享应用jquery框架的实战案例!

我是灰小猿!我们下期见! 在这里插入图片描述

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200