一、事件绑定

1、标准方式

1. jquery标准的绑定方式

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

    * 注：如果调用事件方法，不传递回调函数，则会触发浏览器默认行为。

        * 表单对象.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 () {

           //1.获取name对象，绑定click事件

           /*$("#name").click(function () {

               alert("我被点击了...")

           });*/

           //给name绑定鼠标移动到元素之上事件。绑定鼠标移出事件

            /*$("#name").mouseover(function () {

               alert("鼠标来了...")

            });

            $("#name").mouseout(function () {

                alert("鼠标走了...")

            });*/

           /* //简化操作，链式编程

            $("#name").mouseover(function () {

                alert("鼠标来了...")

            }).mouseout(function () {

                alert("鼠标走了...")

            });*/

            alert("我要获得焦点了...")

            //$("#name").focus();//让文本输入框获得焦点

            //表单对象.submit();//让表单提交

        });

    </script>

</head>

<body>

<input id="name" type="text" value="绑定点击事件">

</body>

</html>

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

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 () {

           //1.使用on给按钮绑定单击事件  click

           $("#btn").on("click",function () {

               alert("我被点击了。。。")

           }) ;

           //2. 使用off解除btn按钮的单击事件

            $("#btn2").click(function () {

                //解除btn按钮的单击事件

                //$("#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

    * 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>

--------------------

<!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方法

           $("#btn").toggle(function () {

               //改变div背景色backgroundColor 颜色为 green

               $("#myDiv").css("backgroundColor","green");

           },function () {

               //改变div背景色backgroundColor 颜色为 pink

               $("#myDiv").css("backgroundColor","pink");

           });

        });

    </script>

</head>

<body>

    <input id="btn" type="button" value="事件切换">

    <div id="myDiv" style="width:300px;height:300px;background:pink">

        点击按钮变成绿色，再次点击红色

    </div>

</body>

</html>

jQuery事件绑定与切换的更多相关文章

  1. 深入学习jQuery事件绑定

    × 目录 [1]bind [2]trigger [3]delegate[4]on[5]one 前面的话 javascript有HTML.DOM0级.DOM2级和IE这四种事件处理程序,而jQuery对 ...

  2. jQuery事件绑定、解绑、命名空间

    jQuery事件绑定.解绑.命名空间 <%@ page language="java" import="java.util.*" pageEncoding ...

  3. jQuery 事件绑定 和 JavaScript 原生事件绑定

    总结一下:jQuery 事件绑定 和 JavaScript 原生事件绑定 及 区别 jQuery 事件绑定 jQuery 中提供了四种事件监听绑定方式,分别是 bind.live.delegate.o ...

  4. JQuery事件绑定，bind与on区别

    jquery事件绑定bind:向匹配元素添加一个或多个事件处理器 $(selector).bind("click",data,function); live:向当前或未来的匹配元素 ...

  5. jQuery事件绑定和委托实例

    本文实例讲述了jQuery事件绑定和委托.分享给大家供大家参考.具体方法如下: jQuery事件的绑定和委托可以用多种方法实现,on()  . bind()  . live()  . delegate ...

  6. jQuery 事件绑定

    在文档装载完成后,如果打算为元素绑定事件来完成某些操作,则可以使用 bind() 方法来对匹配元素进行特定事件的绑定,bind() 方法的调用格式为:bind( type [, data] , fn ...

  7. jQuery事件绑定与常用事件

    jQuery事件与js类似,只是在名称上将前面的on去掉了,例如jQuery的click.mousedown.keypress事件.jQuery绑定事件有2种方法,下面用最基本的例子做演示. ①直接绑 ...

  8. jQuery事件绑定.on()简要概述及应用

    原文地址:http://www.jquerycn.cn/a_5346     前几天看到事件委托的时候,关于live()方法讲的不是很详细,就去搜了一下关于live()和delegate()的,最后看 ...

  9. jQuery事件绑定on()、bind()与delegate() 方法详解

    jquery中有四种事件绑定函数,bind(),live(),on(),delegate(),由于live现在并不常用,因此不做过多解释. 1. bind()用法 $("div p" ...

随机推荐

  1. Java8 新特性 Stream 非短路终端操作

    非短路终端操作 Java8 新特性 Stream 练习实例 非短路终端操作,就是所有的元素都遍厉完,直到最后才结束.用来收集成自己想要的数据. 方法有: 遍厉 forEach 归约 reduce 最大 ...

  2. 转 Java jar (SpringBoot Jar)转为win可执行的exe程序

    原文链接:http://voidm.com/2018/12/29/java-jar-transform-exe/打包Jar工程 将java项目打包成jar工程,可以是文章以SpringBoot为例po ...

  3. Shiro 使用 JWT Token 配置类参考

    项目中使用了 Shiro 进行验证和授权,下面是 Shiro 配置类给予参考. 后来并没有使用 Shiro,感觉使用 JWT 还是自己写拦截器比较灵活,使用 Shiro 后各种地方需要魔改,虽然功能也 ...

  4. R语言dai xie

    R语言,Python长期招代写,作业量充足,需要一定英文能力,价格满意.有意者请留言联系,谢谢

  5. spring-session（一）揭秘续篇

    上一篇文章中介绍了Spring-Session的核心原理,Filter,Session,Repository等等,传送门:spring-session(一)揭秘. 这篇继上一篇的原理逐渐深入Sprin ...

  6. 信安周报-第04周：系统函数与UDF

    信安之路 第04周 前言 这周自主研究的任务如下: 附录解释: SQLi的时候应对各种限制,可以使用数据库自带的系统函数来进行一系列变换绕过验证 eg:字符串转换函数.截取字符串长度函数等 注入的时候 ...

  7. 2019-11-29-WPF-从触摸消息转触摸事件

    原文:2019-11-29-WPF-从触摸消息转触摸事件 title author date CreateTime categories WPF 从触摸消息转触摸事件 lindexi 2019-11- ...

  8. linux centos无法删除网站根目录下的.user.ini解决办法

    .user.ini文件在执行rm -rf时,提示无法删除 解决办法 首先了解下chattr命令的作用:不让用户修改.删除文件等. -i选项:设定文件不能被删除.改名.设定链接关系,同时不能写入或新增内 ...

  9. 获取apache ignite缓存中的数据行数少于实际行数

    我将ignite项目打包放到linux下,在linux下获取window中存放在oracle数据库中的数据,linux服务器作为ignite的服务端节点,我在本地启动tomact,作为ignite客户 ...

  10. JavaWeb Listener之HttpSessionBindListener

    HttpSessionBindListener        监听把自身这个对象绑定到HttpSession对象上.解绑 绑定到HttpSession对象上,其实就是调用session的setAttr ...