<!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. SQL点点滴滴_聪明的小写法（持续更新中）

    1.生成序列号 SELECT number + 1 ,number FROM master..spt_values WHERE type = 'P' ORDER BY number 说明: maste ...

  2. Lambda表达式学习记录

    Lambda表达式可以简化C#编程的某些方面,用法非常灵活.因此也不容易掌握. 下边是我学Lambda表达式的一点记录. 1.Lambda表达式是与委托紧密联系的.只要有委托参数类型的地方,就可以使用 ...

  3. AFNetworking 2.5.x 网络请求的封装

    AFNetworking 2.5.x 网络请求的封装 源码地址 https://github.com/YouXianMing/Networking 说明 1. 将block形式的请求转换成用代理来处理 ...

  4. WinPE ISO制作

    1.安装ADK,然后导出winPE镜像文件和启动文件: 打开 部署和映像工具环境,cd "Windows Preinstallation Environment",运行 copyp ...

  5. Redis常用指令

    1.使用指令存储数据 不同数据类型的使用 1.String > 在以上指令中我们使用set指令向redis存进了一个数据类型为string,名为str1,值为123456.(如果你要问为什么,那 ...

  6. 铁乐学Python_day07_集合and浅谈深浅copy

    1.[List补充] 在循环一个列表时,最好不要使用元素和索引进行删除操作,一旦删除,索引会随之改变,容易出错. 如果想不出错,可以采用倒着删除的方法,因为倒着删除进行的话,只是后面元素的位置发生了变 ...

  7. Java问题汇总（一） ----------2019/2/22

    第一次写,就弄弄简单样式

  8. 利用skipList(跳表)来实现排序(待补充)

    用于排名的数据结构 一般排序为利用堆排序(二叉树)和利用skipList(跳表)的方式 redis中SortedSet利用skipList(跳表)来实现排序,复杂度为O(logn),利用空间换时间,类 ...

  9. python处理数据（二）

    处理PDF文件 PyPDF2简介 作为 PDF 工具包构建的纯 python 库. 它可以:提取文档信息(标题,作者,... ...)一页一页地分割文件一页一页地合并文件裁剪页面将多个页面合并成一个页 ...

  10. CSS3的新增边框属性

    一.CSS3 新增的边框属性 属性 版本 简介 border-image CSS3 设置或检索对象的边框使用图像来填充 border-image-source CSS3 设置或检索对象的边框是否用图像 ...