1-19作业
<!DOCTYPE html >
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>1-19jQuery练习</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.6.0.js"></script>
<script>
//1当加载页面时，弹出提示框：欢迎来到设置颜色的页面
$(function(){ //$(function(){} )是jQuery文档就绪函数，表示当页面加载完成后执行函数
alert("欢迎来到设置颜色的页面");
});
/* 当点击名为蓝色的div，下面的div背景色变为蓝色，并设置文字内容为”蓝色背景“，如图2所示；
当点击名为绿色的div时，下面的div背景色变为绿色，并将文字设置成“绿色背景”，并设置字体为加粗斜体 */
$("#blue").click(function(){
$(".div2").css("background-color","blue");
$(".div2").text("蓝色背景",);
})
//绿色
$("div[id='green']").click(function(){
$("div[class='div2']").css("background-color","green");
$("div[class='div2']").text("绿色背景").css({"font-style":"italic","font-weight":"bold"});
});
/* 3、当在文本框中输入大写的字母B时，背景颜色变为蓝色，并清空div的内容；
当输入大写字母G时，背景颜色变为绿色，并清空div的内容。 */
$("input[name='color']").keypress(function(event){
if(event.key=="B"){ //event.keyCode==66 /77;
$(".div2").text("");
}else if(event.key=="C"){
$(".div2").css("background-color","green").text("");
}
});
</script>
</body>
</html>
老师，有个疑问，可以通过document.getElementsByName().valuel ,然后进行if判断 ==B，进行设置蓝色， ==G设置绿色吗？我试了试不可以啊，为什么呢？
正在回答 回答被采纳积分+1
同学你好，如下代码中，getElementById()获取的是上一次输入的数据。第一次输入的B，然后第二次获取到上一次输入的B，通过if判断，就显示为蓝色。
keypress是按下键盘时触发事件，当按下键盘时，字符还没有被输入就已经触发了事件。如果第一次输入B，按下键盘，触发了事件，此时B还没输入到input框。函数中，getElementById()获取为null，div背景色不改变，B被输入到input框中。
当第二次输入G（或者C）时，按下键盘，触发事件，此时G（或者C）没有输入到input框中，函数中，getElementById()获取到上次输入的B，通过if(name=="B")，将div2的背景色设置为蓝色。
同学可以自己试一下。
祝：学习愉快~
同学你好，这里的逻辑不正确。
第一次输入B，想要显示为蓝色。但是当按下按钮时，触发了事件，此时B还没输入到input框。函数中，getElementById()获取为null，div背景色不改变，B被输入到input框中。第一次输入的B，div颜色不改变。
然后又输入G（或者C），想要显示为绿色，按下键盘，触发了事件，此时G（或者C）没有输入到input框中，getElementById()获取到上次输入B，div背景色改变为蓝色，G（或者C）输入到input框中。
第一次输入B想要显示为蓝色，结果没有显示，第二次想要输入G（或C）显示为绿色，结果显示为蓝色，这种不符合要求。如果第三次继续输入，将会获取之前输入的BG（或者BC），没有对应的if判断，div背景色不变。
祝学习愉快~
抱歉同学，没看清同学的具体问题，这里不能使用document.getElementsByName().value这种方式。
首先getElementsByName()返回的是一个集合，如果非要使用这种方式，建议给input标签定义id属性，然后使用getElementsById()，如：
还有一个问题，keypress是按下键盘时触发事件，当按下键盘时，字符还没有被输入就已经触发了事件，第一次获取为空字符，不能改变div2的背景色。再按键盘时，会获取到上一次输入的字符，和要输入的字符所以触发的事件不相符，所以不能使用document.getElementsByName().value这种方式。
祝学习愉快~
- 参与学习 人
- 提交作业 9393 份
- 解答问题 16556 个
综合就业常年第一，编程排行常年霸榜，无需脱产即可学习，北上广深月薪过万 无论你是未就业的学生还是想转行的在职人员，不需要基础，只要你有梦想，想高薪
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星