前端基础篇-深入了解 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,…
阅读更多...
通信系统架构

通信系统架构

本博客地址&#xff1a;https://security.blog.csdn.net/article/details/136785570 一. 通信系统架构基础 1、通信网络主要形式&#xff1a;局域网、广域网、移动通信网。 二. 局域网 2、局域网网络架构通常由计算机、交换机、路由器等设备组成。特点是覆盖地理范围小、数…
阅读更多...
【医学图像处理】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版本导致…
阅读更多...
单元测试、集成测试、系统测试区别

单元测试、集成测试、系统测试区别

一、测方法不同 1、单元测试属于白盒测试范畴。 2、集成测试属于灰盒测试范畴。 3、系统测试属于黑盒测试范畴。 二、考察范围不同 1、单元测试主要测试单元内部的数据结构、逻辑控制、异常处理等。exception handling 2、集成测试主要测试模块之间的接口和接ロ数据传递关…
阅读更多...
【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创…
阅读更多...
网络安全主题

网络安全主题

网络安全主题 Python信息安全库之fsociety使用详解 https://blog.csdn.net/Rocky006/article/details/136040500 VULNCMS靶机 https://blog.csdn.net/m0_66299232/article/details/128780619 渗透测试框架-Fsociety https://blog.csdn.net/andiao1218/article/details/10119…
阅读更多...
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安装与启动 目录 一、节点的增删改查 …
阅读更多...
异常GPT：使用LVLMs检测工业异常

异常GPT：使用LVLMs检测工业异常

AnomalyGPT&#xff1a;利用LVLMs进行工业异常检测 摘要 本文介绍了一种名为AnomalyGPT的新型工业异常检测方法&#xff0c;该方法基于大型视觉语言模型(LVLMs)。AnomalyGPT能够检测并定位图像中的异常&#xff0c;无需手动设置阈值。此外&#xff0c;AnomalyGPT还可以提供与…
阅读更多...
【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;只是视频文件这个资源的来源是网络。所谓网络资源就是网络中获取数据。而所…
阅读更多...
基于Python的股票市场分析：趋势预测与策略制定

基于Python的股票市场分析：趋势预测与策略制定

一、引言 股票市场作为投资领域的重要组成部分&#xff0c;其价格波动和趋势变化一直是投资者关注的焦点。准确预测股票市场的趋势对于制定有效的投资策略至关重要。本文将使用Python编程语言&#xff0c;结合时间序列分析和机器学习算法&#xff0c;对股票市场的历史数据进行…
阅读更多...
解决Ubuntu(20.04)和Windows11双系统时间不同步问题time for ubuntu and windows

解决Ubuntu(20.04)和Windows11双系统时间不同步问题time for ubuntu and windows

Resolve the time synchronization issue between Ubuntu (20.04) and Windows 11 dual systems 解决Ubuntu(20.04)和Windows11双系统时间不同步问题 reference sudo apt-get install ntpdate sudo ntpdate time.windows.comsudo hwclock --localtime --systohc
阅读更多...
最新文章

Copyright @ 2022~2023