一、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. redis PUB/SUB（发布/订阅）

    PSUBSCRIBE订阅一个或多个符合给定模式的频道 PUBLISH将信息message 发送到指定的频道channel PUBSUB是一个查看订阅与发布系统状态的内省命令 PUBSUB CHANNE ...

  2. JDK1.5新特性，基础类库篇，扫描类（Scanner）用法

    一. 背景 这是一个简单的文本扫描类,能够解析基本数据类型与字符串.它是StringTokenizer和Matcher类之间的某种结合. 最大的优点是读取控制台输入非常方便,其它功能,有点鸡肋. 二. ...

  3. 微信小程序－wx:for 循环列表

      获取了 N 条信息(具体有多少条不确定),如何在界面中动态呈现出来呢? .wxml 代码 <view wx:for="{{items}}" wx:for-index=&q ...

  4. SonarQube学习入门指南

    1. 什么是SonarQube? SonarQube 官网:https://www.sonarqube.org/ SonarQube®是一种自动代码审查工具,用于检测代码中的错误,漏洞和代码异味.它可 ...

  5. LPAD在Oracle中和 mssql以及在MySQL中的不同用法 以及调用存储过程方法

    Oracle: ,') from dual ,,') from dual 效果: Mssql: )+ltrim(tt.number_no) from Tabletest as tt 效果: MySQL ...

  6. javascript基础拾遗(十一)

    1.DOM操作 1)查找 //根据id查找 document.getElementById() //根据html标签查找 documnet.getElementByTagName() //根据样式cl ...

  7. vim学习笔记（9）：vim显示文件名

    如何让vim在编辑模式下显示文件名 在根目录下:~/.vimrc 中追加一行: set laststatus=2 shell 下执行命令: echo "set laststatus=2&qu ...

  8. python（47）：range和xrange的区别和联系

    range([start,] stop[, step]),根据start与stop指定的范围以及step设定的步长,生成一个序列. 比如: >>> range(5)[0, 1, 2, ...

  9. linux命令(45)：去掉 所有文件中的空行

    方法一:利用grep grep -v '^\s*$' test.txt 注:-v表示将匹配的结果进行反转,正则表达式匹配空行.(空行可包括空格符制表符等空白字符) 方法二:利用sed sed '/^\ ...

  10. Oracle sql%rowcount 返回影响行数；sql server @@RowCount返回影响行数

    sql server中,返回影响行数是:If @@RowCount<1 Oracle中,返回影响行数是:If sql%rowcount<1 例: sqlserver: create pro ...