前端基础篇-深入了解 JavaScript（JSON、BOM、DOM 和事件监听）

🔥博客主页： 【小扳_-CSDN博客】
❤感谢大家点赞👍收藏⭐评论✍

文章目录

        1.0 JS - JSON

        2.0 JS - BOM

        2.1 Window 浏览器窗口对象

        2.2 Location 地址栏对象

        3.0 JS - DOM

        3.1 获取 HTML 元素对象

        3.2 调用 Element 对象的属性、方法

        4.0 事件

        4.1 事件监听

        4.2 事件绑定

        4.3 常见事件监听器

        1.0 JS - JSON

        JavaScript 自定义对象

        1）定义格式：

var 对象名 = {属性名1:属性值1,属性名2:属性值2,属性名3:属性值3,函数名称:function(形参列表){}
};

        2）调用格式：

        对象名.属性名;

        对象名.函数名(形参列表); 

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>//自定义对象var functionName = {id:1,name:'张三',get:function(){alert('hello');}} document.write(functionName.id);functionName.get();</script>
</body>
</html>

运行结果为：

        3）JSON 介绍

        JSON 是通过 JavaScript 的对象标记法书写的文本。是一种轻量级的数据交换格式，常用于前端与后端之间的数据传输。JSON 基于 JavaScript 的语法，但独立于编程语言，因此可以被多种编程语言解析和生成。

        简单来说，JSON 可以被看作一种数据载体，键值对的形式存在，用于在不同系统之间传输和交换数据。JSON 本身并不具备逻辑处理能力，而是一种用于表示结构化数据的格式。通过 JSON，可以将数据序列化成字符串形式，并在不同系统之间进行传输和解析。

JSON 语法结构：

    <script>var n = '{"key":value}';</script>

具体例子：

    <script>var json = '{"name":"张三","age":18,"addr":["北京","上海","广州"]}';</script>

        需要注意的是，整体 {} 需要单引号，且每一个键 key 都需要用双引号。

JSON 字符串转为 JS 对象：

格式：

        var obj = JSON.parse(json);

具体例子：

    <script>var json = '{"name":"张三","age":18,"addr":["北京","上海","广州"]}';var obj = JSON.parse(json);alert(obj.age);</script>

运行结果为：

JS 对象转为 JSON 字符串：

格式：

        var str = JSON.stringify(obj);

具体代码如下：

    <script>//定义 JSON 字符串var json = '{"name":"张三","age":18,"addr":["北京","上海","广州"]}';//转为 JSON 对象var obj = JSON.parse(json);alert(obj.age);//转为 JSON 字符串var str = JSON.stringify(obj);alert(str);</script>

运行结果为：

        2.0 JS - BOM

        Browser Object Model 浏览器对象模型，允许 JavaScript 与浏览器对话，JavaScript 将浏览器的各个组成部分封装为对象。

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

        2.1 Window 浏览器窗口对象

获取：直接使用 window，其中 window 可以省略。

        例如，window.alert("Hello window") 的效果等同于 alter("Hello window") 。

对象中的方法：

        alert()：显示带有一段消息和一个确认按钮的警告框。

        confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框。

例子：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>confirm('你有好好学习吗？');</script>
</body>
</html>

运行结果为：

        setinterval()：按照指定的周期(以毫秒计)来调用函数或计算表达式。

例子：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>var i = 0;setInterval(() => {i++;console.log('执行第'+i+'次');}, 3000);</script>
</body>
</html>

        每隔 3 秒就会自动执行，一直持续下去。

运行结果为：

        setTimeout()：在指定的毫秒数后调用函数或计算表达式。

例子：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>var i = 0;setTimeout(() => {i++;console.log('执行第'+i+'次');}, 3000);</script>
</body>
</html>

        隔 3 秒只执行一次。

运行结果为：

        2.2 Location 地址栏对象

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

属性：

        href：设置或返回完整的 URL 。

获得当前地址：

    <script>alert(location.href);</script>

运行结果为：

