jQuery（十一）：jQuery的事件
一、jQuery事件的分类
jQuery事件是对JavaScript事件的封装，常用事件分类如下：
1、基础事件
- window事件。
- 鼠标事件。
- 键盘事件。
- 表单事件。
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的事件的更多相关文章
- Jquery的点击事件，三句代码完成全选事件
先来看一下Js和Jquery的点击事件 举两个简单的例子 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...
- JQuery中隐藏/显示事件函数
1.$("button").click(function(){ $("p").hide(); });2.如果您的网站包含许多页面,并且您希望您的 jQuery ...
- jQuery on 绑定的事件触发多次
jquery用on绑定事件,在代码执行过程中,可能会遇到多次执行的情况. 解决方案是在on的事件前面加上一个off,再on. $('#btnBind').off('click').on('click' ...
- 关于Jquery的delegate绑定事件无效
今天在做一个页面,用的是easyui页面有很多的tabs,里面都放了iframe 需要在load事件动态调整iframe高度 发现始终无法使用delegate来绑定load事件. 纠结了一下午发现了问 ...
- jQuery不支持hashchange事件？
$(window) .bind( 'hashchange', onHashchange ) .trigger( 'hashchange' ); jQuery版本是1.9.1的,去源码里没找到hashc ...
- jQuery源码解读-事件分析
最原始的事件注册 addEventListener方法大家应该都很熟悉,它是Html元素注册事件最原始的方法.先看下addEventListener方法签名: element.addEventList ...
- JQuery（选择器、事件、DOM操作）
一.jQuery简介 jQuery 是一个 JavaScript 库. jQuery 极大地简化了 JavaScript 编程. jQuery 库位于一个 JavaScript 文件中,其中包含了所有 ...
- JQuery Checkbox的change事件
JQuery Checkbox的change事件 参考 http://blog.csdn.net/hbhgjiangkun/article/details/8126981 $(functio ...
- JQuery常用实用的事件[较容易忽略的方法]
JQuery常用实用的事件 注:由于JQuery片段较多就没有用插入代码文本插入,请见谅!JQuery 事件处理ready(fn)代码: $(document).ready(function(){ ...
- 从jQuery的缓存到事件监听
不知道大家有没有发现,用jQuery选择器"选择"之后的DOM上会添加jQuery*********属性. <DIV id=d1 jQuery1294122065250=&q ...
随机推荐
- 转：jQuery插件之Wookmark：流布局插件遇到图片资源请求过慢导致最终计算图片绝对位置top不够准确发生图片重叠的解决方案
谈起Wookmark我想做过前端的大侠都不会觉得陌生,它就是远近闻名的流布局jQuery插件,这个插件使用起来非常简单,需要引入两个js: 1.<script src="/js/jqu ...
- xbox360 双65厚机自制系统无硬盘 U盘玩游戏方法
因为没有硬盘,又没有光盘.所以想把游戏放在U盘里面.用U盘来做为硬盘玩游戏. 现有的自制系统主要是FSD,但是FSD要用硬盘才能安装,理论上U盘也可以,但是我没有尝试了. 这里介绍的是玩xex格式的游 ...
- 滴滴passport设计之道:帐号体系高可用的7条经验
导读:应对高可用及极端峰值,每个技术团队都有自己的优秀经验,但是这些方法远没有得到体系化的讨论.高可用架构在 6 月 25 日举办了『高压下的架构演进』专题活动,进行了闭门私董会研讨及对外开放的四个专 ...
- 更改 AWS RDS mysql时区 -摘自网络
AWS RDS AWS上搭建数据库的时候,不是DB on EC2就是RDS,但是选择RDS时,Timezone怎么处理? 「面向全球提供的AWS来讲理所当然的是UTC」,而RDS也不是例外.把服务器迁 ...
- jQuery学习笔记（DOM操作）
DOM操作的分类 一般来说,DOM操作分为3个方面,即DOM Core.HTML-DOM和CSS-DOM. 1. DOM Core DOM Core并不专属于JavaScript,任何一种支持DOM的 ...
- 手把手教你使用“谷歌云消息服务(GCM)"
原文: http://android.eoe.cn/topic/summary GCM结构概述-GCM Architectural Overview 快速预览* 一个状态通知允许应用程序通知用户一个事 ...
- poj 1868 Antiarithmetic? 推断序列中是否有等差子序列
#include<iostream> using namespace std; const int maxN=10024; int n,vis[maxN],a[maxN]; bool fi ...
- 每日英语：5 Things to Know About Missing Malaysia Airlines Flight and Air Safety
Malaysia Airlines Flight MH370, with 239 people aboard, lost contact early Saturday with the airline ...
- python（51）：Python vars() 函数
Python vars() 函数 Python 内置函数 描述 vars() 函数返回对象object的属性和属性值的字典对象. 语法 vars() 函数语法: vars([object]) 参数 ...
- 【delphi】Byte数组与String类型的转换
string string = AnsiString = 长字符串,理论上长度不受限制,但其实受限于最大寻址范围2的32次方=4G字节: 变量Str名字是一个指针,指向位于堆内存的字符序列,字符序列起 ...