jQuery使用键盘事件
keyup：键盘抬起时
keydown：键盘按下时
keypress：键盘按住时
运行下列代码，可以看效果
$(document).keyup(function () {
console.log("keyup");
}).keydown(function (e) {
console.log(" keydown");
}).keypress(function () {
console.log(" keypress");
});
当我们按下键盘时会传一个参数，参数可以调用keycode值
键码对照表
如何判断我们按下键是哪个keycode值
$(document).keydown(function (event) {
// alert(event.keyCode) //可以弹出我们按键的keycode值
if (event.keyCode == "13") {//按回车键
alert("ok")
}
});
一直按住回车键，控制台输出的内容会一直+1
var i=1;
$(document).keypress(function (event) {
if (event.keyCode == "13") {//按回车键
i=i+1;
console.log(i)
}
});
完成jQuery键盘事件小项目，当按下左右方向键切换背景颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
div{
width: 200px;
height: 200px;
border-radius: 50%;
margin-left: 20px;
float: left;
border: 1px red solid;
}
#a{
background-color: red;
}
</style>
</head>
<body>
<div id="a">
</div>
<div>
</div>
<script type="text/javascript"> $(function(){
$(document).keydown(function (event) {
if (event.keyCode == "37") {
// jQuery链式操作，让#a div变红，下一个元素变白
$("#a").css("background-color","red").next().css({"background-color":"#fff"});
}
if (event.keyCode == "39") {
$("#a").css({"background-color":"#fff"}).next().css({"background-color":"red"});
} });
})
</script>
</body>
</html>
完成jQuery键盘事件小项目，按一直按住空格键，进度条变化。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
#a{
height: 10px;
border: 1px red solid;
width: 1000px;
}
#b{
width: 10px;
height: 10px;
background-color: green;
}
</style>
</head>
<body>
<div id="a">
<div id="b"> </div>
</div>
<script type="text/javascript">
var i=10;
$(document).keypress(function (event) {
if (event.keyCode == "32") {
i+=5;
if (i<300) {
$("#b").css({"width": i+"px","background-color":"green"})
} else if(i<600){
$("#b").css({"width": i+"px","background-color":"blue"})
}else if(i<900){
$("#b").css({"width": i+"px","background-color":"yellow"})
}else if(i<=1000){
$("#b").css({"width": i+"px","background-color":"red"})
}else{
return false;
} }
}); </script>
</body>
</html>