跳转到指定地址：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>setTimeout(() => {window.location.href='https://www.baidu.com/?tn=02003390_97_hao_pg';}, 3000);</script>
</body>
</html>

运行结果为：

        3.0 JS - DOM

        DOM(Document Object Model)，文档对象模型。将标记语言的各个组成部分封装为对应的对象：

        Document：整个文档对象。一个整体对象。

        Element：元素对象。实际就是标签对象。

        Attribute：属性对象。标签中的属性对象。

        Text：文本对象。实际上就是文本内容。

        Comment：注释对象。

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

        1）改变 HTML 元素的内容

        2）改变 HTML 元素的样式

        3）对 HTML DOM 事件作出反应

        4）添加、删除 HTML 元素

        3.1 获取 HTML 元素对象

        依据 Core DOM - 所有文档类型的标准模型下，HTML DOM - HTML 文档的标准模型将每一个元素都单独封装成一个个对象，比如：将 <img> 标签封装成 Image 对象；将 <input type='button'> 元素封装成一个 Button 对象。

        那么如何获取 HTML 中的标签对象？

        可以通过 Document 对象来获取 Element 中的对象，而 Document 对象可以通过 window 来获取，而一般都会将 Window 省略。

        获取 Element 对象的方法一：

        通过 id 属性值来获取唯一的一个对象。

var id_obj = document.getElementById('id名称');

        获取 Element 对象的方法二：

        通过标签名来获取对象数组。

var objs = document.getElementsByTagName('标签名');

        获取 Element 对象的方法三：

        通过属性名 name 的属性值来获取对象数组。

var objs = document.getElementsByName('name属性值');

        获取 Element 对象的方法四：

        通过 Class 属性值来获取对象数组。

var objs = document.getElementsByClassName('Class属性值');

举个例子：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><img id="img1" src="https://img-blog.csdnimg.cn/direct/a0b8ebee39e54eb39f8f719e0949e6c5.jpeg" height="300px"><div class="cls">新浪新闻</div><div class="cls">腾讯视频</div><input type="checkbox" name="hobby" value=1 >打游戏<input type="checkbox" name="hobby" value=2>看书<input type="checkbox" name="hobby" value=3>睡觉<script>/* 通过id属性值来获取对象 */var id_obj = document.getElementById('img1');/* 通过标签名来获取对象数组 */var objs1 = document.getElementsByTagName('div');/* 通过name的属性值来获取对象数组 */var objs2 = document.getElementsByName('hobby');/* 通过Class属性值来获取对象数组 */var objs3 = document.getElementsByClassName('cls');</script>
</body>
</html>

        3.2 调用 Element 对象的属性、方法

        可以通过 JavaScript 和 HTML DOM 参考手册 (w3school.com.cn) 来查询相对应的属性、方法。

        展示出来的只是一小部分。在里面有很多封装了 Element 对象，包含了很多很多属性、方法。可以参考这个手册来找到自己适合的方法。

举个例子：

        比如修改 <div> 中的文本内容，可以找到 <div> 这个对象，从而找到设置、修改文本内容的属性或者方法。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><img id="img1" src="https://img-blog.csdnimg.cn/direct/a0b8ebee39e54eb39f8f719e0949e6c5.jpeg" height="300px"><div class="cls">新浪新闻</div><div class="cls">腾讯视频</div><input type="checkbox" name="hobby" value=1 >打游戏<input type="checkbox" name="hobby" value=2>看书<input type="checkbox" name="hobby" value=3>睡觉<script>/* 通过id属性值来获取对象 */var id_obj = document.getElementById('img1');/* 通过标签名来获取对象数组 */var objs1 = document.getElementsByTagName('div');var obj_div0 = objs1[0];obj_div0.innerHTML = '博客';/* 通过name的属性值来获取对象数组 */var objs2 = document.getElementsByName('hobby');/* 通过Class属性值来获取对象数组 */var objs3 = document.getElementsByClassName('cls');</script>
