Java Web JavaScript （2）23.7.2

news2024/9/20 23:56:55

5，BOM

BOM：Browser Object Model 浏览器对象模型。也就是 JavaScript 将浏览器的各个组成部分封装为对象。

我们要操作浏览器的各个组成部分就可以通过操作 BOM 中的对象来实现。比如：我现在想将浏览器地址栏的地址改为 https://www.itheima.com 就可以通过使用 BOM 中定义的 Location 对象的 href 属性，代码： location.href = "https://itheima.com";

BOM 中包含了如下对象：

  • Window：浏览器窗口对象
  • Navigator：浏览器对象
  • Screen：屏幕对象
  • History：历史记录对象
  • Location：地址栏对象

下图是 BOM 中的各个对象和浏览器的各个组成部分的对应关系

请添加图片描述

BOM 中的 Navigator 对象和 Screen 对象基本不会使用，所以我们的课堂只对 Window、History、Location 对象进行讲解。

5.1 Window对象

window 对象是 JavaScript 对浏览器的窗口进行封装的对象。

5.1.1 获取window对象

该对象不需要创建直接使用 window，其中 window. 可以省略。比如我们之前使用的 alert() 函数，其实就是 window 对象的函数，在调用是可以写成如下两种

  • 显式使用 window 对象调用

    window.alert("abc");

  • 隐式调用

    alert("abc")

5.1.2 window对象属性

window 对象提供了用于获取其他 BOM 组成对象的属性

请添加图片描述

也就是说，我们想使用 Location 对象的话，就可以使用 window 对象获取；写成 window.location，而 window. 可以省略，简化写成 location 来获取 Location 对象。

5.1.3 window对象函数

window 对象提供了很多函数供我们使用，而很多都不常用；下面给大家列举了一些比较常用的函数

请添加图片描述

setTimeout(function,毫秒值) : 在一定的时间间隔后执行一个function，只执行一次
setInterval(function,毫秒值) :在一定的时间间隔后执行一个function，循环执行

confirm代码演示：

// confirm()，点击确定按钮，返回true，点击取消按钮，返回false
var flag = confirm("确认删除？");

alert(flag);

下图是 confirm() 函数的效果。当我们点击 确定 按钮，flag 变量值记录的就是 true ；当我们点击 取消 按钮，flag 变量值记录的就是 false。

请添加图片描述

而以后我们在页面删除数据时候如下图每一条数据后都有 删除 按钮，有可能是用户的一些误操作，所以对于删除操作需要用户进行再次确认，此时就需要用到 confirm() 函数。

请添加图片描述

定时器代码演示：

setTimeout(function (){
    alert("hehe");
},3000);

当我们打开浏览器，3秒后才会弹框输出 hehe，并且只会弹出一次。

setInterval(function (){
    alert("hehe");
},2000);

当我们打开浏览器，每隔2秒都会弹框输出 hehe。

5.1.4 案例

需求：每隔1秒，灯泡切换一次状态
请添加图片描述

需求说明：

有如下页面效果，实现定时进行开灯、关灯功能

请添加图片描述

初始页面环境

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript演示</title>
</head>
<body>

<input type="button" onclick="on()" value="开灯">
<img id="myImage" border="0" src="../imgs/off.gif" style="text-align:center;">
<input type="button" onclick="off()" value="关灯">

<script>
    function on(){
        document.getElementById('myImage').src='../imgs/on.gif';
    }

    function off(){
        document.getElementById('myImage').src='../imgs/off.gif'
    }

</script>
</body>
</html>

代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript演示</title>
</head>
<body>

<input type="button" onclick="on()" value="开灯">
<img id="myImage" border="0" src="../imgs/off.gif" style="text-align:center;">
<input type="button" onclick="off()" value="关灯">

<script>
    function on(){
        document.getElementById('myImage').src='../imgs/on.gif';
    }

    function off(){
        document.getElementById('myImage').src='../imgs/off.gif'
    }
    
    //定义一个变量，用来记录灯的状态，偶数是开灯状态，奇数是关灯状态
    var x = 0;
    //使用循环定时器
    setInterval(function (){
        if(x % 2 == 0){//表示是偶数，开灯状态，调用 on() 函数
            on();
        }else {  //表示是奇数，关灯状态，调用 off() 函数
            off();
        }
        x ++;//改变变量的值
    },1000);

