jQuery小案例之通过鼠标按键改变盒子颜色

先来看一下效果：

代码部分：
html:

<body><div id="box"></div>
</body>

css

<style>#box {width: 300px;height: 200px;margin: 100px auto;background: red;}</style>

jQuery

<script src="js/jquery-1.12.2.min.js"></script><script>$(function(){$(document).keydown(function(e){console.log(e.keyCode);switch(e.keyCode){case 65:$("#box").css("backgroundColor","orange");break;case 66:$("#box").css("backgroundColor","yellow");break;case 67:$("#box").css("backgroundColor","green");break;default:$("#box").css("backgroundColor","red");break;}})});</script>

全部代码->便于复制粘贴

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>#box {width: 300px;height: 200px;margin: 100px auto;background: red;}</style><script src="js/jquery-1.12.2.min.js"></script><script>$(function(){$(document).keydown(function(e){console.log(e.keyCode);switch(e.keyCode){case 65:$("#box").css("backgroundColor","orange");break;case 66:$("#box").css("backgroundColor","yellow");break;case 67:$("#box").css("backgroundColor","green");break;default:$("#box").css("backgroundColor","red");break;}})});</script>
</head>
<body><div id="box"></div>
</body>
</html>

总结
1.本案例涉及到事件的对象e。
2.获取键盘码e.keyCode。
3.本人也刚刚入门若上述代码及表述有误，望看到的大佬及时指出并纠正，定虚心求教。

jQuery小案例之通过鼠标按键改变盒子颜色相关推荐

jQuery——小案例：点击图片放大缩小
需求: HTML中有三张图片: 如果图片处于"大"状态,则点击图片可以缩小. 如果图片处于"小"状态,则点击图片可以放大. 代码: <!DOCTYPE h ...
jQuery小案例之鼠标滑过显示对应的精品推荐
先来看一下效果: 代码部分: html: 分为左中右三部分,三部分均由列表实现. <div id="container"><div id="left&q ...
做一个简单的根据按键不同改变盒子颜色
文章目录前言一.效果展示二.步骤 1.搭建html+css 2.书写jQuery 前言不知不觉过了这么久了,突然学完了js,进入jQuery的学习,后面也要继续努力啊! 一.效果展示二.步骤 ...
DW改变盒子颜色边框等引用说明
注意看"青色"箭头按步骤走 1. 点击 DW 软件,进入界面点击左上角"文件" 2.点击"新建" 3.点击"HTML"然 ...
盘点三个JavaScript案例——实现限时秒杀、定时跳转、改变盒子大小
前言今天来给大家盘点三个JavaScript案例,分别是实现限时秒杀.定时跳转.改变盒子大小案例,一起来看看吧! 一.实现限时秒杀案例 1.在淘宝网中,商家为了促销经常搞一些活动,例如限时秒杀是常见 ...
jQuery[详解]+小案例
jQuery的总结 1.初始jQuery 2.jQuery的选择器 3.jQuery的事件和动画 4.使用jQuery操作Dom 小案例 ...
运用JQuery代码写的计算器小案例
JQuery核心函数: (1). jQuery([selector,[context]]) 用法:这个函数最基本的用法就是向它传递一个表达式(通常由 CSS 选择器查找所有匹配的元素). 这个函数接收 ...
JQuery的几个简单小案例（基础）
JQuery的几个简单小案例实现表格的的隔行换色实现复选框的全选与全不选 QQ表情的选择多选下拉列表的左右移动实现表格的的隔行换色需求:事先制作一个如图所示的table表格,将数据行的奇数行 ...
jQuery插件实现图片墙小案例
你想写出绚丽多彩的图片墙吗?想的话就来一起看一下接下来的内容吧接下来就让我们使用两个简单的插件来实现图片墙小案例吧.编写之前需要提前下载lazyload懒加载插件和masonry瀑布流式布局插件.( ...

jQuery小案例之通过鼠标按键改变盒子颜色

jQuery小案例之通过鼠标按键改变盒子颜色相关推荐

最新文章

热门文章