<!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. myeclipse导出javadoc时特殊字符 尖括号

    源字符<?xml version="1.0" encoding="UTF-8" standalone="yes"?> javad ...

  2. sockaddr结构体

    sockaddr 本词条缺少名片图,补充相关内容使词条更完整,还能快速升级,赶紧来编辑吧! 一,用于存储参与(IP)Windows套接字通信的计算机上的一个internet协议(IP)地址.为了统一地 ...

  3. 一个action读取另一个action里的session

    action 1: private Map session; session.put("projectname_session", request1.getParameter(&q ...

  4. pe and elf

    http://staff.ustc.edu.cn/~sycheng/sst/exp_crack/ELF.pdf https://refspecs.linuxbase.org/elf/TIS1.1.pd ...

  5. 修改非空表字段类型Oracle

    执行以下语句报"要修改数据类型,则要更改的列必须为空"       alter table 表名 modify (目标字段 varchar2(100)); 解决步骤: 第一步,在表 ...

  6. Lua打印Table的数据结构工具类

    --这是quick中的工具,作用就是打印Lua中强大的table的结构, 当table的嵌套层级比较多的时候,这个工具非常方便,开发中必备的工具. --具体使用方法:local debug = req ...

  7. Linux中后台执行任务

    执行时, 可以在命令最后添加 & 使其后台执行, 但是其输出依然会显示, 而且其运行是和当前shell绑定的 如果脚本已经运行,  可以使用Ctrl-Z暂停, 然后使用 bg 让其转入后台, ...

  8. 文本去重-----awk或者uniq

    对于awk '!a[$3]++',需要了解3个知识点 1.awk数组知识,不说了 2.awk的基本命令格式 awk 'pattern{action}'     省略action时,默认action是{ ...

  9. DDR工作原理（转）

    源:DDR工作原理 DDR SDRAM全称为Double Data Rate SDRAM,中文名为“双倍数据流SDRAM”.DDR SDRAM在原有的SDRAM的基础上改进而来.也正因为如此,DDR能 ...

  10. js中，怎么解决cookie里面中文乱码问题

    呵呵,我查了百度和谷歌,都没找到解决方案,但是,最终直接结合两个函数就可以了,哈哈哈,开心ing function getCookie(name) { var prefix = name + &quo ...