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

JavaScript(JS)的对象

news 2026/2/7 17:44:45

目录

1.array 数组对象

2.String 字符串对象

3.JSON 对象（数据载体，进行数据传输）

4.BOM 浏览器对象

5.DOM 文档对象（了解）

1.array 数组对象

定义方式1：var 变量名 = new Array(元素列表);

定义方式2：var 变量名 = [元素列表];   注：中括号

特点：长度可变 类型可变

数组常用方法：

forEach() 

 遍历数组中的每个有值的元素,并调用一次传入的函数

Push()

将新元素添加到数组的末尾,并返回新的长度

Splice()

从数组中删除元素

ES6 箭头函数：(…) => {…} 

 简化函数定义

2.String 字符串对象

方式1：var 变量名 = new String("…");

方式2：var 变量名 = "…";

注：" 和 ' 都可以定义字符串

常用方法：

charAt()

  返回在指定位置的字符

IndexOf()

检索字符串

Trim()

去除字符串两边的空格

Substring()

提取字符串中两个指定的索引号之间的字符

3.JSON 对象（数据载体，进行数据传输）

JS自定义对象定义格式：

Var 对象名 = {

属性名1: 属性值1,

…

函数名称：function(形参列表){ }

};

省略后：函数名称(形参列表){ }

案例：

调用格式：

对象名.属性名;

对象名.函数名();

JSON：

定义(JSON字符串)：

var 变量名 = '{"key1": value1, "key": value2}';

补：数组(方括号中)   

 对象(花括号中)

案例：

var userStr = '{"name": "Alice","age": 16, "addr": ["天空之城", "天之彼方", "恶魔城"]}'

JSON字符串转为JS对象

var jsObject = JSON.parse(userStr);

JS对象转为JSON字符串

var jsonStr = JSON.stringify(jsObject);

4.BOM 浏览器对象

1.window:浏览器窗口对象

获取：

window.alert("Hello Window");

alert("Hello Window");    window.  可以省略

方法：

alert();

 显示带有一段消息和一个确认按钮的警告框

confirm();

 显示带有一段消息和确认按钮和取消按钮的对话框

setlnterval();

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

setTimeout();

在指定的毫秒数后调用函数或计算表达式

案例：

2.location：地址栏对象

获取：

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

window.location.属性;

location.属性;

属性：

href：设置或返回完整的URL

案例：

5.DOM 文档对象（了解,Vue3可代替）

作用：获取元素对象，然后为进行操作元素做准备

将标记语言的各个组成部分封装为对应的对象，便于后续操作改变对象：

Document

 整个文档对象 例：<html>

Element

元素对象 例：<a>,<div>,<body>…

Attribute

属性对象 例：href="…"

Text

文本对象   就是内容的文字等

Comment

注释对象 

通过DOM操作，对HTML进行操作：

1.改变HTML元素的内容

2.改变HTML元素的样式（CSS）

3.对HTML DOM事件做出反应

4.添加和删除HTML元素

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

1.根据id 属性值获取，返回单个Element对象

var h1 = document.getElementById('h1');

2.根据标签名称获取，返回Element对象数组

var divs = document.getElementsByTagName('div');

3.根据name属性值获取，返回Element对象数组

var hobbys = document.getElementsByName('hobby');

4.根据class属性值获取，返回Element对象数组

var clss = document.getElementsByClassName('cls');

最后在网站上找对应标签的函数(方法)进行操作实现.

参考书网站：JavaScript 和 HTML DOM 参考手册

事件监听

常见事件：

onclick

 鼠标单击事件

onblur

元素失去焦点

onfocus

元素获得焦点

onload

某个页面或图像被完成加载

onsubmit

当表单提交时触发该事件

onkeydown

某个键盘的键被按下

onmouseover

鼠标被移到某元素上

onmouseout

鼠标从某元素移开

实现操作：

相关文章：

JavaScript(JS)的对象

目录 1.array 数组对象 2.String 字符串对象 3.JSON 对象&#xff08;数据载体&#xff0c;进行数据传输&#xff09; 4.BOM 浏览器对象 5.DOM 文档对象&#xff08;了解&#xff09; 1.array 数组对象 定义方式1&#xff1a;var 变量名 new Array(元素列表); 定义方式…...

