开发者社区> 灰小猿> 正文

硬核解析,巧用案例学习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框架的实战案例!

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
如何设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云安全组设置详细图文教程(收藏起来) 阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程。阿里云会要求客户设置安全组,如果不设置,阿里云会指定默认的安全组。那么,这个安全组是什么呢?顾名思义,就是为了服务器安全设置的。安全组其实就是一个虚拟的防火墙,可以让用户从端口、IP的维度来筛选对应服务器的访问者,从而形成一个云上的安全域。
18581 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
27727 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,大概有三种登录方式:
12967 0
阿里云服务器安全组设置内网互通的方法
虽然0.0.0.0/0使用非常方便,但是发现很多同学使用它来做内网互通,这是有安全风险的,实例有可能会在经典网络被内网IP访问到。下面介绍一下四种安全的内网互联设置方法。 购买前请先:领取阿里云幸运券,有很多优惠,可到下文中领取。
21935 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
15291 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
19980 0
+关注
灰小猿
一个用代码编织世界的工程师
70
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载