一、事件绑定

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. 【BZOJ4944】[NOI2017]泳池（线性常系数齐次递推，动态规划）

    [BZOJ4944][NOI2017]泳池(线性常系数齐次递推,动态规划) 首先恰好为\(k\)很不好算,变为至少或者至多计算然后考虑容斥. 如果是至少的话,我们依然很难处理最大面积这个东西.所以考虑 ...

  2. PHP 垃圾回收机制详解

    前言:之前对PHP的GC只是了解了个大概,这次详细了解下PHP的垃圾回收机制(GC). 介于网上大部分都是PHP5.X的GC,虽然 php5 到 php7 GC部分做出的改动较小,但我觉得还是一起写下 ...

  3. WPF 高级篇 MVVM (MVVMlight) 依赖注入使用Messagebox

    原文:WPF 高级篇 MVVM (MVVMlight) 依赖注入使用Messagebox MVVMlight 实现依赖注入 把弹框功能 和接口功能注入到各个插件中 使用依赖注入 先把所有的ViewMo ...

  4. because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checkin

    1 前言 浏览器报错误(chrome和firefox都会):because its MIME type ('text/html') is not a supported stylesheet MIME ...

  5. linux系统shell基础知识入门二

    条件判断语句 test或[],这两是等价的.但用[]这种可能看起来更简洁 必须在[符号和检查条件之间留出空格,而test命令之后也总是应该有一个空格 如果要把test 和then 放一行上,那么必须在 ...

  6. linux教程：[3]配置Zookeeper开机启动

    ZooKeeper是Hadoop的正式子项目: Hadoop是一个分布式系统基础架构,由Apache基金会所开发: Zookeeper能够用来leader选举:也就是你有N+1台同样的服务器的时候又z ...

  7. vue+element下拉框样式的点击按钮

    项目中点击按钮实在太多了,怎么办呢?我们就可以将它们制作成像下拉框那样的类似操作 1.HTML样式部分:关键点在于command 方法和属性 1 <el-dropdown 2 size=&quo ...

  8. 《2017年-2018年中国MES软件及服务市场研究报告》正式发布！

    <2017年-2018年中国MES软件及服务市场研究报告>由e-works Research研究编写,报告深度分析了2017年及2018年中国MES市场发展状况,从市场规模.市场特点.需求 ...

  9. HTTP的发展历史和各个版本差别

    HTTP前世今生 1989年,蒂姆·伯纳斯-李发表论文确立了三项关键技术: URI: 统一资源标志符,作为互联网上资源的唯一身份 HTML: 超文本标记语言,描述超文本文档 HTTP: 超文本传输协议 ...

  10. PHP使用PhpAnalysis进行分词

    1.介绍 PHPAnalysis分词程序使用居于unicode的词库,使用反向匹配模式分词,理论上兼容编码更广泛,并且对utf-8编码尤为方便. 下载地址:http://www.phpbone.com ...