JavaScript(JS)的对象

目录

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

鼠标从某元素移开

实现操作:

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

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

相关文章

Cannot resolve symbol ‘ActivityThread‘ | Android 语法

背景 ActivityThread 是 Android 系统内部使用的一个类,它位于 android.app 包中,但在 Android SDK 的公共 API 中并没有公开。 由于 ActivityThread 是隐藏的内部类,因此在编写单元测试或功能开发时,无法直接引用它。可以使用反射来访问内部 API,或者使用依赖注入的方式…

AI论文速读 | TimeXer:让 Transformer能够利用外部变量进行时间序列预测

题目&#xff1a; TimeXer: Empowering Transformers for Time Series Forecasting with Exogenous Variables 作者&#xff1a;Yuxuan Wang ; Haixu Wu&#xff08;吴海旭&#xff09; ; Jiaxiang Dong ; Yong Liu ; Yunzhong Qiu ; Haoran Zhang ; Jianmin Wang&#xff08;…

Zustand的学习和应用

Zustand 是一个轻量级的状态管理库&#xff0c;适用于 React 应用程序。它以简单易用、高性能和无模板代码的特性受到开发者的喜爱。 https://zustand.docs.pmnd.rs/guides/tutorial-tic-tac-toe 以下是 Zustand 的核心特点和用法简介&#xff1a; Zustand 核心特点 轻量简…

【从零开始的LeetCode-算法】3274. 检查棋盘方格颜色是否相同

给你两个字符串 coordinate1 和 coordinate2&#xff0c;代表 8 x 8 国际象棋棋盘上的两个方格的坐标。 以下是棋盘的参考图 如果这两个方格颜色相同&#xff0c;返回 true&#xff0c;否则返回 false。 坐标总是表示有效的棋盘方格。坐标的格式总是先字母&#xff08;表示列…

常见问题QA的前端代码

这个的后端代码参见此文 使用语言向量建立常见问题的模糊搜索-CSDN博客https://blog.csdn.net/chenchihwen/article/details/144207262?spm1001.2014.3001.5501 这段代码实现了一个简单的问答页面&#xff0c;页面分为左右两部分&#xff0c;左侧用于展示对话记录&#xff0c…

互联网 Java 面试八股文汇总(2025 最新整理)

我分享的这份 Java 后端开发面试总结包含了 JavaOOP、Java 集合容器、Java 异常、并发编程、Java 反射、Java 序列化、JVM、Redis、Spring MVC、MyBatis、MySQL 数据库、消息中间件 MQ、Dubbo、Linux、ZooKeeper、 分布式 &数据结构与算法等 25 个专题技术点&#xff0c;都…

CTF之密码学(密码特征分析)

一.MD5,sha1,HMAC,NTLM 1.MD5&#xff1a;MD5一般由32/16位的数字(0-9)和字母(a-f)组成的字符串 2.sha1&#xff1a;这种加密的密文特征跟MD5差不多&#xff0c;只不过位数是40&#xff08;sha256&#xff1a;64位&#xff1b;sha512:128位&#xff09; 3.HMAC&#xff1a;这…

Linux 入门——基本指令2

目录 1. 通配符的使用 1&#xff09;基本使用 2&#xff09; 拓展使用 2. cp 文件拷贝 基本使用 3. mv :文件剪切或者文件重命名 4. more 指令 5. less 指令 6. cat ,more , less 指令的区别 7. head 8. tail 9. date 日期&#xff0c;时间相关的指令 1&…

2024年12月3日Github流行趋势

项目名称&#xff1a;Lobe Chat 项目维护者&#xff1a;arvinxx, semantic-release-bot, canisminor1990, lobehubbot, renovate项目介绍&#xff1a;一个开源的、现代化设计的人工智能聊天框架。支持多种AI提供商&#xff08;OpenAI / Claude 3 / Gemini / Ollama / Qwen / De…

vue2+cesium初始化地图

目录 1、在vue2项目中下载cesium 2、安装loader 3、更改vue.config.js中的配置 4、main.js中引入 5、App.vue中设置样式 6、新建map.vue 其中代码如下&#xff1a; 7、在App.vue中使用Map组件 8、效果展示&#xff1a; 1、在vue2项目中下载cesium npm install cesium 可…

