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

Ron韦斯莱

于 2019-04-04 20:36:26 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/qq_43537987/article/details/89035090

这篇博客展示了使用jQuery如何根据鼠标按键改变盒子颜色。文章包含HTML、CSS和jQuery代码示例，并提及了事件对象e和获取键盘码e.keyCode的重要性。适合jQuery初学者参考学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先来看一下效果：
在这里插入图片描述
代码部分：
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");

最低0.47元/天解锁文章