</script>
</body>
</html>

5.2 History对象

History 对象是 JavaScript 对历史记录进行封装的对象。

  • History 对象的获取

    使用 window.history获取，其中window. 可以省略

  • History 对象的函数

    请添加图片描述

    这两个函数我们平时在访问其他的一些网站时经常使用对应的效果，如下图

    请添加图片描述

    当我们点击向左的箭头，就跳转到前一个访问的页面，这就是 back() 函数的作用；当我们点击向右的箭头，就跳转到下一个访问的页面，这就是 forward() 函数的作用。

5.3 Location对象

请添加图片描述

Location 对象是 JavaScript 对地址栏封装的对象。可以通过操作该对象，跳转到任意页面。

5.3.1 获取Location对象

使用 window.location获取，其中window. 可以省略

window.location.方法();
location.方法();

5.3.2 Location对象属性

Location对象提供了很对属性。以后常用的只有一个属性 href

请添加图片描述

代码演示：

alert("要跳转了");
location.href = "https://www.baidu.com";

在浏览器首先会弹框显示 要跳转了，当我们点击了 确定 就会跳转到 百度 的首页。

5.3.3 案例

需求：3秒跳转到百度首页

分析：

  1. 3秒跳转，由此可以确定需要使用到定时器，而只跳转一次，所以使用 setTimeOut()
  2. 要进行页面跳转，所以需要用到 location 对象的 href 属性实现

代码实现：

document.write("3秒跳转到首页..."); 
setTimeout(function (){
    location.href = "https://www.baidu.com"
},3000);

6，DOM

6.1 概述

DOM：Document Object Model 文档对象模型。也就是 JavaScript 将 HTML 文档的各个组成部分封装为对象。

DOM 其实我们并不陌生，之前在学习 XML 就接触过，只不过 XML 文档中的标签需要我们写代码解析，而 HTML 文档是浏览器解析。封装的对象分为

  • Document：整个文档对象
  • Element：元素对象
  • Attribute：属性对象
  • Text：文本对象
  • Comment：注释对象

如下图，左边是 HTML 文档内容，右边是 DOM 树
请添加图片描述

作用：

JavaScript 通过 DOM， 就能够对 HTML进行操作了

  • 改变 HTML 元素的内容
  • 改变 HTML 元素的样式（CSS）
  • 对 HTML DOM 事件作出反应
  • 添加和删除 HTML 元素

DOM相关概念：

DOM 是 W3C（万维网联盟）定义了访问 HTML 和 XML 文档的标准。该标准被分为 3 个不同的部分：

  1. 核心 DOM：针对任何结构化文档的标准模型。 XML 和 HTML 通用的标准

    • Document：整个文档对象

    • Element：元素对象

    • Attribute：属性对象

    • Text：文本对象

    • Comment：注释对象

  2. XML DOM： 针对 XML 文档的标准模型

  3. HTML DOM： 针对 HTML 文档的标准模型

    该标准是在核心 DOM 基础上，对 HTML 中的每个标签都封装成了不同的对象

    • 例如：<img> 标签在浏览器加载到内存中时会被封装成 Image 对象，同时该对象也是 Element 对象。
    • 例如：<input type='button'> 标签在浏览器加载到内存中时会被封装成 Button 对象，同时该对象也是 Element 对象。

6.2 获取 Element对象

HTML 中的 Element 对象可以通过 Document 对象获取，而 Document 对象是通过 window 对象获取。

Document 对象中提供了以下获取 Element 元素对象的函数

  • getElementById()：根据id属性值获取，返回单个Element对象
  • getElementsByTagName()：根据标签名称获取，返回Element对象数组
  • getElementsByName()：根据name属性值获取，返回Element对象数组
  • getElementsByClassName()：根据class属性值获取，返回Element对象数组

代码演示：

下面有提前准备好的页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <img id="light" src="../imgs/off.gif"> <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"> 游戏
    <br>
    <script>
		//在此处书写js代码
    </script>
