一、事件绑定

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. 纯 css 打造一个小提示 tooltip

    最后编辑:2019/11/26 前 无意间在寻找资料时候,发现一个不错的小提示,查看源码竟然是纯手工 css 编写(文章底部参考链接). 效果 使用的特性 css2 中的 attr 函数,所以现在(2 ...

  2. update改数据详解

    update修改数据的要素  : 改哪张表? 改哪几列的值? 分别改成什么值? 在哪些行生效?(这个很重要,否则所有行都会受影响) mysql> update class ; where 表达式 ...

  3. jQuery学习路线&review

    学习途径:http://www.w3school.com.cn/jquery/index.asp 路线图 转载自:https://www.cnblogs.com/lanren2017/p/723720 ...

  4. Nginx php上传文件大小的设置

  5. WebSocket的简单认识&SpringBoot整合websocket

    1. 什么是WebSocket?菜鸟对websocket的解释如下 WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议. WebSocket 使得客户端和服务 ...

  6. HDU 2007-11 Programming Contest

    Can you find it? Time Limit: 10000/3000 MS (Java/Others)    Memory Limit: 32768/10000 K (Java/Others ...

  7. http响应总结：常见http响应错误总结

    工作中经常会被同事问这个http请求为什么调不通,我虽然能解释清楚错误是什么,但是没有总结过,想到刚开始时,也是看了别人的文章才会的,所以总结一下,贡献一下自己的经验. http 404 响应 404 ...

  8. HTML+CSS学习笔记整理

    一.标签语义化(重点): 1.可以方便代码的阅读和维护 2.同时让网络爬虫更好的解析从而更好的分析其内容 3.更好的优化引擎 如何做到标签语义化:个人理解是,首先,网页的HTML主要作用在网页的结构上 ...

  9. Markdown温故知新(4)：更多扩展语法及HTML

    1.强调(删除 & 高亮) 2.脚注(注脚) 3.数学公式 4.更多扩展语法 5.终极扩展之内嵌 HTML 5.1.文本修饰类标签 5.2.内容排版类标签 5.3.图片及多媒体标签 5.4.锚 ...

  10. web安全常用工具

    简单工具:明小子,阿d注入工具,namp,穿山甲,御剑,旁注 漏洞扫描工具:appscan .awvs.nbsi 端口扫描工具:nessus.namp.天镜脆弱性扫描与管理系统 数据库备份工具:中国菜 ...