jquery中键盘事件小结


Posted in Javascript onFebruary 24, 2016

一、首先需要知道的是:

1、keydown()
keydown事件会在键盘按下时触发.

2、keyup()
keyup事件会在按键释放时触发,也就是你按下键盘起来后的事件

3、keypress()
keypress事件会在敲击按键时触发,我们可以理解为按下并抬起同一个按键

二、获得键盘上对应的ascII码:

$(document).keydown(function(event){ 
alert(event.keyCode); 
});

$tips: 上面例子中,event.keyCode就可以帮助我们获取到我们按下了键盘上的什么按键,他返回的是ascII码,比如说上下左右键,分别是38,40,37,39;

三、实例(当按下键盘上的左右方面键时)

代码如下:

$(document).keydown(function(event){ 
//判断当event.keyCode 为37时(即左方面键),执行函数to_left(); 
//判断当event.keyCode 为39时(即右方面键),执行函数to_right(); 
 if(event.keyCode == 37){ 
    to_left(); 
    }else if (event.keyCode == 39){
    to_right(); 
    } 
    else if (event.keyCode == 38){ 
    to_top(); 
    } 
    else if (event.keyCode == 40){ 
    to_bottom();
    } 
}); 

function to_left(){ $(".abc").css({'left':'-=10'});}

function to_right(){ $(".abc").css({'left':'+=10'});}

function to_top(){$(".abc").css({'top':'-=10'});}

function to_bottom(){$(".abc").css({'top':'+=10'});}
Javascript 相关文章推荐
在Javascript中定义对象类别
Dec 22 Javascript
3分钟写出来的Jquery版checkbox全选反选功能
Oct 23 Javascript
jQuery异步获取json数据方法汇总
Dec 22 Javascript
常用的JS验证和函数汇总
Dec 23 Javascript
JavaScript中判断变量是数组、函数或是对象类型的方法
Feb 25 Javascript
jQuery实现监控页面所有ajax请求的方法
Dec 10 Javascript
js跨浏览器的事件侦听器和事件对象的使用方法
Dec 17 Javascript
BootStrap 智能表单实战系列(五) 表单依赖插件处理
Jun 13 Javascript
jQuery validata插件实现方法
Jun 25 jQuery
ES6 javascript中class类的get与set用法实例分析
Oct 30 Javascript
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 jQuery
layer提示框添加多个按钮选择的实例
Sep 12 Javascript
javascript实现九宫格相加数值相等
May 28 #Javascript
Javascript类型转换的规则实例解析
Feb 23 #Javascript
理解Javascript图片预加载
Feb 23 #Javascript
Bootstarp风格的toggle效果分享
Feb 23 #Javascript
javascript瀑布流式图片懒加载实例解析与优化
Feb 23 #Javascript
javascript瀑布流式图片懒加载实例
Jun 28 #Javascript
Bootstrap创建可折叠的组件
Feb 23 #Javascript
You might like
星际流派综述
2020/03/04 星际争霸
实现了一个PHP5的getter/setter基类的代码
2007/02/25 PHP
Laravel Validator自定义错误返回提示消息并在前端展示
2019/05/09 PHP
PHP PDO和消息队列的个人理解与应用实例分析
2019/11/25 PHP
php框架CI(codeigniter)自动加载与自主创建对象操作实例分析
2020/06/06 PHP
js判断变量是否空值的代码
2008/10/26 Javascript
读jQuery之二(两种扩展)
2011/06/11 Javascript
JAVASCRIPT模式窗口中下载文件无法接收iframe的流
2013/10/11 Javascript
js实现文本框中焦点在最后位置
2014/03/04 Javascript
Javascript 是你的高阶函数(高级应用)
2015/06/15 Javascript
javascript高级编程之函数表达式 递归和闭包函数
2015/11/29 Javascript
利用Node.js制作爬取大众点评的爬虫
2016/09/22 Javascript
js脚本编写简单刷票投票系统
2017/06/27 Javascript
js实现手机web图片左右滑动效果
2017/12/29 Javascript
基于js判断浏览器是否支持webGL
2020/04/18 Javascript
vue实现匀速轮播效果
2020/06/29 Javascript
Vue 使用typescript如何优雅的调用swagger API
2020/09/01 Javascript
Python GAE、Django导出Excel的方法
2008/11/24 Python
Python简单遍历字典及删除元素的方法
2016/09/18 Python
Python中常见的异常总结
2018/02/20 Python
怎么使用pipenv管理你的python项目
2018/03/12 Python
python pandas cumsum求累计次数的用法
2019/07/29 Python
python Pandas如何对数据集随机抽样
2019/07/29 Python
django rest framework 实现用户登录认证详解
2019/07/29 Python
python实现逻辑回归的示例
2020/10/09 Python
25个CSS3动画按钮和菜单教程分享
2012/10/03 HTML / CSS
LTD Commodities:礼品,独特发现,家居装饰,家用器皿
2017/08/11 全球购物
Wiggle美国:英国骑行、跑步、游泳、铁人三项商店
2018/10/27 全球购物
统计每一学生的平均成绩
2014/06/06 面试题
办公室主任先进事迹
2014/01/18 职场文书
践行党的群众路线心得体会
2014/11/05 职场文书
2015年保洁员工作总结
2015/05/04 职场文书
法人代表资格证明书
2015/06/18 职场文书
《堡垒之夜》联动《刺客信条》 4月7日正式上线
2022/04/06 其他游戏
Python作用域和名称空间的详细介绍
2022/04/13 Python
Elasticsearch 聚合查询和排序
2022/04/19 Python