<!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. 使用Metasploit入侵windows之自动扫描

    最新版本的metasploit为4.0,可以通过官方网站(www.metasploit.com)直接下载,因为是开源的,所以免费. metasploit很好很强大,集成了700多种exploit,但是 ...

  2. 集合-字典（Lookup/SortedDictionary）

    Lookup<TKey, TElement>非常类似于Dictionary<TKey, TValue>,但是把键映射在一个值集上. 必须调用ToLookup方法创建Lookup ...

  3. Java时间操作（一）：关于UTC格式时间处理

    Java中获取形如:20160811T122132+08 格式,可以通过如下方法 package com.mc.others; public class UTCTimeTest { @Test pub ...

  4. 关于struts2的web.xml配置

    <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC "- ...

  5. android缓存之Lrucache 和LinkedHashMap

    两者的区别 网上有很多人使用软引用加载图片的多 ,但是现在已经不再推荐使用这种方式了,(1)因为从 Android 2.3 (API Level 9)开始,垃圾回收器会更倾向于回收持有软引用或弱引用的 ...

  6. Kafka 在行动：7步实现从RDBMS到Hadoop的实时流传输

    原文:https://coyee.com/article/11095-kafka-in-action-7-steps-to-real-time-streaming-from-rdbms-to-hado ...

  7. Java虚拟机中的内存分配

    java虚拟机在执行Java程序的过程中会把它所管理的内存划分为若干个不同的数据区域.这些区域都有各自的用途以及创建和销毁的时间. 栈:存放的是局部变量,包括:1.用来保存基本数据类型的值:2.保存类 ...

  8. js 各种常用js验证

    判断http或者https var http = 'https:' == document.location.protocol ? false : true; js的类型检测方式 /**** js的类 ...

  9. js之动态加载等待图像地址汇总

    Ajax火啊,火到了居然Loading Icons都有很多人专门提供的地步.下面是我同事给我介绍的一些提供Ajax Activity Indicators的网站,共享给大家,以便让我们的Ajax应用具 ...

  10. set multiset 集合实现众数的统计

    众数问题 时间限制:3000 ms  |  内存限制:65535 KB 难度:3   描述 所谓众数,就是对于给定的含有N个元素的多重集合,每个元素在S中出现次数最多的成为该元素的重数, 多重集合S重 ...