</body>
</html>

        4.0 事件

        在 Web 开发中，事件（Event）是指可以触发特定行为或动作的信号或通知。事件可以是用户操作（如点击、鼠标移动）或系统操作（如页面加载完成、键盘按下）等，通过事件可以触发相应的事件处理程序（Event Handler）来执行特定的操作。

        简单来说，HTML 事件就是发生在 HTML 元素上的“事情”。

        4.1 事件监听

        JavaScript 可以在事件被侦测到时执行代码。是一种常见的编程模式，用于在 Web 开发中处理各种事件。通过事件监听，开发人员可以指定当特定事件发生时执行特定的操作或逻辑。直接在 HTML 元素中使用事件属性来添加事件监听器，如 onclick、onmouseover 等。

举个例子：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><input type="button" onclick="on()" value="按钮">
</body>
</html>

        事件就是：按一下按钮这个操作。而事件监听就是：接收按按钮的事件之后做出一些反馈。

        4.2 事件绑定

        事件绑定是将事件与相应的事件监听器（或处理函数）关联起来的过程。当事件发生时，绑定的事件监听器会被触发执行。

事件绑定方式：

        1）通过 HTML 标签中的事件属性进行绑定

举个例子：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><input type="button" onclick="on()" value="按钮">
</body>
<script>function on(){alert('按了一下按钮');}
</script>
</html>

        当事件 "按钮按了一下" 发生后，被事件监听 "onclick "监听到了，从而做出了弹出警告框这个反馈动作。

        这种操作是直接在标签属性上直接绑定的。

        2）通过 DOM 元素属性绑定

        先获取 Element 对象，再进行与监听器进行绑定。

举个例子：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 绑定方式一: --><input type="button" onclick="on()" value="按钮"><input id="id1" type="button" value="按钮" >
</body>
<script>function on(){alert('按了一下按钮');}<!-- 绑定方式二: -->var id_obj = document.getElementById('id1');id_obj.onclick=function(){alert('按了一下按钮');}
</script>
</html>

        4.3 常见事件监听器

        

举个例子：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 绑定方式一: --><input type="button" onclick="on()" value="按钮"><input id="id1" type="button" value="按钮" onblur="blur" onfocus="focus"><input type="text" name="username" onblur="blur1()" onfocus="focus1()" onkeydown="key()">
</body>
<script>function on(){alert('按了一下按钮');}<!-- 绑定方式二: -->var id_obj = document.getElementById('id1');id_obj.onclick=function(){alert('按了一下按钮');}function blur1(){console.log('失去焦点');}function focus1(){console.log('获取焦点');}function mouse(){console.log('移到指定位置');}function mouseover(){console.log('移开指定位置');}function key(){console.log('正在输入');}
</script>
</html>

        以上都是用到了标签属性事件直接绑定。

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

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

相关文章

威联通(QNAP) TS-466C NAS 开箱评测，4盘位NAS，N6005，存储服务器

威联通(QNAP) TS-466C NAS 开箱评测，4盘位NAS，N6005，存储服务器

威联通(QNAP) TS-466C 四盘位NAS (Network Attached Storage:网络附属存储) 开箱评测 之前用的TS-551经过几轮系统升级后明显感觉性能跟不上了&#xff0c;变卡了&#xff0c;所以升级一下&#xff0c;换了TS-466C。 威联通迁移NAS还挺方便的&#xff0c;只有将原先NAS里的硬…
阅读更多...
Spring Boot项目怎么从Nacos注册中心上获取其他服务列表信息？

Spring Boot项目怎么从Nacos注册中心上获取其他服务列表信息？

一、前言 在spring boot项目开发过程中&#xff0c;为了进行微服务之间的调用&#xff0c;我们一般会使用注册中心&#xff0c;比如Nacos。假设我们有一个业务需求&#xff0c;应用A需要从Nacos注册中心上获取服务信息进行分析&#xff0c;需要怎么实现呢&#xff1f; 二、开…
阅读更多...
数据结构(四)——串的定义和基本操作

数据结构(四)——串的定义和基本操作