编程日记 2024/12/5 0:19:28

基于BM1684的AI边缘服务器-模型转换，大模型一体机

介绍 我们属于SoC模式&#xff0c;即我们在x86主机上基于tpu-nntc和libsophon完成模型的编译量化与程序的交叉编译&#xff0c;部署时将编译好的程序拷贝至SoC平台&#xff08;1684开发板/SE微服务器/SM模组&#xff09;中执行。 注&#xff1a;以下都是在Ubuntu20.04系统上操…...

编程日记 2024/12/5 0:14:23

git推送多个仓库

在 Git 中&#xff0c;可以通过添加多个远程仓库来实现一次 git push 推送到多个仓库&#xff0c;比如同时推送到 Gitee 和 GitHub。以下是详细的设置步骤&#xff1a; 1. 添加多个远程仓库 假设你的项目已经有一个远程仓库&#xff08;例如 GitHub&#xff09;&#xff0c;你…...

编程日记 2024/12/5 0:13:21

Matlab mex- setup报错—错误使用 mex，未检测到支持的编译器...

错误日志&#xff1a; 在使用mex编译时报错提示&#xff1a;错误使用 mex&#xff0c;未检测到支持的编译器。您可以安装免费提供的 MinGW-w64 C/C 编译器&#xff1b;请参阅安装 MinGW-w64 编译器。有关更多选项&#xff0c;请访问https://www.mathworks.com/support/compile…...

编程日记 2024/12/5 0:12:20

PostgreSQL认证培训需要什么条件

PostgreSQL认证培训通常没有严格的前置条件&#xff0c;但以下几点可以帮助你更好地准备和通过认证考试&#xff1a; 1、基础知识&#xff1a;具备基本的数据库知识和经验&#xff0c;特别是对SQL有一定的了解。如果你Oracle、MySQL等基础知识&#xff0c;对对你学习PostgreSQ…...

编程日记 2024/12/5 0:11:19

Oracle—系统包使用

文章目录 系统包dbms_redefinition 系统包 dbms_redefinition 功能介绍&#xff1a;该包体可以实现将Oracle库下的表在线改为分区结构或者重新定义&#xff1b; 说明&#xff1a;在检查表是否可以重定义和开始重定义的过程中&#xff0c;按照表是否存在主键&#xff0c;参数 o…...

编程日记 2024/12/5 0:07:14

【排序用法】.NET开源 ORM 框架 SqlSugar 系列

&#x1f4a5; .NET开源 ORM 框架 SqlSugar 系列 &#x1f389;&#x1f389;&#x1f389; 【开篇】.NET开源 ORM 框架 SqlSugar 系列【入门必看】.NET开源 ORM 框架 SqlSugar 系列【实体配置】.NET开源 ORM 框架 SqlSugar 系列【Db First】.NET开源 ORM 框架 SqlSugar 系列…...

编程日记 2024/12/5 0:05:12

【SpringBoot】整合篇

1、log4j2 第一步&#xff0c;导入依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> <exclusions><!-- 去掉springboot默认配置 --> <exclusion> <…...

编程日记 2024/12/5 0:04:11

写入json和读取json文件

/// <summary> ///写入文件 /// </summary> /// <param name"Stns"></param> /// <returns></returns> public ActionResult WriteJsonFile(string Stns) { strin…...

编程日记 2024/12/5 0:01:07

Vuex的理解及使用场景

Vuex 是 Vue.js 应用中一个专门为状态管理而设计的库&#xff0c;它基于 Fluts 和 Redux 的模式。Vuex 提供了一种集中式存储管理所有组件的状态&#xff0c;并以相应的规则保证状态以一种可预测的方式发生变化。以下是 Vuex 的理解及使用场景&#xff1a; Vuex 的理解 核心概…...

编程日记 2024/12/4 23:52:58

PostGis学习笔记

