<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Playground</title>
<link title="green" media="screen" href="css/green.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// hides all DIVs with the CLASS container
// and displays the one with the ID 'home' only
$(".container").css("display","none");
$("#home").css("display","block");
// makes the navigation work after all containers have bee hidden
showViaLink($("ul#nav li a"));
// listens for any navigation keypress activity
$(document).keypress(function(e){
switch(e.which)
{
// user presses the "a"
case 97: showViaKeypress("#home");
break;
// user presses the "s" key
case 115: showViaKeypress("#about");
break;
// user presses the "d" key
case 100: showViaKeypress("#contact");
break;
// user presses the "f" key
case 102: showViaKeypress("#links");
}
});
});
// shows a given element and hides all others
function showViaKeypress(element_id){
$(".container").css("display","none");
// if multiple keys are pressed rapidly this will hide all but the last pressed key's div
$(".container").hide(1);
$(element_id).slideDown("slow");
}
// shows proper DIV depending on link 'href'
function showViaLink(array){
array.each(function(i) {
$(this).click(function(){
var target = $(this).attr("href");
$(".container").css("display","none");
$(target).slideDown("slow");
});
});
}
</script>
</head>
<body>
<div id="wrapper">
<h1>jQuery Playground</h1>
<ul id="nav">
<li><a href="#home">主页(a)</a></li>
<li><a href="#about">介绍(s)</a></li>
<li><a href="#contact">联系(d)</a></li>
<li><a href="#links">链接(f)</a></li>
</ul>
<div id="home" class="container">
<h2>主页</h2>
<input type="text" /><br/>
</div>
<div id="about" class="container">
<h2>介绍</h2>
</div>
<div id="contact" class="container">
<h2>联系</h2>
</div>
<div id="links" class="container">
<h2>链接</h2>
</div>
<div id="foot">Powered By Dennis Ji.</div>
</div>
</body>
</html>
分享到：
相关推荐
《jQuery Web开发案例教程（在线实训版）》案例源码.zip是一个包含丰富的jQuery实践案例的压缩包，旨在帮助学习者深入理解和应用jQuery库在Web开发中的功能和技巧。这个资源对于初学者和有一定经验的开发者来说都是...
标题中的“jQuery实现键盘操作特效（主要是上移下移）”指的是使用JavaScript库jQuery来创建一个功能，使得用户可以通过键盘的上下箭头键来上下移动页面上的元素，比如列表项或者焦点区域。这个功能常见于各种需要...
2. **jQuery函数**：编写jQuery函数来处理键盘的显示、隐藏、按键响应和字符插入等操作。 3. **拼音与汉字映射**：建立拼音到汉字的映射表，用于根据用户的拼音输入选择正确的汉字。 4. **输入处理**：管理输入状态...
JavaScript 和 jQuery 是现代 Web 前端开发中的两个核心工具，它们共同为创建动态、交互式的网页提供了强大的功能。在本教程中，我们将深入探讨如何将这两种技术与 HTML 和 CSS 结合，以实现高效的网页设计。 ...
3. **事件绑定**：jQuery Keypad 提供了一系列的事件回调，如`onOpen`、`onClose`、`onKeyPress`等，使得开发者可以在用户与键盘交互时执行特定的操作。 4. **易于集成**：只需引入jQuery库和keypad的JavaScript及...
在Web开发中，jQueryUI提供了诸如对话框、拖放、排序、日期选择器等多种交互式元素，极大地提升了用户体验。而“jQueryUI键盘插件”是jQueryUI生态系统中的一个特色组件，主要用于模拟和自定义虚拟键盘。 这个键盘...
jQuery虚拟键盘是一种在Web应用中模拟真实物理键盘的插件，它允许用户在不依赖实际物理输入设备的情况下，在网页上输入数据。这个功能特别适用于移动设备、触摸屏应用程序或者需要提高安全性（防止键盘记录）的场景...
总结起来，这个"jQuery键盘按键按钮响应事件代码.zip"实例教你如何利用jQuery监听和响应键盘事件，这对于创建交互式Web应用或动态网页是非常有用的。通过研究和实践，你可以提升你的前端开发技能，并理解如何更好地...
在IT行业中，jQuery是一款非常...通过理解jQuery的基本操作和事件绑定，结合HTML和CSS布局，我们可以构建出各种丰富的Web交互效果。在开发过程中，不断优化和完善插件，使之更加符合用户需求，是提升产品品质的关键。
3. **键盘实现**：这个虚拟键盘可能通过动态创建HTML元素（如`<input>`和`<button>`）来构建键盘界面，同时使用jQuery的事件监听功能，当用户点击按键时触发相应的输入行为。此外，可能还需要处理输入限制、焦点切换...
总结，jQuery Virtual Keyboard插件是一个强大且灵活的工具，为Web应用提供了在浏览器内模拟物理键盘的功能，无论是在桌面还是移动设备上，都能提供良好的用户体验。通过定制布局、事件监听和API调用，开发者可以...
【酷炫键盘Jquery源码】是一个以Jquery为基础实现的互动键盘效果，适用于网页上的输入操作，可以为用户带来独特且吸引人的交互体验。这个项目结合了HTML、CSS和JavaScript（尤其是Jquery库）来创建一个视觉上...
【jQuery数字键盘】是一种网页交互元素，主要用于网页上的数字输入场景，例如在线表格、金融计算器或者密码输入等。它提供了一种便捷的方式，使用户无需离开当前页面就能通过模拟的数字键盘输入数值，提升了用户体验...
总的来说，"jQuery密码键盘后台登录界面模板"通过巧妙地结合jQuery和自定义JavaScript代码，为用户提供了安全、友好的登录体验。其设计理念和实现技术对于Web开发者来说具有很高的学习价值，也为我们提供了优化登录...
第1章 Web开发的发展与趋势 第2章 JavaScript基础 第3章 文档对象模型（DOM） ...第16章 jQuery键盘操作 第17章 jQuery可视化数据显示 本资料共包含以下附件： 《jQuery开发技术详解》光盘 源文件+ppt.rar
《深入解析黑色样式jQuery数字键盘代码》 在网页开发中，有时我们需要为用户输入特定的数字，例如电话号码、身份证号等，此时一个简洁且功能齐全的数字键盘就能大大提高用户体验。"黑色样式jQuery数字键盘代码.zip...
**jQuery DynaTree Web网页树型控件** jQuery DynaTree是一款广泛应用于Web开发中的强大树形控件，尤其适用于构建交互式目录结构或者展示层级关系的数据。它是一款基于JavaScript库jQuery的插件，能够兼容所有主流...
在这个项目中，JavaScript将用于构建软键盘组件，允许用户通过点击屏幕上的按钮输入数字，以模拟硬件小键盘的操作，尤其适用于移动设备或触摸屏设备。 **软键盘设计与实现** 1. **布局设计**：软键盘通常包含数字0-...
本项目主要关注的是一个基于Web的jQuery插件，它能帮助开发者识别用户是通过手动键盘输入还是使用键盘式读卡器设备进行数据输入。 首先，让我们深入了解jQuery插件的开发。jQuery是一个轻量级的JavaScript库，它...
4. **jQuery集成**：作为一款基于jQuery的插件，Softkey利用了jQuery的强大功能和广泛支持，使得绑定事件、操作DOM等操作变得简单易行。只需几行代码，开发者就能轻松启用虚拟键盘，并与页面上的元素进行交互。 5. ...