<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>事件</title>

            <script src="js/jquery.js"></script>

        <style>

        .me{ 

            border: 1px solid red;

            margin-top: 75px;

            width: 400px;

            height: 150px;

            background-color: #ccc;

            overflow: auto;

        }

        input{

            border: 1px solid black;

            font-size: 40px;

            width: 397px;

            height: 50px;

        }

        button{

            width: 100px;

            height: 50px;

        }

        </style>

        <script type="text/javascript">

            //页面加载完成简写形式

            $(function(){

                //on是用于为选中元素绑定事件的函数，它有两个参数，一个事件，第二个执行的方法

                $("div").on("mouseover",function(){

                    $("div").css("background-color","lightgreen")

                });

                    $("div").on("mouseout",function(){

                    $(this).css("background-color","#ccc")

                });

                $("input[type='text']").on("keydown",function(){

                    $(this).css("background-color","blue");

                });

                $("input[type='text']").on("keyup",function(){

                    $(this).css("background-color","white");

                    var v = $(this).val();

                    if(v.length==){

                        //trigger 触发button的点击事件

                        $("button").trigger("click");

                    }

                });

                //利用one函数 为对象绑定一次性事件 ,一次性事件：只触发一次

                $("button").one("click",function(){

                    alert("数据已提交");

                });

                //利用off()函数解除事件绑定

                $("*").off();//解绑全部事件

                $("*").off("click");//解绑单击事件

            })

        </script>

    </head>

    <body>

        <div class="me"  >

            事件测试案例

            <input type="text" /><br>

            <button>提交</button>

        </div>

    </body>

</html>

jQuery学习-事件绑定的更多相关文章

  1. jQuery学习-事件之绑定事件（三）

    在上一篇<jQuery学习-事件之绑定事件(二)>我们了解了jQuery的dispatch方法,今天我们来学习下handlers 方法: handlers: function( event ...

  2. jQuery学习-事件之绑定事件（二）

    在上一篇<jQuery学习-事件之绑定事件(一)>我们了解了jQuery的add方法,今天我们来学习下dispatch方法: dispatch: function( event ) {   ...

  3. jQuery的事件绑定与触发 - 学习笔记

    jQuery的事件绑定与触发 事件绑定 自动触发事件 常用的鼠标事件 事件冒泡和默认行为 事件冒泡 默认行为 获得当前鼠标的位置和按键 jQuery的事件绑定与触发 事件绑定 基本绑定 $(eleme ...

  4. python 全栈开发，Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))

    一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...

  5. [HTML5]原生事件绑定和jquery动态事件绑定的区别

    原生事件绑定: <!-- 标签上绑定的事件是由window对象帮助调用,因此方法内的this其实是window对象 --> <label><input type=&quo ...

  6. jquery 动态事件绑定(0512)

    jquery动态事件绑定,父元素需为静态元素,(不能是动态生成): $("#parent").on("click","#child",fun ...

  7. 对jQuery的事件绑定的一些思考

    jQuery的事件绑定 问题 首先我们看下面的一个非经常见的事件绑定代码: //example $('#dom').click(function(e){ //do something }); $('# ...

  8. jQuery学习-事件之绑定事件（一）

    我们都知道jQuery的事件其思想来源于Dean Edwards的addEvent,通过源码我们知道jQuery在为元素绑定事件时,每种类型的事件(click,blur)时只绑定了一次对应类型的事件处 ...

  9. 7 HTML&JS等前端知识系列之jquery的事件绑定

    preface 我们知道,每一个a,input等等标签都可以为其绑定一个事件,onclick也好,focus 也罢,都可以绑定的.但是众神key想过这个问题没有,倘若这里有1000个input标签需要 ...

随机推荐

  1. Ad-hoc 查询以及动态SQL的罪恶[译]

    本文为翻译文章,原文地址:https://www.simple-talk.com/blogs/2009/08/03/stolen-pages-ad-hoc-queries-and-the-sins-o ...

  2. Ubuntu安装 和 python开发

    在ubuntu上安装pycharm 可以好几种下载办法 1.pycharm之linux版本下载地址: https://download.jetbrains.8686c.com/python/pycha ...

  3. 申请Let’s Encrypt永久免费SSL证书过程教程及常见问题

    配置证书https://easy.zhetao.com/   虽然目前Let’s Encrypt免费SSL证书默认是90天有效期,但是我们也可以到期自动续约,不影响我们的尝试和使用,为了考虑到文章的真 ...

  4. Skype for Business Server-呼叫质量仪表板（一）安装与配置

    第一篇:安装与配置 很多公司在运行过程中都遇到了难以追踪客服人员绩效的情况,公司没有有效的方法追踪员工在通过电话等远程方式解决客户问题.销售产品.客户关怀的情况.Skype for Business提 ...

  5. 铁乐学python_Day42_线程池

    铁乐学python_Day42_线程池 concurrent.futures 异步调用模块 concurrent.futures模块提供了高度封装的异步调用接口 ThreadPoolExecutor: ...

  6. .Net WebApi 支持跨域访问使用 Microsoft.AspNet.WebApi.Cors

    首先导入Cors库,通过程序包管理控制台导入 Install-Package Microsoft.AspNet.WebApi.Cors 引用库之后,我们需要进行简单的配置. 现在WebApiConfi ...

  7. MySQL开发规范和原则大全

    一. 表设计 库名.表名.字段名必须使用小写字母,“_”分割. 库名.表名.字段名必须不超过12个字符. 库名.表名.字段名见名知意,建议使用名词而不是动词. 建议使用InnoDB存储引擎. 存储精确 ...

  8. MySQL主从.md

    MySQL Replication 概述 Mysql内建的复制功能是构建大型,高性能应用程序的基础.将Mysql的数据分布到多个系统上去,这种分布的机制,是通过将Mysql的某一台主机的数据复制到其它 ...

  9. python第十六课——外部函数and内部函数

    1.外部函数&内部函数 内部函数: 定义在某个函数的内部,就是内部函数: [注意事项]: 1).内部函数可以随意使用它外部函数中的内容 2).外部函数不能使用内部函数中的内容 3).内部函数不 ...

  10. IOS的滑动菜单(Sliding Menu)的具体写法（附代码）

    滑动菜单是一个很流行的IOS控件 先上效果图:        这里使用github的JTReveal框架来开发,链接是https://github.com/agassiyzh/JTRevealSide ...