</body>
</html>

  1. 根据 id 属性值获取上面的 img 元素对象，返回单个对象

    var img = document.getElementById("light");
alert(img);

    结果如下：

请添加图片描述

从弹框输出的内容，也可以看出是一个图片元素对象。

  1. 根据标签名称获取所有的 div 元素对象

    var divs = document.getElementsByTagName("div");// 返回一个数组，数组中存储的是 div 元素对象
// alert(divs.length);  //输出 数组的长度
//遍历数组
for (let i = 0; i < divs.length; i++) {
    alert(divs[i]);
}

  2. 获取所有的满足 name = 'hobby' 条件的元素对象

    //3. getElementsByName：根据name属性值获取，返回Element对象数组
var hobbys = document.getElementsByName("hobby");
for (let i = 0; i < hobbys.length; i++) {
    alert(hobbys[i]);
}

  3. 获取所有的满足 class='cls' 条件的元素对象

    //4. getElementsByClassName：根据class属性值获取，返回Element对象数组
var clss = document.getElementsByClassName("cls");
for (let i = 0; i < clss.length; i++) {
    alert(clss[i]);
}

6.3 HTML Element对象使用

HTML 中的 Element 元素对象有很多，不可能全部记住，以后是根据具体的需求查阅文档使用。

下面我们通过具体的案例给大家演示文档的查询和对象的使用；下面提前给大家准备好的页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <img id="light" src="../imgs/off.gif"> <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"> 游戏
    <br>
    <script>
        //在此处写js低吗
    </script>
</body>
</html>

需求：

  1. 点亮灯泡

    此案例由于需要改变 img 标签 的图片，所以我们查询文档，下图是查看文档的流程：

请添加图片描述

代码实现：

//1，根据 id='light' 获取 img 元素对象
var img = document.getElementById("light");
//2，修改 img 对象的 src 属性来改变图片
img.src = "../imgs/on.gif";

  1. 将所有的 div 标签的标签体内容替换为 呵呵

    //1，获取所有的 div 元素对象
var divs = document.getElementsByTagName("div");
/*
        style:设置元素css样式
        innerHTML：设置元素内容
    */
//2，遍历数组，获取到每一个 div 元素对象，并修改元素内容
for (let i = 0; i < divs.length; i++) {
    //divs[i].style.color = 'red';
    divs[i].innerHTML = "呵呵";
}

  2. 使所有的复选框呈现被选中的状态

    此案例我们需要看 复选框 元素对象有什么属性或者函数是来操作 复选框的选中状态。下图是文档的查看

请添加图片描述

代码实现：