四、串 4.1 串的定义和实现 4.1.2 串的定义 串&#xff1a;即字符串&#xff08;String&#xff09;是由零个或多个字符组成的有限序列。例&#xff1a;T‘iPhone 11 Pro Max?’子串&#xff1a;串中任意个连续的字符组成的子序列。 Eg&#xff1a;’iPhon…
阅读更多...
蓝桥杯每日一题：血色先锋队

蓝桥杯每日一题：血色先锋队

今天浅浅复习巩固一下bfs 答案&#xff1a; #include<iostream> #include<algorithm> #include<cstring>using namespace std; typedef pair<int,int> PII;const int N510; int n,m,a,b; int dist[N][N]; PII q[N*N]; int hh0,tt-1;int dx[]{1,0,-1,…
阅读更多...
【医学图像处理】ECAT和HRRT格式转nii格式【超简单】

【医学图像处理】ECAT和HRRT格式转nii格式【超简单】

之前从ADNI上下载PET数据的时候发现有许多数据的格式不是DICOM的而是ECAT或者是HRRT格式&#xff0c;这对原本就少的PET数据是血上加霜啊。 当然只使用DICOM格式的数据也会得到不少的数据&#xff0c;我一开始也是只使用DICOM格式的样本&#xff0c;后来为了得到更多的数据&a…
阅读更多...
【LabVIEW FPGA入门】浮点数类型支持

【LabVIEW FPGA入门】浮点数类型支持

如今&#xff0c;使用浮点运算来设计嵌入式系统的需求变得越来越普遍。随着 FPGA 因其固有的大规模并行性而在浮点性能方面继续超越微处理器&#xff0c;这种情况正在加剧。线性代数和数字信号处理 (DSP) 等高级算法可以受益于浮点数据类型的高动态范围精度。LabVIEW FPGA 通过…
阅读更多...
力扣hot100：33. 搜索旋转排序数组（二分的理解）

力扣hot100：33. 搜索旋转排序数组（二分的理解）

33.搜索旋转排序数组 ​ 这是一个非常有趣的问题&#xff0c;如果不要求使用O(logn)应该没人会想到吧。。 方法一&#xff1a; 极致的分类讨论。旋转排序数组&#xff0c;无非就是右边的增区间的数小于左边的增区间的数&#xff0c;然后依次排序。因此我们只需要分三类讨论即可…
阅读更多...
CMAKE_CUDA_ARCHITECTURES set to ‘native’多版本与版本号矛盾问题，报错

CMAKE_CUDA_ARCHITECTURES set to ‘native’多版本与版本号矛盾问题，报错

CMAKE_CUDA_ARCHITECTURES set to ‘native’多版本与版本号矛盾问题&#xff0c;报错 1. 报错提醒如下图2. 原因本地安装多个cuda版本导致native寻找到多个版本&#xff0c;导致报错3. 具体配置需要根据你的显卡型号来确认 1. 报错提醒如下图 2. 原因本地安装多个cuda版本导致…
阅读更多...
【prometheus】k8s集群部署prometheus server(文末送书)

【prometheus】k8s集群部署prometheus server(文末送书)

目录 一、概述 1.1 prometheus简介 1.2 prometheus架构图 1.3测试环境 二、k8s集群中部署prometheus server 2.1创建sa账号和数据目录 2.2安装prometheus 2.2.1创建configmap存储卷存放prometheus配置信息 2.2.2 通过deployment部署prometheus 2.2.3prometheus pod创…
阅读更多...
ConsiStory：Training-Free的主体一致性生成

ConsiStory：Training-Free的主体一致性生成

Overview 一、总览二、PPT详解 ConsiStory 一、总览 题目&#xff1a; Training-Free Consistent Text-to-Image Generation 机构&#xff1a;NVIDIA, Tel-Aviv University 论文&#xff1a;https://arxiv.org/pdf/2402.03286.pdf 代码&#xff1a;https://consistory-paper.g…
阅读更多...
zookeeper快速入门三：zookeeper的基本操作

zookeeper快速入门三：zookeeper的基本操作

