老师，我这里哪里错了
来源：1-19 自由编程
散落满天的回忆
2019-11-20 19:30:41
<!DOCTYPE html >
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery练习</title>
<style type="text/css">
.div1{
float: left;
width: 50px;
line-height: 30px;
background-color: lightgray;
margin-left: 10px;
text-align: center;
vertical-align: middle;
}
.div2{
width: 300px;
height: 300px;
border: solid gray 1px;
margin-top: 60px;
color: red;
}
</style>
</head>
<body>
<h2>请选择背景颜色</h2>
<div>
<div id="blue" class="div1">蓝色</div>
<div id="green" class="div1">绿色</div>
</div>
<div class="div2" id="bg">
</div>
<div>输入颜色首字母： <input type="text" name="color"></div>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
$("body").load(function(){
console.log("欢迎来到设置颜色的界面");
});
$("#blue").click(function(){
$(".div2").css("backgroude-color","blue");
$(".div2").text("<h1 style='color:red'>蓝色背景</h1>");
});
$("#green").click(function(){
$(".div2").css("backgroude-color","green");
$(".div2").html("<h1 style='color:red'>绿色背景</h1>");
});
$("input[name='color']").Keypress(function(){
if(eveebt.keyCode==66){
$(".div2").css("backgroude-color","blue");
$(".div2").text("<h1 style='color:red'>蓝色背景</h1>");
}else if(eveebt.keyCode==71){
$(".div2").css("backgroude-color","green");
$(".div2").html("<h1 style='color:red'>绿色背景</h1>");
}
});
</script>
</body>
</html>
1回答
-
芝芝兰兰
2019-11-21
同学你好。有以下几点问题：
1、text()添加的是元素中间的文本，即便是遇到符合html格式的内容，也不会按照html解析。需要使用html()
2、是“background”并不是“backgroude”，拼写错误导致了背景颜色没有更改
3、keypress需要小写:
4、eveebt是没有定义的，需要用function的参数接收一下才能获取当前元素，并且将它用eveebt代表。
5、在使用输入框改变样式时，需要清空div中的内容。
综合上一条，代码应改为：
6、load事件适用于任何带有 URL 的元素（比如图像、脚本、框架、内联框架）。
根据不同的浏览器（Firefox 和 IE），如果图像已被缓存，则也许不会触发 load 事件。
所以同学对这个事件使用方式有误，这里是用不到load的，body标签本身并没有需要加载的内容，不会触发load事件。这个事件一般是用在图片上的。
如果解答了同学的疑问，望采纳~
祝学习愉快~
0
相似问题