//1，获取所有的 复选框 元素对象
var hobbys = document.getElementsByName("hobby");
//2，遍历数组，通过将 复选框 元素对象的 checked 属性值设置为 true 来改变复选框的选中状态
for (let i = 0; i < hobbys.length; i++) {
    hobbys[i].checked = true;
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/714394.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

m4a音频格式转换器：让音频轻松换装

m4a音频格式转换器：让音频轻松换装

大家有没有遇到这样的情况——你下载了一个很酷的音频文件&#xff0c;但是播放设备却说“不认识”这个格式&#xff1f;别担心&#xff01;现在有个超级厉害的工具可以帮你解决这个问题&#xff0c;它就是m4a音频格式转换器&#xff01;它能让你的音频文件变身&#xff0c;适应…
阅读更多...
Java--基于Swing的登录界面

Java--基于Swing的登录界面

运行结果: 代码: import javax.swing.*; import java.awt.*; import java.awt.event.ActionEvent; import java.awt.event.ActionListener;public class ljt2 {public static void main(String[] args) {// 创建窗体JFrame frame new JFrame("学生信息管理系统");f…
阅读更多...
数据处理及评分成果

数据处理及评分成果

文章目录 test.py界面展示 pf.pyfpga.py test.py import subprocess import os from PySide2.QtWidgets import QApplication, QMainWindow, QPushButton, QPlainTextEdit, QWidget, QLabel import mysql.connector from PySide2.QtGui import QPixmap, QPalette, QColorconn …
阅读更多...
spfa求负环

spfa求负环

1.虫洞 Wormholes&#xff08;裸spfa判断负环问题&#xff09; 信息学奥赛一本通&#xff08;C版&#xff09;在线评测系统 (ssoier.cn)http://ybt.ssoier.cn:8088/problem_show.php?pid1507 #include<bits/stdc.h> using namespace std; const int N510,M5210; int d…
阅读更多...
【花雕】全国青少年机器人技术一级考试试卷模拟题A组

【花雕】全国青少年机器人技术一级考试试卷模拟题A组

随着科技的不断进步&#xff0c;机器人技术已经成为了一个重要的领域。在这个领域中&#xff0c;机械结构是机器人设计中至关重要的一部分&#xff0c;它决定了机器人的形态、运动方式和工作效率。对于青少年机器人爱好者来说&#xff0c;了解机械结构的基础知识&#xff0c;掌…
阅读更多...
kafka入门，高效读写数据，页缓存+零拷贝技术（十七）

kafka入门，高效读写数据，页缓存+零拷贝技术（十七）

高效读写数据 1)kafka本身是分布式集群&#xff0c;可以采用集群技术&#xff0c;并行度高 2&#xff09;读写数据采用稀疏索引&#xff0c;可以快熟定位要消费的数据 3&#xff09;顺序写磁盘 kafka的producer生产数据&#xff0c;要写入到log文件中&#xff0c;写的过程一直…
阅读更多...
一个电脑小工具一键转化文件格式《File Converter》

一个电脑小工具一键转化文件格式《File Converter》

介绍 File Converter是一种软件或在线服务&#xff0c;用于将一个文件格式转换为另一个文件格式。它可以帮助用户在不同的应用程序之间进行文件转换&#xff0c;以便更好地兼容和使用不同的文件类型。 File Converter可以转换各种类型的文件&#xff0c;包括文档、图像、音频…
阅读更多...
前端食堂技术周刊第 89 期：ES 2023、MDN Playground、TS 5.2 Beta、逆向分析 GitHub Copilot

前端食堂技术周刊第 89 期：ES 2023、MDN Playground、TS 5.2 Beta、逆向分析 GitHub Copilot

美味值&#xff1a;&#x1f31f;&#x1f31f;&#x1f31f;&#x1f31f;&#x1f31f; 口味&#xff1a;糯米糍荔枝 食堂技术周刊仓库地址&#xff1a;https://github.com/Geekhyt/weekly 大家好&#xff0c;我是童欧巴。欢迎来到前端食堂技术周刊&#xff0c;我们先来看…
阅读更多...
RIP实验

RIP实验

RIP实验 要求&#xff1a; 1、进行地址分配 R1&#xff1a; R2&#xff1a; R3&#xff1a; R4&#xff1a; R5&#xff1a; R6&#xff1a; R7&#xff1a; 2、RIP配置&#xff0c;启动进程&#xff0c;选择版本&#xff0c;宣告网段 R1&#xff1a; R2&#xff1a; R3&…
阅读更多...
kubernetes 节点维护 cordon, drain, uncordon

kubernetes 节点维护 cordon, drain, uncordon

1.这三个命令是正式release的1.2新加入的命令&#xff0c;三个命令一起介绍&#xff0c;是因为三个命令配合使用可以实现节点的维护。在1.2之前&#xff0c;因为没有相应的命令支持&#xff0c;如果要维护一个节点&#xff0c;只能stop该节点上的kubelet将该节点退出集群&#…
阅读更多...
“物联网IOT”技术在智能化数据中心低压配电系统中的运用

“物联网IOT”技术在智能化数据中心低压配电系统中的运用

物联网、区块链、云计算、人工智能等新技术的发展让人们能够用新的方式更方便地获取和管理信息&#xff0c;已成为数字化转型的主要推动力。所谓物联网&#xff08;The Internet of Things&#xff0c;简称IOT&#xff09;&#xff0c;是互联网基础上的延伸和扩展的网络&#x…
阅读更多...
python接口自动化（十二）--https请求（SSL）（详解）

python接口自动化（十二）--https请求（SSL）（详解）

简介 本来最新的requests库V2.13.0是支持https请求的&#xff0c;但是一般写脚本时候&#xff0c;我们会用抓包工具fiddler&#xff0c;这时候会 报&#xff1a;requests.exceptions.SSLError: [SSL: CERTIFICATE_VERIFY_FAILED] certificate verify failed (_ssl.c:590) 小编…
阅读更多...
Nginx(7)Nginx实现服务器端集群搭建

Nginx(7)Nginx实现服务器端集群搭建

Nginx集群搭建 Nginx与Tomcat部署Nginx实现动静分离Nginx实现Tomcat集群搭建 Nginx高可用解决方案KeepalivedKeepalived配置文件keepalived之vrrp_script Nginx制作下载站点Nginx的用户认证模块 Nginx与Tomcat部署 前面课程已经将Nginx的大部分内容进行了讲解&#xff0c;我们…
阅读更多...
css3 弹性布局flex

css3 弹性布局flex

文章目录 flex弹性盒子flex-direction 决定主轴的方向flex-wrap 换行flex-flow flex-direction和flex-wrap的简写属性justify-content 定义了弹性子元素在主轴上的对齐方式align-items 定义弹性子元素在交叉轴上如何对齐align-content 定义了多根轴线的对齐方式order 定义弹性子…
阅读更多...
网络安全合规-数据安全治理的重要性

网络安全合规-数据安全治理的重要性

数据安全治理能力评估框架将数据安全治理分为三大层次&#xff0c;即数据安全战略、数据全生命周期安全和基础安全[3]。数据安全战略指组织的数据安全顶层规划&#xff0c;起到为数据安全治理“搭框架”“配人手”的作用&#xff1b;数据全生命周期安全指组织在数据全生命周期的…
阅读更多...
PDF转换成CAD怎么转换？分享几种快速转换方法

PDF转换成CAD怎么转换？分享几种快速转换方法

CAD 文件通常具有比 PDF 文件更高的精度。这是因为 CAD 文件是为设计和制造目的而创建的&#xff0c;而 PDF 文件则是为共享和打印目的而创建的。因此&#xff0c;将 PDF 转换成 CAD 可以提高设计的精度和准确性。CAD 文件可以通过精确的尺寸、角度、线型和曲线来描述物体。这使…
阅读更多...
c++崩溃调试总结

c++崩溃调试总结

个人博客地址: https://cxx001.gitee.io windows上程序崩溃调试 场景1 调用第三方dll崩溃 调试需求 需要第三方提供对应的pdb和源码。 调试步骤 把dll 、pdb和exe程序放同级目录。在调用dll崩溃的地方打上断点&#xff0c;F5运行&#xff0c;第一次调试需要选择dll对应源码…
阅读更多...
javaweb知识初汇总

javaweb知识初汇总

前言&#xff1a; 本文主要介绍了JavaWeb前端开发的以下几个方面&#xff1a; 1. HTML/CSS&#xff1a;使用HTML和CSS进行页面结构和样式的设计与布局。 2. JavaScript&#xff1a;使用JavaScript进行页面的交互和动态效果的实现。 3. 前端框架&#xff1a;使用前端框架如V…
阅读更多...
CSV文件简单介绍（逗号分隔值Comma-Separated Values）

CSV文件简单介绍（逗号分隔值Comma-Separated Values）

文章目录 CSV文件CSV文件优点 CSV对比Excel xlsx文件CSV文件应用场景CSV文件使用示例用Python生成CSV文件将Excel文件导出为CSV文件 CSV文件 CSV是逗号分隔值&#xff08;Comma-Separated Values&#xff09;的缩写&#xff0c;是一种常见的电子表格文件格式。CSV文件以纯文本…
阅读更多...
【图像处理】去雾源码收集（halcon、python、C#、VB、matlab）

【图像处理】去雾源码收集（halcon、python、C#、VB、matlab）

【图像处理】去雾代码收集&#xff08;附halcon、python、C#、VB、matlab源码&#xff09; 一、halcon算法1.1 halcon算法源码1.2 halcon算法效果图![在这里插入图片描述](https://img-blog.csdnimg.cn/8ad5217a59be4de29b5a7b6eee997b85.png#pic_center) 二、opencv算法2.1 py…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023