<!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. A Game

    A Game 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 Little Hi and Little Ho are playing a game. There is a ...

  2. 简单 实现CombineFileInputFormat

    import java.io.DataOutput; import java.io.IOException;   import org.apache.hadoop.conf.Configuration ...

  3. 第一个元素<flout>写了,想在他的旁边加一个元素.IE6会出现缝隙. 不要用margin撑开,要用flout

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. POJ 3254 Corn Fields（状态压缩）

    一道状态压缩的题,错了好多次....应该先把满足的情况预处理出来 #include<iostream> #include<cstdio> #include<cstring ...

  5. android studio 学习进阶

    1,下载地址 :http://pan.baidu.com/s/1eQxO1MU#path=%252FAndroid-Studio

  6. fragment 数据传递，通信

    Fragment之间的通信   在本节中,你会学到 1.定义接口 2.实现接口 3.将消息传递给fragment 为了重用Fragment UI 组件,在设计中你应该通过定义每一个fragemnt自己 ...

  7. decimal 和 numeric (Transact-SQL)

    decimal(18,0)18是定点精度,0是小数位数.decimal(a,b)a指定指定小数点左边和右边可以存储的十进制数字的最大个数,最大精度38.b指定小数点右边可以存储的十进制数字的最大个数. ...

  8. hibetnateTemplate常用方法

    一.hibetnateTemplate常用方法 1.delete(Object entity) 删除指定的持久化实例在程序中一般先用    Assert.notNull和 Assert.isTrue断 ...

  9. SQL Server 事务及回滚事务的几种方法

    第一种: declare   @iErrorCount   int set@iErrorCount=0 begintran Tran1    insertinto t1(Id, c1) values( ...

  10. Pythagorean Triples

    Pythagorean Triples time limit per test 1 second memory limit per test 256 megabytes input standard ...