<!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. Apache服务器如何通过.htaccess文件设置防盗链？

    Apache服务器通过.htaccess文件设置防盗链 用户经常面对的一个问题就是服务器的流量问题,而站点文件被盗链是其中最为主要的部分.所谓盗链,是指其他网站直接链接我们网站上的文件,一般来说,盗链 ...

  2. 关于easyUI

    <input class="easyui-combobox" id="s_dataDicName" data-options="panelHei ...

  3. Django 补充

    在Django项目的外面操作这个Django内部的models: 当你创建Django项目的时候你在用的时候,你是在这个Django项目中使用的  那么你怎么在你的这个Django项目的外面使用这个D ...

  4. 使用Docker构建AspNetCore应用

    #Build Image Stage FROM microsoft/aspnetcore-build:2 AS build-env WORKDIR /api # 以下为优化还原,因为项目文件不常变动D ...

  5. UNIX高级环境编程（7）标准IO函数库 - 二进制文件IO，流定位，创建临时文件和内存流

    1 二进制IO(Binary IO) 在前一篇我们了解了逐字符读写和逐行读写函数. 如果我们在读写二进制文件,希望以此读写整个文件内容,这两个函数虽然可以实现,但是明显会很麻烦且多次循环明显效率很低. ...

  6. Spring MVC Hello World 404

    下面的例子说明了如何使用 Spring MVC 框架来编写一个简单的基于 web 的 Hello World 应用程序.下面让我们使用 Eclipse IDE,然后按照下面的步骤使用 Spring 的 ...

  7. 处理过期的archivelog和rman备份

    当手工删除了归档日志以后,Rman备份会检测到日志缺失,从而无法进一步继续执行.所以此时需要手工执行crosscheck过程,之后Rman备份可以恢复正常.[执行顺序如下:手工删除archivelog ...

  8. 【跨域】#001 JSONP原理解析【总结】

    一.JSONP 是什么? 1.1 概念 JSONP(JSON with Padding)是资料格式 JSON 的一种“使用模式”,可以让网页从别的网域要资料.由于同源策略,一般来说位于 server1 ...

  9. [转]IE9.0或者360下js(JavaScript、jQuery)不能正确执行(加载)，按F12后执行正常;Firefox下ajax的success返回数据data(json、string)无法获取

    兼容问题1: 页面的分享等插件加载不全,并无法点击. 兼容问题2: IE下页面选择器(#id..class.etc.)绑定click事件无法访问到,后台springmvc方法,也无法获取ajax的su ...

  10. JavaScript设计模式—单例模式

    单例模式介绍 系统中被唯一使用的,一个类只有一个实例 单例模式的思路是: 一个类能返回一个对象的引用(并且永远是同一个)和一个获得该实例的方法(静态方法,通常使用 getInstance 名称). 那 ...