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è)按鍵
二、獲得鍵盤上對(duì)應(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)畫效果的多級(jí)下拉菜單代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)帶動(dòng)畫效果的多級(jí)下拉菜單代碼,可實(shí)現(xiàn)點(diǎn)擊漸隱漸顯效果,涉及jQuery頁面元素的遍歷及鏈?zhǔn)讲僮飨嚓P(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
文章介紹了幾個(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
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)擲骰子小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
我們將創(chuàng)建一個(gè)簡單的jquery菜單，只要我們懸停在導(dǎo)航欄的區(qū)域里，將展示給我們的畫面是：明亮的菜單在稍顯黑暗的背景圖中脫穎而出2013-12-12
這篇文章主要介紹了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
本文為大家詳細(xì)介紹喜愛頁面載入完畢響應(yīng)事件、綁定與反綁定事件監(jiān)聽器、事件觸發(fā)器、事件的交互處理等等，感興趣的朋友可以參考下哈，希望對(duì)大家有所幫助2013-06-06
這篇文章主要為大家詳細(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