一、jQuery事件的分类

jQuery事件是对JavaScript事件的封装，常用事件分类如下：

1、基础事件

  1. window事件。
  2. 鼠标事件。
  3. 键盘事件。
  4. 表单事件。

2、复合事件是多个事件的组合

  1. 鼠标光标悬停。
  2. 鼠标连续点击。

二、鼠标事件

鼠标事件是当用户在文档上面移动或单击鼠标时而产生的事件，常用鼠标事件有：

三、键盘事件

用户每次按下或者释放键盘上的按键时都会产生事件，常用键盘事件如下：

四、表单事件

当元素获得焦点时，会触发focus()事件，失去焦点时，会触发blur()事件。

表单提交时会触发submit()事件。

五、综合示例

需求说明：

1、用户名输入框获得焦点时输入框背景色为浅蓝色，失去焦点时还原为白色背景色。

2、鼠标移至登录按钮时字体变粗，移出时整体恢复正常。

3、敲击键盘的“回车”键时触发表单提交事件。

代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>事件演示示例</title>

    <style type="text/css">

        #login{

            width: 400px;

            height: 250px;

            background-color: #f2f2f2;

            border:1px solid #DDDDDD;

            padding: 5px;

        }

        #login fieldset {

            border: none;

            margin-top: 10px;

        }

        #login fieldset legend{

            font-weight: bold;

        }

        #login fieldset p{

            display: block;

            height: 30px;

        }

        #login fieldset p label {

            display: block;

            float:left;

            text-align: right;

            font-size: 12px;

            width: 90px;

            height: 30px;

            line-height: 30px;

        }

        #login fieldset p input {

            display: block;

            float:left;

            border: 1px solid #999;

            width: 250px;

            height: 30px;

            line-height: 30px;

        }

        #login fieldset p input.code{

            width: 60px;

        }

        #login fieldset p img{

            margin-left: 10px;

        }

        #login fieldset p a{

            color: #057BD2;

            font-size: 12px;

            text-decoration: none;

            margin: 10px;

        }

        #login fieldset p input.btn{

            background: url("./images/login.gif") no-repeat;

            width: 98px;

            height: 32px;

            margin-left: 60px;

            color: #ffffff;

            cursor: pointer;

        }

        #login fieldset p input.input_focus{

            background-color: #BEE7FC;

        }

        </style>

       <!--引入jQuery-->

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

       <!--javascript-->

       <script>

         $(function(){

             // 用户名输入框的焦点事件

             $("input[name='member']").focus(function(){

                 $(this).addClass("input_focus");

             });

             // 用户名失去焦点

             $("input[name='member']").blur(function(){

                 $(this).removeClass("input_focus");

             });

             // 鼠标移入移出事件

             $(".btn").mouseover(function(){

                 $(this).css("font-weight","bold");

             });

             $(".btn").mouseout(function(){

                 $(this).css("font-weight","normal");

             });

             // 键盘事件，敲击回车键进行表单提交，keyCode的数值代表不同的键盘按键

             // js需要区分keyCode(IE)和which(FF)的兼容性，event.keyCode||event.which用来考虑兼容性

             $(document).keypress(function(e){

                 if(e.keyCode==13){

                     //$("#login").submit();

                     // 模拟表单提交

                     alert("触发表单的提交事件");

                 }

             });

         });

       </script>

</head>

<body>

    <form id="login">

        <fieldset>

          <legend>用户登录</legend>

          <p>

              <label>用户名：</label>

              <input name="member" type="text" />

          </p>

          <p>

              <label>密码：</label>

              <input name="password" type="text" />

          </p>

          <p>

              <label>验证码：</label>

              <input name="code" type="text" class="code" />

              <img src="data:images/code.gif" width="80" height="30" /><a href="#">换一张</a>

          </p>

          <p>

              <input name="" type="button" class="btn" value="登录" />

              <a href="#">注册</a><span>|</span><a href="#">忘记密码？</a>

          </p>

        </fieldset>

      </form>

</body>

</html>

效果：

