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

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的文件,然后准备如下代码:

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属性值,进行图片的切换

  • 代码实现

    javascript 复制代码
    //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>,并且替原内容

  • 代码实现

    javascript 复制代码
    //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标签的

  • 代码实现

    javascript 复制代码
    // //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 完整代码
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>
    //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>
相关推荐
褚翾澜3 分钟前
Bash语言的社区交流
开发语言·后端·golang
wuaro4 分钟前
JS的深浅拷贝
前端·javascript·html
独好紫罗兰16 分钟前
洛谷题单3-P4956 [COCI 2017 2018 #6] Davor-python-流程图重构
开发语言·python·算法
CHPCWWHSU29 分钟前
vulkanscenegraph显示倾斜模型(5.6)-vsg::RenderGraph的创建
开发语言·javascript·ecmascript
爱看书的小沐39 分钟前
【小沐杂货铺】基于Three.JS绘制太阳系Solar System(GIS 、WebGL、vue、react)
javascript·vue.js·webgl·three.js·地球·太阳系·三维地球
Hamm40 分钟前
用一种全新的方式来实现i18n,和魔法字符串彻底说拜拜
前端·vue.js·typescript
向宇it1 小时前
【零基础入门unity游戏开发——2D篇】SortingGroup(排序分组)组件
开发语言·unity·c#·游戏引擎·材质
旺代1 小时前
JavaScript日期对象
开发语言·javascript·ecmascript
nlog3n1 小时前
Java 桥接模式 详解
java·开发语言·桥接模式
摸鱼仙人~1 小时前
React: hook相当于函数吗?
前端·javascript·react.js