一、事件绑定

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. Django-orm高级

    ORM字段 orm常见字段 https://www.cnblogs.com/liuqingzheng/articles/9627915.html choice字段注释与数据渲染 性别 sex_choi ...

  2. git的本质是资源库和版本(资源)目录的维护过程

    仓库的本质: 资源+索引. 对git而言,添加到暂存区的过程是,将单个资源的修改副本保存到资源库,同时维护暂存区目录的过程. git的本质是资源库和版本目录的维护过程. 一.要素 1.资源 2.副本 ...

  3. Logstash之控制台输出的两种方式

    输出json output { stdout { codec => json } } 输出rubydebug output { stdout { codec => rubydebug } ...

  4. WPF 精修篇 属性动画

    原文:WPF 精修篇 属性动画 属性动画 是通过 Storyboard 来改变属性值 <Rectangle x:Name="rect" Width="200&quo ...

  5. EF连接mysql，出现A call to SSPI failed错误，解决办法

    我的使用场景是用EF连接AWS的mysql RDS,会偶发性的出现A call to SSPI failed错误, System.AggregateException: One or more err ...

  6. mini Redis（项目 二）

    一个仿Redis的内存数据库(主要用来做命令解析)服务端,  客户端使用的开源工具 : https://dom4j.github.io/     github:https://github.com/h ...

  7. EF 通过导航添加数据

    Fluent Api是指定模型与数据库表之间的对应关系 //一对多 this.HasOptional(x => x.主表).WithMany(x => x.多表).HasForeignKe ...

  8. 秋招打怪升级之路：十面阿里，终获offer！

    本文转载自:https://gongfukangee.github.io/2019/09/06/Job/ 作者:G.Fukang 开源项目推荐: JavaGuide: Java学习+面试指南!Gith ...

  9. SpringBoot学习笔记：http接口请求

    controller package com.example.demo.controller; import java.util.HashMap; import java.util.Map; impo ...

  10. error: undefined reference to `vtable for

    出现如下错误: 解决办法 当类中加入Q_OBJECT,需要手动删除中间文件,再构建