当前位置：首页 > news >正文

Javaweb之javascript的小案例的详细解析

news 2025/8/14 2:23:27

1.5.4 案例

1.5.4.1 需求说明

鲁迅说的好，光说不练假把式,光练不说傻把式。所以接下来我们需要通过案例来加强对于上述DOM知识的掌握。需求如下3个：

点亮灯泡
将所有的div标签的标签体内容后面加上：very good
使所有的复选框呈现被选中的状态

效果如下所示：

1.5.4.2 资料准备

在JS目录下，也就是用于存放html文件的同级创建img文件下，然后将资料/图片素材中提供的2张图片拷贝到img文件夹中，最终整体结果如下图所示：

在VS Code中创建名为08. JS-对象-DOM-案例.html的文件，然后准备如下代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-对象-DOM-案例</title>
</head>

<body><img id="h1" src="img/off.gif">  <br><br>
<div class="cls">传智教育</div>   <br><div class="cls">黑马程序员</div>  <br>
<input type="checkbox" name="hobby"> 电影<input type="checkbox" name="hobby"> 旅游<input type="checkbox" name="hobby"> 游戏
</body>

<script></script>
</html>

浏览器打开此时效果如图所示：

1.5.4.3 需求1

需求

点亮灯泡
分析

此时我们需要把灯泡点亮，其实就是换一张图片。那么我们需要切换图片，就需要操作图片的src属性。要操作图片的src属性，就需要先来获取img标签对象。
步骤
- 首先获取img标签对象
- 然后修改img标签对象的src属性值，进行图片的切换

代码实现

//1. 点亮灯泡 : src 属性值
//首先获取img标签对象
var img = document.getElementById('h1');
//然后修改img标签对象的src属性值，进行图片的切换
img.src = "img/on.gif";

浏览器打开，效果如图所示：

1.5.4.4 需求2

需求

将所有的div标签的标签体内容后面加上：very good

并且very good是红色字体
分析

我们需要在原有内容后面追加红色的very good.所以我们首先需要获取原有内容，然后再进行内容的追加。但是如何保证very good是红色的呢？所以我们可以通过之前html中学过的<font>标签和属性来完整。如何进行内容的替换呢？之前我们学习过innerHTML属性。需要替换2个div的内容，所以我们需要获取2个div，并且遍历进行替换。
步骤
- 通过标签的名字div获取所有的div标签
- 遍历所有的div标签
- 获取div标签的原有内容，然后追加<font color='red'>very good</font>,并且替原内容

代码实现

//2. 将所有div标签的内容后面加上: very good (红色字体) -- <font color='red'></font>
var divs = document.getElementsByTagName('div');
for (let i = 0; i < divs.length; i++) {const div = divs[i];div.innerHTML += "<font color='red'>very good</font>"; 
}

浏览器打开效果如图所示：

1.5.4.5 需求3

需求

使所有的复选框呈现被选中的状态
分析

要让复选框处于选中状态，那么什么属性或者方法可以使复选框选中？可以查询资料得出checkbox标签对象的checked属性设置为true，可以改变checkbox为选中状态。那么需要设置所有的checkbox，那么我们需要获取所有的checkbox并且遍历
步骤
- 可以通过name属性值获取所有的checkbox标签
- 遍历所有的checkbox标签，
- 设置每个checkbox标签的

代码实现

// //3. 使所有的复选框呈现选中状态
var ins = document.getElementsByName('hobby');
for (let i = 0; i < ins.length; i++) {
const check = ins[i];
check.checked = true;//选中
}

浏览器刷新，效果如图所示:

1.5.4.6 完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-对象-DOM-案例</title>
</head>

<body><img id="h1" src="img/off.gif">  <br><br>
<div class="cls">传智教育</div>   <br><div class="cls">黑马程序员</div>  <br>
<input type="checkbox" name="hobby"> 电影<input type="checkbox" name="hobby"> 旅游<input type="checkbox" name="hobby"> 游戏
</body>

<script>//1. 点亮灯泡 : src 属性值var img = document.getElementById('h1');img.src = "img/on.gif";

//2. 将所有div标签的内容后面加上: very good (红色字体) -- <font color='red'></font>var divs = document.getElementsByTagName('div');for (let i = 0; i < divs.length; i++) {const div = divs[i];div.innerHTML += "<font color='red'>very good</font>"; }

// //3. 使所有的复选框呈现选中状态var ins = document.getElementsByName('hobby');for (let i = 0; i < ins.length; i++) {const check = ins[i];check.checked = true;//选中}

</script>
</html>

查看全文

http://www.lryc.cn/news/227460.html