– 文本方式查看几何数据 SELECT ST_AsText(geom)FROM nyc_streets WHERE name ‘Avenue O’; – 计算紧邻的街区 SELECT name,ST_GeometryType(geom) FROM nyc_streets WHERE ST_DWithin( geom,ST_GeomFromText(‘LINESTRING(586782 4504202,586864 4504216)’,26918),0.1); …...

编程日记 2024/12/4 23:51:57

Qt 窗口类型、窗口标志和窗口属性

一、窗口类型 Qt 窗口标志枚举类型用于指定小部件的各种窗口系统属性。其中一些标志取决于底层窗口管理器是否支持它们。以下是窗口类型： Qt::QWidget：这是 QWidget 的默认类型。如果它们有父级，这种类型的部件是子部件，如果没有父控件，则为独立窗口。Qt::Window：通常具…...

编程日记 2024/12/4 23:49:54

相机学习笔记——工业相机的基本参数

0、相机分类 图像颜色不同可以分为黑白相机和彩色相机&#xff1a;相同分辨率下&#xff0c;黑白工业相机相比彩色工业相机精度更高&#xff0c;检测图像边缘时&#xff0c;黑白工业相机成像效果更好。 芯片类型不同可以分为CCD相机和CMOS相机&#xff1a;CCD工业相机具有体积小…...

编程日记 2024/12/4 23:48:54

MATLAB - ROS2 ros2genmsg 生成自定义消息（msg/srv...）

系列文章目录 前言 语法 ros2genmsg(folderpath)ros2genmsg(folderpath,Name=Value) 一、说明 ros2genmsg(folderpath) 通过读取指定文件夹路径下的 ROS 2 自定义信息和服务定义来生成 ROS 2 自定义信息。函数文件夹必须包含一个或多个 ROS 2 软件包。这些软件包包含 .msg 文…...

编程日记 2024/12/4 23:47:52

【Git 操作】-- 将 fork master 分支的最新commit更新到自己的仓库

目录 1.举例 2. 配置上游仓库&#xff08;Upstream&#xff09; 3. 获取上游仓库的更新 4. 切换到你自己的 master 分支 5. 合并上游仓库的 master 分支 6. 解决冲突&#xff08;如果有的话&#xff09; 7. 推送更新到你自己的 GitHub 仓库 1.举例 当我们从 github 的 h…...

编程日记 2024/12/4 23:46:51

[高等数学学习记录] 泰勒公式

1 知识点 1.1 要求 为简化计算, 通常用多项式近似表达复杂函数: 设函数 f ( x ) f(x) f(x) 在含有 x 0 x_0 x0​ 的开区间内具有 ( n 1 ) (n1) (n1) 阶导数, 试找出一个关于 ( x − x 0 ) (x-x_0) (x−x0​) 的 n n n 次多项式 p n ( x ) p_n(x) pn​(x) 近似表达 f…...

编程日记 2024/12/4 23:45:50

我的创作纪念日—128天的坚持|分享|成长

&#x1f4ab;《博主介绍》&#xff1a;✨又是一天没白过&#xff0c;我是奈斯&#xff0c;DBA一名✨ &#x1f4ab;《擅长领域》&#xff1a;✌️擅长Oracle、MySQL、SQLserver、阿里云AnalyticDB for MySQL(分布式数据仓库)、Linux&#xff0c;也在扩展大数据方向的知识面✌️…...

编程日记 2024/12/4 23:43:49

万字长文解读深度学习——多模态模型BLIP2

&#x1f33a;历史文章列表&#x1f33a; 深度学习——优化算法、激活函数、归一化、正则化 深度学习——权重初始化、评估指标、梯度消失和梯度爆炸 深度学习——前向传播与反向传播、神经网络&#xff08;前馈神经网络与反馈神经网络&#xff09;、常见算法概要汇总 万字长…...

编程日记 2024/12/4 23:41:46

selinux与防火墙

selinux 什么是selinux SELinux 是 Security-Enhanced Linux 的缩写&#xff0c;意思是安全强化的 linux 。 SELinux 主要由美国国家安全局&#xff08; NSA &#xff09;开发&#xff0c;当初开发的目的是为了避免资源的误用。 系统资源都是通过程序进行访问的&#xff0…...

编程日记 2024/12/4 23:39:44

java基础概念47-ArrayList、LinkList和迭代器

