脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jquery中键盘事件小结

jquery中键盘事件小结

 更新时间：2016年02月24日 08:53:34   投稿：hebedich  
本文给大家简单总结了下jQuery中键盘事件的使用方法以及相关示例，非常的实用，有需要的小伙伴可以参考下。

一、首先需要知道的是：

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'});}

您可能感兴趣的文章:

相关文章

  • jQuery实现带动画效果的多级下拉菜单代码

    jQuery实现带动画效果的多级下拉菜单代码

    这篇文章主要介绍了jQuery实现带动画效果的多级下拉菜单代码,可实现点击渐隐渐显效果,涉及jQuery页面元素的遍历及链式操作相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09
  • jQuery 遍历函数详解

    jQuery 遍历函数详解

    文章介绍了几个在jQuery中非常有用的遍历函数，遍历函数是做么的方便。当在它们一起使用时，它们将更加强大。也就是说，一个函数的输出是另一个函数的输入，它们是链式的。下面我们就来详细探讨下吧。
    2015-07-07
  • 详解Jquery Easyui的验证扩展

    详解Jquery Easyui的验证扩展

    本文主要介绍了Jquery Easyui验证扩展，Easyui验证，Easyui校验，js正则表达式。具有一定的参考价值，下面跟着小编一起来看下吧
    2017-01-01
  • jquery实现掷骰子小游戏

    jquery实现掷骰子小游戏

    这篇文章主要为大家详细介绍了jquery实现掷骰子小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-10-10
  • 制作jquery遮罩层效果导航菜单代码分享

    制作jquery遮罩层效果导航菜单代码分享

    我们将创建一个简单的jquery菜单，只要我们悬停在导航栏的区域里，将展示给我们的画面是：明亮的菜单在稍显黑暗的背景图中脱颖而出
    2013-12-12
  • jQuery的$.extend 浅拷贝与深拷贝

    jQuery的$.extend 浅拷贝与深拷贝

    这篇文章主要介绍了jQuery的$.extend 浅拷贝与深拷贝的相关资料,需要的朋友可以参考下
    2017-03-03
  • jQuery实现鼠标滑过图片移动特效

    jQuery实现鼠标滑过图片移动特效

    这篇文章主要介绍了jQuery实现鼠标滑过图片移动特效，鼠标移动到图片上时图片向上动一下，等到鼠标离开后，图片又返回到原来位置,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-12-12
  • jquery中的事件处理详细介绍

    jquery中的事件处理详细介绍

    本文为大家详细介绍喜爱页面载入完毕响应事件、绑定与反绑定事件监听器、事件触发器、事件的交互处理等等，感兴趣的朋友可以参考下哈，希望对大家有所帮助
    2013-06-06
  • 基于jquery实现五子棋游戏

    基于jquery实现五子棋游戏

    这篇文章主要为大家详细介绍了基于jquery实现五子棋游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-05-05
  • jQuery Form插件使用详解_动力节点Java学院整理

    jQuery Form插件使用详解_动力节点Java学院整理

    这篇文章主要为大家详细介绍了jQuery Form插件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-07-07

最新评论