jquery中鍵盤事件小結(jié)

更新時(shí)間：2016年02月24日 08:53:34 投稿：hebedich

本文給大家簡單總結(jié)了下jQuery中鍵盤事件的使用方法以及相關(guān)示例，非常的實(shí)用，有需要的小伙伴可以參考下。

一、首先需要知道的是：

1、keydown()
keydown事件會(huì)在鍵盤按下時(shí)觸發(fā).

2、keyup()
keyup事件會(huì)在按鍵釋放時(shí)觸發(fā),也就是你按下鍵盤起來后的事件

3、keypress()
keypress事件會(huì)在敲擊按鍵時(shí)觸發(fā),我們可以理解為按下并抬起同一個(gè)按鍵

二、獲得鍵盤上對應(yīng)的ascII碼：

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

$tips: 上面例子中,event.keyCode就可以幫助我們獲取到我們按下了鍵盤上的什么按鍵,他返回的是ascII碼,比如說上下左右鍵,分別是38,40,37,39；

三、實(shí)例（當(dāng)按下鍵盤上的左右方面鍵時(shí)）

代碼如下:

$(document).keydown(function(event){ 
//判斷當(dāng)event.keyCode 為37時(shí)（即左方面鍵），執(zhí)行函數(shù)to_left(); 
//判斷當(dāng)event.keyCode 為39時(shí)（即右方面鍵），執(zhí)行函數(shù)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'});}

您可能感興趣的文章:

相關(guān)文章

jQuery實(shí)現(xiàn)帶動(dòng)畫效果的多級下拉菜單代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)帶動(dòng)畫效果的多級下拉菜單代碼,可實(shí)現(xiàn)點(diǎn)擊漸隱漸顯效果,涉及jQuery頁面元素的遍歷及鏈?zhǔn)讲僮飨嚓P(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-09-09
jQuery 遍歷函數(shù)詳解
文章介紹了幾個(gè)在jQuery中非常有用的遍歷函數(shù)，遍歷函數(shù)是做么的方便。當(dāng)在它們一起使用時(shí)，它們將更加強(qiáng)大。也就是說，一個(gè)函數(shù)的輸出是另一個(gè)函數(shù)的輸入，它們是鏈?zhǔn)降?。下面我們就來詳?xì)探討下吧。
2015-07-07
詳解Jquery Easyui的驗(yàn)證擴(kuò)展
本文主要介紹了Jquery Easyui驗(yàn)證擴(kuò)展，Easyui驗(yàn)證，Easyui校驗(yàn)，js正則表達(dá)式。具有一定的參考價(jià)值，下面跟著小編一起來看下吧
2017-01-01
jquery實(shí)現(xiàn)擲骰子小游戲
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)擲骰子小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-10-10
制作jquery遮罩層效果導(dǎo)航菜單代碼分享
我們將創(chuàng)建一個(gè)簡單的jquery菜單，只要我們懸停在導(dǎo)航欄的區(qū)域里，將展示給我們的畫面是：明亮的菜單在稍顯黑暗的背景圖中脫穎而出
2013-12-12
jQuery的$.extend 淺拷貝與深拷貝
這篇文章主要介紹了jQuery的$.extend 淺拷貝與深拷貝的相關(guān)資料,需要的朋友可以參考下
2017-03-03
jQuery實(shí)現(xiàn)鼠標(biāo)滑過圖片移動(dòng)特效
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)滑過圖片移動(dòng)特效，鼠標(biāo)移動(dòng)到圖片上時(shí)圖片向上動(dòng)一下，等到鼠標(biāo)離開后，圖片又返回到原來位置,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-12-12
jquery中的事件處理詳細(xì)介紹
本文為大家詳細(xì)介紹喜愛頁面載入完畢響應(yīng)事件、綁定與反綁定事件監(jiān)聽器、事件觸發(fā)器、事件的交互處理等等，感興趣的朋友可以參考下哈，希望對大家有所幫助
2013-06-06
基于jquery實(shí)現(xiàn)五子棋游戲
這篇文章主要為大家詳細(xì)介紹了基于jquery實(shí)現(xiàn)五子棋游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-05-05
jQuery Form插件使用詳解_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要為大家詳細(xì)介紹了jQuery Form插件的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-07-07