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="images/code.gif" width="80" height="30" /><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >换一张</a>
</p>
<p>
<input name="" type="button" class="btn" value="登录" />
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >注册</a><span>|</span><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >忘记密码？</a>
</p>
</fieldset>
</form>
</body>
</html>
效果：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
最近一段时间打了一个大仗,现在总算消停点,才有时间来做个总结吧算是: 移动端遇到一个项目,是一个列表的侧滑栏,在我这里用jq写的交互事件.自测各方面都挺好的,美滋滋的给了研发.研发也美滋滋的开始开发. 但是,好景不长... 研发加了ajax事件后,我的交互效果有部分受了影响! 一个小姑娘,在一群大老爷们研发堆里,对着昏暗的电脑和看不太懂的后台代码,改了半天.最后没解决.我就回来了. 后来就找共同点,发现有个类名控制的交互都不能实现,最后去问研发,你是不是没加上我的类名? 回:加着呢啊!我一看模拟
-
jQuery的事件处理你知道多少
目录 一.jQuery的事件处理 1.页面载入事件 2.事件绑定(bind) 3.反绑定事件(unbind) 4.一次性事件绑定(one) 5.模拟鼠标悬停(hover) 总结 一.jQuery的事件处理 1.页面载入事件 $(document).ready() --- onload 2.事件绑定(bind) bind(type,[data],fn) type:表示事件类型(click.mouseover.mouseout...) [data]:可选参数,表示传递给事件对象的额外数据 fn:是一
-
JQuery通过键盘控制键盘按下与松开触发事件
效果图: HTML部分: 首先设置几个盒子,用来构建这个页面的大致框架. 给盒子相应的类名以及id,方便css的布局以及JQuery的获取. 在盒子内放入文字. 引用JQuery插件. CSS部分: 1.设置一个公共的类(HTML),在里面写公共的样式,并且放入HTML的盒子中. 2.设置关键帧的值,添加一些CSS3的动画效果. 3.把引用关键帧的的函数封装在一个类(CSS)中. JQuery部分: 1.先设置键盘按下事件(onkeydown). 2.if判断中输入相应的键码值,确定你所按下的键
-
JQuery绑定事件四种实现方法解析
jQuery提供了多种绑定事件的方式,每种方式各有其特点,明白了它们之间的异同点,有助于我们在写代码的时候进行正确的选择,从而写出优雅而容易维护的代码.下面我们来看下jQuery中绑定事件的方式都有哪些. jQuery中提供了四种事件监听方式,分别是bind.live.delegate.on,对应的解除监听的函数分别是unbind.die.undelegate.off.在开始看他们之前 一:bind(type,[data],function(eventObject)) bind是使用频率较高的一
-
基于jQuery拖拽事件的封装
本文实例为大家分享了基于jQuery封装的拖拽事件,供大家参考,具体内容如下 HTML代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <
-
jquery绑定事件 bind和on的用法与区别分析
本文实例讲述了jquery绑定事件 bind和on的用法与区别.分享给大家供大家参考,具体如下: bind和on都是给元素绑定事件用的,其最大的区别就是事件冒泡 事件冒泡也是委托事件的原型,事件委托就是子类的事情委托给父类的去做 最直观的区别就是on绑定比bind绑定多一个参数'childSelector' 语法 $(selector).on(event,childSelector,data,function) 参数 描述 event 必需.规定要从被选元素移除的一个或多个事件或命名空间. 由空
-
javascript/jquery实现点击触发事件的方法分析
本文实例讲述了javascript/jquery实现点击触发事件的方法.分享给大家供大家参考,具体如下: 点击事件 原声态 和 jquery <%@ page language="java" pageEncoding="utf-8" contentType="text/html;charset=utf-8" import="Tool.Tool" isELIgnored="false" %> &l
-
JQuery中的常用事件、对象属性与使用方法分析
本文实例讲述了JQuery中的常用事件.对象属性与使用方法.分享给大家供大家参考,具体如下: JQuery中的常用事件 .click() 鼠标单击触发事件,参数可选(data,function) .dblclick() 双击触发,同上 .mousedown()/up() 鼠标按下/弹起触发事件 .mousemove() 鼠标移动事件 .mouseover()/out() 鼠标移入/移出触发事件 .mouseenter()/leave() 鼠标进入/离开触发事件* .hover(func1,fun
-
Jquery 动态添加元素并添加点击事件实现过程解析
给动态添加的元素添加js事件,不能直接添加js事件,需要借助on( )方法,给选择器指定的子元素添加事件处理函数,并非选择器本身: 1. 语法 $(selector).on(event,childSelector,data,function) // event _ 需要添加的js事件 //childSelector _ 只能添加到指定的子元素上的事件处理程序 //data _ 调用函数时需要传递的参数 // function _ js函数发生时触发的事件 2. 实例 //html代码 <div
-
jQuery 移除事件的方法
在绑定事件的过程中,不仅可以为同一个元素绑定多个事件,也可以为多个元素绑定同一个事件.假设网页上有一个<button>元素,使用以下代码为该元素绑定多个相同的事件. <script type="text/javascript"> $(function(){ $('#btn').bind("click", function(){ $('#test').append("<p>我的绑定函数1</p>");
-
jQuery实现动态添加标签事件
本文实例为大家分享了jQuery实现动态添加标签事件的具体代码,供大家参考,具体内容如下 代码: <body> <table id="tableID" border="1" align="center" width="60%"> <tr> <th>用户名</th> <th>密码</th> <th>操作</th> <