一、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. Django基于正则表达式的URL（2）

    Django基于正则表达式的URL(2) 1. 关于正则的说明 url(r'^detail-(\d+)-(\d+).html',views.detail), 当客户端输入 127.0.0.1:8000 ...

  2. Android SDK Manager详解

    Android基础知识——Android SDK Manager详解   做Android开发时,免不了使用Android SDK Manager,安装需要的sdk版本.buildTools版本等等. ...

  3. 简简单单搞掂恼人的Laravel 5安装

    想折腾下Laravel 5了.Laravel是这世界上最好且没有之一的语言──PHP──的众多框架中的一个,是我比较感兴趣的PHP Web Framework. 但是安装Laravel可不是件容易的事 ...

  4. Android应用中创建绑定服务使得用户可以与服务交互

    原文:http://android.eoe.cn/topic/android_sdk 一个绑定的服务是客户服务器接口上的一个服务器.一个绑定的服务允许组件(如:活动)来绑定一个服务,传送请求,接收响应 ...

  5. c语言实现xor加密

    异或运算:^ 定义:它的定义是:两个值相同时,返回false,否则返回true.也就是说,XOR可以用来判断两个值是否不同. 特点:如果对一个值连续做两次 XOR,会返回这个值本身. ^ // 第一次 ...

  6. 帝国cms使用自定义函数获取新闻文章数 实例分享

    原文地址:http://www.jbxue.com/cms/24337.html 介绍了帝国cms系统中通过用户自定义函数获取用户发表新闻数量的方法,主要是分享下帝国cms自定义函数功能. 在帝国cm ...

  7. lame,把ios录音转换为mp3格式

    在ios设备中进行录音,录音文件的格式为caf.但这种格式在很多设备中没法播放.为了适应终端的播放功能,特将caf转换为mp3格式文件来使用. 在录制caf文件时,需要使用双通道,否则在转换为MP3格 ...

  8. [na]TCP的三次握手四次挥手/SYN泛洪

    1.TCP报文格式 上图中有几个字段需要重点介绍下: (1)序号:Seq序号,占32位,用来标识从TCP源端向目的端发送的字节流,发起方发送数据时对此进行标记. (2)确认序号:Ack序号,占32位, ...

  9. /etc/ssh/sshd_config 关建字:PermitRootLogin no　　禁示以root身份登录服务器

    这种情况,不会影响,普通用户su到root

  10. java连接https时禁用证书验证.

    import java.io.File; import java.security.cert.CertificateException; import java.util.List; import j ...