一、ArrayList集合 1-1、ArrayList的两种添加信息的方式 1-2、ArrayList集合底层逻辑 1、利用空参创建的集合&#xff0c;在底层创建一个默认长度为0的数组 2、添加第一个元素时&#xff0c;底层会创建一个新的长度为10的数组 3、存满时&#xff0c;会扩容1.5倍。 4、如果…...

编程日记 2024/12/4 23:34:36

观成科技：隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具&#xff0c;该工具基于TUN接口实现其功能&#xff0c;利用反向TCP/TLS连接建立一条隐蔽的通信信道&#xff0c;支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式&#xff0c;适应复杂网…...

编程新知 2026/2/7 3:38:31

《Qt C++ 与 OpenCV：解锁视频播放程序设计的奥秘》

引言：探索视频播放程序设计之旅 在当今数字化时代，多媒体应用已渗透到我们生活的方方面面，从日常的视频娱乐到专业的视频监控、视频会议系统，视频播放程序作为多媒体应用的核心组成部分，扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上，用户都期望…...

编程新知 2026/2/7 13:17:38

23-Oracle 23 ai 区块链表（Blockchain Table）

小伙伴有没有在金融强合规的领域中遇见&#xff0c;必须要保持数据不可变&#xff0c;管理员都无法修改和留痕的要求。比如医疗的电子病历中&#xff0c;影像检查检验结果不可篡改行的&#xff0c;药品追溯过程中数据只可插入无法删除的特性需求&#xff1b;登录日志、修改日志…...

编程新知 2026/1/27 3:40:30

【位运算】消失的两个数字（hard）

消失的两个数字&#xff08;hard&#xff09; 题⽬描述&#xff1a;解法&#xff08;位运算&#xff09;&#xff1a;Java 算法代码&#xff1a;更简便代码 题⽬链接&#xff1a;⾯试题 17.19. 消失的两个数字 题⽬描述&#xff1a; 给定⼀个数组&#xff0c;包含从 1 到 N 所有…...

编程新知 2025/11/15 16:18:24

Objective-C常用命名规范总结

【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名&#xff08;Class Name)2.协议名&#xff08;Protocol Name)3.方法名&#xff08;Method Name)4.属性名&#xff08;Property Name&#xff09;5.局部变量/实例变量&#xff08;Local / Instance Variables&…...

编程新知 2025/12/14 22:33:06

页面渲染流程与性能优化

页面渲染流程与性能优化详解&#xff08;完整版&#xff09; 一、现代浏览器渲染流程&#xff08;详细说明&#xff09; 1. 构建DOM树 浏览器接收到HTML文档后&#xff0c;会逐步解析并构建DOM&#xff08;Document Object Model&#xff09;树。具体过程如下&#xff1a; (…...

编程新知 2026/1/31 11:58:35

C++.OpenGL （14/64）多光源（Multiple Lights）

多光源（Multiple Lights） 多光源渲染技术概览 #mermaid-svg-3L5e5gGn76TNh7Lq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3L5e5gGn76TNh7Lq .error-icon{fill:#552222;}#mermaid-svg-3L5e5gGn76TNh7Lq .erro…...

编程新知 2025/6/11 3:15:20

return this；返回的是谁

一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请&#xff0c;不同级别的经理有不同的审批权限&#xff1a; // 抽象处理者&#xff1a;审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...

编程新知 2026/1/28 21:45:43

【无标题】路径问题的革命性重构：基于二维拓扑收缩色动力学模型的零点隧穿理论

路径问题的革命性重构&#xff1a;基于二维拓扑收缩色动力学模型的零点隧穿理论 一、传统路径模型的根本缺陷 在经典正方形路径问题中&#xff08;图1&#xff09;&#xff1a; mermaid graph LR A((A)) --- B((B)) B --- C((C)) C --- D((D)) D --- A A -.- C[无直接路径] B -…...

编程新知 2025/10/21 1:07:59

GitHub 趋势日报 (2025年06月06日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 590 cognee 551 onlook 399 project-based-learning 348 build-your-own-x 320 ne…...

编程新知 2026/1/29 5:21:31