jQuery（十一）：jQuery的事件的更多相关文章

  1. Jquery的点击事件，三句代码完成全选事件

    先来看一下Js和Jquery的点击事件 举两个简单的例子 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

  2. JQuery中隐藏/显示事件函数

    1.$("button").click(function(){ $("p").hide(); });2.如果您的网站包含许多页面,并且您希望您的 jQuery ...

  3. jQuery on 绑定的事件触发多次

    jquery用on绑定事件,在代码执行过程中,可能会遇到多次执行的情况. 解决方案是在on的事件前面加上一个off,再on. $('#btnBind').off('click').on('click' ...

  4. 关于Jquery的delegate绑定事件无效

    今天在做一个页面,用的是easyui页面有很多的tabs,里面都放了iframe 需要在load事件动态调整iframe高度 发现始终无法使用delegate来绑定load事件. 纠结了一下午发现了问 ...

  5. jQuery不支持hashchange事件？

    $(window) .bind( 'hashchange', onHashchange ) .trigger( 'hashchange' ); jQuery版本是1.9.1的,去源码里没找到hashc ...

  6. jQuery源码解读-事件分析

    最原始的事件注册 addEventListener方法大家应该都很熟悉,它是Html元素注册事件最原始的方法.先看下addEventListener方法签名: element.addEventList ...

  7. JQuery（选择器、事件、DOM操作）

    一.jQuery简介 jQuery 是一个 JavaScript 库. jQuery 极大地简化了 JavaScript 编程. jQuery 库位于一个 JavaScript 文件中,其中包含了所有 ...

  8. JQuery Checkbox的change事件

    JQuery   Checkbox的change事件  参考 http://blog.csdn.net/hbhgjiangkun/article/details/8126981   $(functio ...

  9. JQuery常用实用的事件[较容易忽略的方法]

     JQuery常用实用的事件 注:由于JQuery片段较多就没有用插入代码文本插入,请见谅!JQuery 事件处理ready(fn)代码: $(document).ready(function(){ ...

  10. 从jQuery的缓存到事件监听

    不知道大家有没有发现,用jQuery选择器"选择"之后的DOM上会添加jQuery*********属性. <DIV id=d1 jQuery1294122065250=&q ...

随机推荐

  1. mongodb 数据库操作--备份 还原 导出 导入（转）

    mongodb 数据库操作--备份 还原 导出 导入   -------------------MongoDB数据导入与导出------------------- 1.导出工具:mongoexport ...

  2. kafak manager + zookeeper + kafka 消费队列快速清除

    做性能测试时,kafka消息队列比较长,让程序自己消费完毕需要等待很长时间.就需要快速清理kafka队列 清理方式把 这kafak manager + zookeeper + kafka 这些应用情况 ...

  3. Maven 使用国内镜像

    1 修改maven 的配置文件 settings.xml,添加阿里云的一个中央仓库. 2 找到maven 的配置文件,一般在 maven 安装目录 apache-maven-3.5.0\conf 文件 ...

  4. 7 款顶级的开源 Web 分析软件

    Web 分析无非就是 Web 流量的测量.但它并不限于测量网络流量,还包括: 分析 数据采集 为了了解和优化网页而上报网络数据 Google Analytics是最广泛使用的基于云的网络分析服务.不过 ...

  5. Navicat for SQL Server(SQLServer数据库管理)

    Navicat for SQL Server 是一套专为 Mircosoft SQL Server设计的强大数据库管理及开发工具.它可以用于 SQL Server 2000.2005 及 2008R2 ...

  6. NSDate NSTimerZone 时区转换

    timeZoneAbbreviation = @“America/New_York”: #pragma mark - 转换时区 - (NSDate *) convertDate:(NSDate *) ...

  7. RSA算法 JS加密 JAVA解密

    有这样一个需求,前端登录的usernamepassword,password必需加密.但不可使用MD5,由于后台要检測password的复杂度,那么在保证安全的前提下将password传到后台呢,答案 ...

  8. mybatis 对象关系映射例子

    入门 http://legend2011.blog.51cto.com/3018495/908956 增删改 http://legend2011.blog.51cto.com/3018495/9130 ...

  9. 一个分布式 MySQL Binlog 存储系统的架构设计

    1. kingbus简介 1.1 kingbus是什么? kingbus是一个基于raft强一致协议实现的分布式MySQL binlog 存储系统.它能够充当一个MySQL Slave从真正的Mast ...

  10. 每日英语：China's Bigger Innovation Problem

    Last month's Third Plenum meeting of Chinese leaders seemed to signal Beijing's intention to experim ...