<!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. TreeMap:是基于红黑树的Map接口的实现

    > TreeMap:是基于红黑树的Map接口的实现. 红黑树:平衡二叉树 取出时,可以有三种方式:前序遍历,中序遍历,后序遍历 >排序: A 自然排序  --TreeMap无参构造 Tre ...

  2. shell命令工作总结

    shell命令工作总结: 1.sed命令:1.1.将文本input.txt中含有”姓名”字符串的行中的谢朝辉替换成扎巴依:sed -e '/姓名/s/谢朝辉/扎巴依/g' input.txt1.2.将 ...

  3. TITLE: BizTalk Server 2013 Administration Console

    TITLE: BizTalk Server 2013 Administration Console------------------------------ Could not store tran ...

  4. Oracle创建Rman备份专用账户

    有时会因为信息安全需要,创建备份所需的专用账户,不适用sys等用户.可以使用如下方式:create user rman_ycr identified by oracle;grant create se ...

  5. SDN 第一次上机作业

    第一题 拓扑: 测试连通性: 第二题 拓扑: 测试连通性: 第三题 拓扑: 测试连通性:

  6. HBase性能优化 Java Api

    1. 使用“连接池” 如果每次和Hbase交互时都去新建连接的话,显然是低效率的,HBase也提供类连接池相关的API. 1.1. HTablePool 早期的API中使用它,但很不幸,现在它已经过时 ...

  7. ali验证码推送接口调用

    /** * 发送接口 * @param $info 发送信息的某些参数 * @return bool */ public function send($info) { $config = target ...

  8. java web开发环境配置系列（二）安装tomcat

    在今天,读书有时是件“麻烦”事.它需要你付出时间,付出精力,还要付出一份心境.--仅以<java web开发环境配置系列>来祭奠那逝去的…… 1.下载tomcat压缩包,进入官网http: ...

  9. bootstrap 多选款样式：bootstrap-switch

    有时候,为了美化checkbox后者radio的时候,让用户体验起来更好,jquery里有icheck. bootstrap里有bootstrap-switch,就简单介绍下bootstrap-swi ...

  10. Android的JNI调用（三）

    注册JNI函数 注册之意就是将Java层的native函数与JNI层对应的实现函数关联起来,这样在调用Java层的native函数时,就能顺利转到JNI层对应的函数执行. (1)静态注册 根据函数名来 ...