在zookeeper的bin目录下&#xff0c;输入./zkServer.sh start和./zkCli.sh启动服务端和客户端&#xff0c;然后我们就可以进行zookeeper的基本操作了。如果是windows&#xff0c;请参考前面章节zookeeper快速入门一&#xff1a;zookeeper安装与启动 目录 一、节点的增删改查 …
阅读更多...
【Java基础知识总结 | 第三篇】深入理解分析ArrayList源码

【Java基础知识总结 | 第三篇】深入理解分析ArrayList源码

文章目录 3.深入理解分析ArrayList源码3.1ArrayList简介3.2ArrayLisy和Vector的区别&#xff1f;3.3ArrayList核心源码解读3.3.1ArrayList存储机制&#xff08;1&#xff09;构造函数&#xff08;2&#xff09;add()方法&#xff08;3&#xff09;新增元素大体流程 3.3.2ArrayL…
阅读更多...
react03

react03

react03 修改脚手架创建的打包命令 根据scripts中的命令&#xff0c;执行npm run eject ,输入y, 如果对原始的脚手架文件有过改动需要进行将修改后的文件提交到git 历史区 &#xff0c;防止暴露后的代码覆盖我们自己的文件 git 提交&#xff1a; git add . git commit -m ‘…
阅读更多...
java----网络编程（一）

java----网络编程（一）

一.什么是网络编程 用户在浏览器中&#xff0c;打开在线视频网站&#xff0c;如优酷看视频&#xff0c;实质是通过网络&#xff0c;获取到网络上的一个视频资源。 与本地打开视频文件类似&#xff0c;只是视频文件这个资源的来源是网络。所谓网络资源就是网络中获取数据。而所…
阅读更多...
LabVIEW提升舱救援通讯监测系统

LabVIEW提升舱救援通讯监测系统

LabVIEW提升舱救援通讯监测系统 随着科技的进步&#xff0c;煤矿救援工作面临着许多新的挑战。为了提高救援效率和安全性&#xff0c;设计并实现了一套基于LabVIEW的提升舱救援通讯监测系统。该系统能够实时监控提升舱内的环境参数和视频图像&#xff0c;确保救援人员和被困人…
阅读更多...
el-input设置max、min无效的解决方案

el-input设置max、min无效的解决方案

目录 一、方式1&#xff1a;type“number” 二、方式2&#xff1a;oninput&#xff08;推荐&#xff09; 三、计算属性 如下表所示&#xff0c;下面为官方关于max&#xff0c;min的介绍&#xff1a; el-input&#xff1a; max原生属性&#xff0c;设置最大值min原生属性&a…
阅读更多...
06.共享内存

06.共享内存

1.内存映射&#xff08;mmap&#xff09; 我们在单片机中首先接触到了映射的概念 将一个寄存器的地址映射到了另外的一个存储空间中 内存映射: 内存映射&#xff08;Memory Mapping&#xff09;是一种在计算机科学中使用的技术&#xff0c;它允许将文件或其他设备的内容映射…
阅读更多...
idea warning:java源值已过时将在未来所有发行版中删除

idea warning:java源值已过时将在未来所有发行版中删除

在idea中运行maven项目 如果出现idea warning:java源值已过时将在未来所有发行版中删除&#xff0c;详见如下截图所示&#xff1a; 注意&#xff1a;jdk8 要解决这个警告需要设置3个地方 首先打开File->Project Structure中的Project&#xff0c;将SDK和language level都设…
阅读更多...
五、保持长期高效的七个法则(二)Rules for Staying Productive Long-Term(1)

五、保持长期高效的七个法则(二)Rules for Staying Productive Long-Term(1)

For instance - lets say youre a writer.You have a bunch of tasks on your plate for the day, but all of a sudden you get a really good idea for an essay. You should probably start writing now or youll lose your train of thought.What should you do? 举例来说…
阅读更多...
分布式搜索引擎（3）

分布式搜索引擎（3）

1.数据聚合 **[聚合&#xff08;](https://www.elastic.co/guide/en/elasticsearch/reference/current/search-aggregations.html)[aggregations](https://www.elastic.co/guide/en/elasticsearch/reference/current/search-aggregations.html)[&#xff09;](https://www.ela…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023