一、首先需要知道的是：

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

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

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

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

//键码获取
$(document).keydown(function (event) {
    alert(event.keyCode);
});

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

三、实例：

比如：小说网站中常见的按左右键来实现上一篇文章和下一篇文章；
按 ctrl+enter 实现表单提交（以此提高用户体验）；
如果我们要实现 ctrl+enter 提交表单，可以这样：

//键盘操作
$(document).keydown(function (event) {
    if (event.ctrlKey && event.keyCode == 13) {
        alert('Ctrl+Enter');
    };
    switch (event.keyCode) {
    case 37:
        alert('方向键-左');
        break;
    case 39:
        alert('方向键-右');
        break;
    };
    return false;
});

//屏蔽鼠标右键
$(document).bind('contextmenu', function (event) {
    return false;
});
$(document).keydown(function (event) {
    //屏蔽F5刷新、Ctrl+R刷新
    if ((event.keyCode == 116) || (event.ctrlKey && event.keyCode == 82)) {
        event.keyCode = 0;
        return false;
    }
    //屏蔽shift+F10菜单
    if (event.shiftKey && event.keyCode == 121) return false;
});

jQuery Code：

$("form").bind("submit", function () {
    var reg = /^1[3458]\d{9}$/;
    var mobile = $('#mobile').val();
    if (!(reg.test(mobile))) {
        alert("error");
        return false;
    }
});

和大家分享一下我写的一个滚动页面且固定 div 元素的例子，现在很多网站都用到了这样的效果。

CSS Code：

.fixed, #scrollarea {
	background-color: #F0F0F0;
	height: 210px;
	margin-bottom: 10px;
	width: 280px;
}
#scrollarea {
	height: 630px;
}
.move {
	background-color: #F00;
	color: #FFF;
	height: 210px;
	position: absolute;
	width: 280px;
}
.scroll {
	background-color: #00F;
	position: fixed;
	top: 0;
}

HTML Code：

<div class="fixed"> 1 </div>
<div class="fixed"> 2 </div>
<div id="scrollarea">
  <div class="move" id="scroll">我现在是红色，现在还没固定。</div>
</div>
<div class="fixed"> 3 </div>
<div class="fixed"> 4 </div>
<div class="fixed"> 5 </div>

jQuery Code：

$(function ($) {
    var loaded = true;
    var scroll_height = $("#scrollarea").height() - $("#scroll").height();
    var start_top = $("#scroll").offset().top;
    var stop_top = $("#scrollarea").offset().top + scroll_height;
    scrollfixed();

    function scrollfixed() {
        var scrolltop = $(window).scrollTop();
        var start_cha = start_top - scrolltop;
        var stop_cha = stop_top - scrolltop;
        if (loaded && start_cha <= 0 && start_cha >= -scroll_height) {
            $("#scroll").removeAttr("style");
            $("#scroll").addClass("scroll");
            $("#scroll").html("我现在是蓝色，现在已经固定。");
            loaded = false;
        }
        if (!loaded && stop_cha <= 0) {
            $("#scroll").removeClass("scroll");
            $("#scroll").css('top', stop_top);
            loaded = true;
        }
        if (!loaded && start_cha > 0) {
            $("#scroll").removeClass("scroll");
            $("#scroll").html("我现在是红色，现在还没固定。");
            loaded = true;
        }
    }
    $(window).scroll(scrollfixed);
});

查看 Demo

在前端交互设计中，当需要获取用户浏览器窗口的可视区域时，常碰到浏览器兼容问题，幸好 jquery 解决了这个问题。

jQuery Code：

//浏览器时下窗口可视区域的高度
alert($(window).height()); 

//浏览器时下窗口文档的高度
alert($(document).height()); 

//浏览器时下窗口文档 body 的高度
alert($(document.body).height()); 

//浏览器时下窗口文档 body 的总高度,包括边框和内外边距高度
alert($(document.body).outerHeight(true)); 

//浏览器时下窗口可视区域的宽度
alert($(window).width()); 

//浏览器时下窗口文档的宽度
alert($(document).width()); 

//浏览器时下窗口文档 body 的宽度
alert($(document.body).width()); 

//浏览器时下窗口文档 body 的总宽度,包括边框和内外边距宽度
alert($(document.body).outerWidth(true)); 

//获取滚动条到顶部的垂直高度
alert($(document).scrollTop()); 

//获取滚动条到左边的垂直宽度
alert($(document).scrollLeft());