<!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. gitbook 入门

    安装 gitbook 插件 npm install gitbook-cli -g 或者 yarn global add gitbook-cli 初使化目录 gitbook init 会发现目录下面多了 ...

  2. 解决 There are no resources that can be added or removed from the server

    网上下载了一个项目,在eclipse中部署时,加载项目到tomcat中项目名称无法显示,报出There are no resources that can be added or removed fr ...

  3. 用UITextView加载rtfd文件

    用UITextView加载rtfd文件 效果 说明 使用此方法可以实现十分简易的富文本显示效果,包括图文混排等等效果. 源码 // // ViewController.m // Rtfd // // ...

  4. Fiddler下Firefox提示“您的连接并不安全”的解决办法

    一.版本信息 Firefox 最新版本V46.0.1 Fiddler 最新版本V4.6.2.3 二.错误信息 开启fiddlers的https协议捕获的方法,百度上可以查到不再赘述,直接放张图(Too ...

  5. JavaWeb定时器-Spring3.x及更高版本Task使用

    大背景 现代的 Web 应用程序框架在范围和复杂性方面都有所发展,应用程序的每个底层组件也必须相应地发展.作业调度是现代系统中对 Java 应用程序的一般要求,而且也是对 Java 开发人员一贯的要求 ...

  6. docker 自制CentOS 6-lnp镜像

    环境准备 1台centos 6.5镜像虚拟机  febootstrap.docker febootstrap 安装 yum install -y yum-priorities && r ...

  7. 逆向分析-IDA动态调试WanaCrypt0r的wcry.exe程序

    0x00 前言 2017年5月12日全球爆发大规模蠕虫勒索软件WanaCrypt0r感染事件,各大厂商对该软件做了深入分析,但针对初学者的分析教程还比较少,复现过程需要解决的问题有很多,而且没有文章具 ...

  8. NCE2

    1．A private conversation Last week I went to the theatre. I had a very good seat. The play was very ...

  9. Linux--安全加固02

    目录:1.BIOS2.SSH安全3.禁用telnet4.禁用代码编译5.ProFTP6.TCPwrappers7.创建一个SU组8.root通知9.history安全10.欢迎信息11.禁用所有特殊账 ...

  10. Alpha 冲刺报告（2/10）

    Alpha 冲刺报告(2/10) 队名:洛基小队 团队困难汇总:在开始正式编码的时候遇到了很严重的问题,Cocos Creator的教程过少,之前浏览的官网上的教程以为很齐全,但是在最重要的脚本方面还 ...