<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery演示框架页</title>
    <!-- <link rel="stylesheet" href="../css/green.css" media="screen" /> -->
    <link rel="stylesheet" href="../css/blue.css" media="screen" />
    <script src="../jquery-1.10.2.min.js"></script>
    <script src="../jquery.hotkeys.js"></script>
</head>
<body>
    <div id="wrapper">
        <h1>jQuery Playground</h1>
        <ul id="nav">
            <li><a href="#" class="current" name="welcome">测试(c)</a></li>
            <li><a href="#" name="about">关于(a)</a></li>
        </ul>
        <div id="content">
        <div id="welcome">
            <h2>WelCome!</h2>
            <p>Hello，everyone.I will share some useful tips of jQuery here.</p>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
        </div>
        <div id="about" style="display:none;">
            <h2>About us!</h2>
            <p>Hello，everyone.I will share some useful tips of jQuery here.</p>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
        </div>    
            
        </div>
        <div id="footer">Powered By Dennis Ji.</div>
    </div>
</body>
<script>
    $(function(){
        $("#nav li a").each(function(){
            $(this).click(function(){
                var content = "#"+$(this).attr("name");
                $("#content>div").css("display","none");
                $(content).css("display","block");
            });
        });
        // jQuery.hotkeys.add('c',function(){报错78行
        //     alert('c');
        // });
        $(document).keypress(function(e){
            
            if (e.which == 97) {
                // alert("a");
                $("#content>div").css("display","none");
                $("#about").css("display","block");
            };
            return false;
        });
        $(document).keypress(function(e){
            
            if (e.which == 99) {
                // alert("c");
                $("#content>div").css("display","none");
                $("#welcome").css("display","block");
            };
            return false;
        });
        // $(document).bind("keyup",'a',function(){
        //     // $("#content>div").css("display","none");
        //     // $("#about").css("display","block");
        //     alert("a");
        //     return false;
        // });
    });
</script>
</html>

jQuery按键事件响应的Demo的更多相关文章

  1. 【Demo 0010】事件响应链

    本章学习要点:       1.  熟悉iOS事件分发过程以及事件响应链;       2.  掌握基本事件响应方法(单击,双击):       3.  掌握基本手势处理方法:

  2. 浅谈JavaScript的事件响应

    原文出处: Christian Heilmann   译文出处:Chajn Science 每当猴子们问我JavaScript和DOM里啥东西最牛逼时,我都会一巴掌打回去:卧槽还用问么当然是事件响应了 ...

  3. 第4章 jQuery的事件和动画(1)——事件篇

    jQuery扩展了JavaScript的基本事件处理机制,极大增强了事件处理能力 一. jQuery的事件 1. $(document).ready(function(){})加载方式 再次回到win ...

  4. JS代码的位置与事件响应代码块的封装问题

    JS代码的位置       我们可以将JavaScript代码放在html文件中任何位置,但是我们一般放在网页的head或者body部分.   放在<head>部分最常用的方式是在页面中h ...

  5. [转]使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 事件详解

    在前文<使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 默认配置与事件基础>中,Kayo 对 jQuery Mobile 事件的基 ...

  6. Android按键事件传递流程(二)

    5    应用层如何从Framework层接收按键事件 由3.2和4.5.4节可知,当InputDispatcher通过服务端管道向socket文件描述符发送消息后,epoll机制监听到了I/O事件, ...

  7. jQuery 自定义事件的学习笔记

    jquery中提供了两种方法可以绑定自定义事件: bind()和one()而绑定的自定义事件的触发,必须得用jquery中的trigger()方法才能触发. 我们先来看on事件  代码如下 复制代码 ...

  8. jQuery之事件even

    jQuery之事件       W3C:http://www.w3school.com.cn/jquery/jquery_ref_events.asp 一.事件列表 1.blur() 当失去焦点时触发 ...

  9. java事件响应方法汇总（容器类监听、监听器类、AbstractAction、反射）

    Java图形用户界面中,处理事件时所必须的步骤是: 1.创建接受响应的组件(控件)2.实现相关事件监听接口3.注册事件源的动作监听器4.事件触发时的事件处理 相应的可以通过以下的集中方式来作出事件响应 ...

随机推荐

  1. 盖房子(house)

    盖房子(house) 题目描述 FJ最近得到了面积为n*m的一大块土地,他想在这块土地上建造一所房子,这个房子必须膏形的.但是,这块土地并非十全十美,上面有很多不平坦的地方(也可以叫瑕疵).这些瑕疵十 ...

  2. div使用

    div style常用属性 一.常用属性: 1.Height:设置DIV的高度. 2.Width:设置DIV的宽度. 例: <div style="width:200px;height ...

  3. Byte数组和Int的互相转换

    public static int bytesToInt(byte[] bytes) { int addr = bytes[0] & 0xFF; addr |= ((bytes[1] < ...

  4. 设计模式--状态模式（分布式中间件熔断器Java实现）

    最近在做分布式服务熔断,因为要实现一个熔断器状态机,所以想到状态模式.状态模式是当一个对象的内在状态改变时允许改变其行为,这个对象看起来像是改变了其类.状态模式主要解决的是当控制一个对象状态的条件表达 ...

  5. 利用dokan作虚拟磁盘开发

    dokan是用户态的文件系统驱动,可以称之为fuse for windows.可以用来开发虚拟磁盘,即在“我的电脑”中虚拟出一个硬盘来,可以是硬盘,也可以是可移动磁盘或者网络硬盘. CreateFil ...

  6. CvvImage类

    从OpenCV 2.2.0开始,OpenCV取消了CvvImage这个类.可是今天要用到,可以自己加入到工程中. 首先,找到CvvImage的原代码.我在网上已经找到了,具体代码如下. 这是CvvIm ...

  7. Delphi的指针(转)

    源:http://blog.csdn.net/henreash/article/details/7368088 Pointers are like jumps, leading wildly from ...

  8. openssl使用+Demo

    1. websiteSSL(secure Socket Layer)TLS(transport Layer Security) - SSL3.0基础之上提出的安全通信标准,目前版本是1.0openss ...

  9. Unity加载本地图片的2种方式

    1. 使用 WWW 加载,详细查看 unity3d 官方文档. 2. 使用 System.IO 加载,lua 代码如下: local File = luanet.import_type("S ...

  10. mysql安装使用----1 安装和启动

    1 安装 Fedora16/17 Mysql 安装及配置 1.安装 Mysql Server # yum install mysql mysql-server 2.开启 MySQL server 及开 ...