CTF-PWN: WEB_and_PWN [第一届“吾杯”网络安全技能大赛 Calculator] 赛后学习(不会)

附件 calculate.html <!DOCTYPE html> <html lang"en"> <head><!-- 设置字符编码为 UTF-8&#xff0c;支持多语言字符集 --><meta charset"UTF-8"><!-- 设置响应式视图&#xff0c;确保页面在不同设备上自适应显示 --&…

TYUT设计模式精华版

七大原则 单一职责原则 职责要单一不能将太多的职责放在一个类中 开闭原则 软件实体对扩展是开放的&#xff0c;但对修改是关闭的 里氏代换原则 一个可以接受基类对象的地方必然可以接受子类 依赖倒转原则 要针对抽象层编程&#xff0c;而不要针对具体类编程 接口隔离原则 …

Android 使用OpenGLES + MediaPlayer 获取视频截图

概述 Android 获取视频缩略图的方法通常有: ContentResolver: 使用系统数据库MediaMetadataRetriever: 这个是android提供的类&#xff0c;用来获取本地和网络media相关文件的信息ThumbnailUtils: 是在android2.2&#xff08;api8&#xff09;之后新增的一个&#xff0c;该类为…

论文阅读——量子退火Experimental signature of programmable quantum annealing

摘要&#xff1a;量子退火是一种借助量子绝热演化解决复杂优化问题的通用策略。分析和数值证据均表明&#xff0c;在理想化的封闭系统条件下&#xff0c;量子退火可以胜过基于经典热化的算法&#xff08;例如模拟退火&#xff09;。当前设计的量子退火装置的退相干时间比绝热演…

Vue框架开发一个简单的购物车(Vue.js)

让我们利用所学知识来开发一个简单的购物车 &#xff08;记得暴露属性和方法&#xff01;&#xff01;&#xff01;&#xff09; 首先来看一下最基本的一个html框架 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"&…

瑞芯微方案主板Linux修改系统串口波特率教程,触觉智能RK3562开发板演示

遇到部分串口工具不支持1500000波特率&#xff0c;这时候就需要进行修改&#xff0c;本文以触觉智能RK3562开发板修改系统波特率为115200为例&#xff0c;介绍瑞芯微方案主板Linux修改系统串口波特率教程。 温馨提示&#xff1a;瑞芯微方案主板/开发板串口波特率只支持115200或…

攻防世界-fileclude-文件包含

赛前回顾 1.题目打开后是文件包含的代码&#xff0c;如下 函数作用 highlight_file(__FILE__) //显示代码到网页 isset //检查变量是否存在并且非null(空) !empty //php内置函数&#xff0c;检查变量是否为空或未设置&#xff0c;正常变量为空会触发&#xff0c;但是有个…

039集——渐变色之:CAD中画彩虹()(CAD—C#二次开发入门)

&#xff08;来左边儿 跟我一起画个龙&#xff0c;在你右边儿 画一道彩虹 ~~~~~~~~~~~ &#xff09; 效果如下&#xff1a; 以下展示部分颜色源码&#xff1a; namespace AcTools {public class Class1{public Wform.Timer timer;//定时器需建在类下面public s…

Spark和MapReduce场景应用和区别

文章目录 Spark和MapReduce场景应用和区别一、引言二、MapReduce和Spark的应用场景1. MapReduce的应用场景2. Spark的应用场景 三、MapReduce和Spark的区别1. 内存使用和性能2. 编程模型和易用性3. 实时计算支持 四、使用示例1. MapReduce代码示例2. Spark代码示例 五、总结 Sp…

泛化调用 :在没有接口的情况下进行RPC调用

什么是泛化调用&#xff1f; 在RPC调用的过程中&#xff0c;调用端向服务端发起请求&#xff0c;首先要通过动态代理&#xff0c;动态代理可以屏蔽RPC处理流程&#xff0c;使得发起远程调用就像调用本地一样。 RPC调用本质&#xff1a;调用端向服务端发送一条请求消息&#x…