一、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. Sql Server Compact 4.0数据库部署安装

    Sql Server Compact 4.0相比3.5版本增强了很多,支持Entity Framework 4.1,对于轻量级应用来讲,使用Sql Server Compact 4.0是个很好的选择, ...

  2. SpringMVC之RequestContextHolder分析

    最近遇到的问题是在service获取request和response,正常来说在service层是没有request的,然而直接从controlller传过来的话解决方法太粗暴,后来发现了Spring ...

  3. Windows 7 添加SSD硬盘后重启卡住正在启动

    楼主办公电脑,原来只配置了一块机械硬盘,用着总很不顺心,于是说服领导给加了块SSD固态硬盘. 操作如下: 1.在PE下分区格式化新固态硬盘,将原来机械硬盘的C盘GHOST备份后还原到新固态硬盘: 2. ...

  4. Android Studio 1.1.0 切换主题和绑定 代码提示 快捷键

    这篇文章用于给刚从eclipse 转用 Android Studio 1.1.0的同学看的. 所以经常会更新的. 至于为什么要转Android Studio 1.1.0呢,就自己想吧.没有人强逼的. ...

  5. 调试web api的工具 谷歌插件 Restlet

    介绍 http://chromecj.com/productivity/2017-08/789.html

  6. android 调用系统相机拍照 获取原图

      好吧,为了这个问题又折腾了一整天.之前在网上找来的方法,如果在onActivityResult中直接用data.getData()的方式来生成bitmap,其实获取的是拍照生成的缩略图!看看尺寸就 ...

  7. linux c编程操作数据库（sqlite3应用）

     首先pThread 不是linux系统默认库,连接的时候需要使用库libpthread.a. 加入-lpthread参数.另外会有lopen什么找不到的情况.加入-ldl 指定目录.Project_ ...

  8. 【C/C++】标准IO操作

    fwrite实现文件复制 //@ author 成鹏致远 //@ net http://infodown.tap.cn //@ qq 552158509 //@ blog lcw.cnblogs.co ...

  9. SVN如何切换账号

    https://www.cnblogs.com/six-moon/p/5233878.html **************************************************** ...

  10. spring boot spring cache ehcache3.x整合

    http://blog.csdn.net/qq18998401056/article/details/53467671 **************************************** ...