BOM操作

news2024/9/23 6:14:16

JavaScript组成

在这里插入图片描述

BOM

浏览器对象模型

在这里插入图片描述

window对象 是一个全局对象,也就是JavaScript中的顶级对象

document,alert() console.log() 都是window对象的属性, 基本的BOM的属性和方法都属于window对象

通过var定义在全局作用域中的变量,函数都是window对象的属性和方法

window对象下的属性和方法调用的时候可以省略window

定时器-延迟函数

JavaScript内置的一个用来让代码延迟执行的函数,setTimeout

setTimeout(回调函数,等待的毫秒数)

仅仅只执行一次,可以理解为 就是把一段代码延迟执行,省略window

清除延时函数

let timer = setTimeout(function(){},1000)
clearTimeout(timer)

间隔函数 setInterval 每隔一段时间就执行一次,省略window

location对象

http://www.xxx.com/index?username=zs&age=12#abc

location(地址) 它拆分并保存了URL地址的各个组成部分,它是一个对象

  • href (属性)获取完整的url地址,赋值 用于地址的跳转
  • search(属性) 获取地址中携带的参数 , ?后面的部分
  • hash (属性)获取地址中的哈希值 ,#后面的部分
  • reload (方法)用来刷新当前页面,传入参数为true时表示强制刷新

navigator对象

navigator是对象,该对象记录了 浏览器自身的相关信息

常用的属性和方法:

userAgent 检测浏览器的版本及平台

// 检测 userAgent(浏览器信息)
      ;(function () {
        const userAgent = navigator.userAgent; // 验证是否为Android或iPhone
        const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/);
        const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/); 
        // 如果是Android或iPhone,则跳转至移动站点
        if (android || iphone) {
          location.href = "http://m.goudong.com";
        }
      })();

history对象

history(历史)是对象,主要管理历史记录,该对象与浏览器地址栏的操作对应,如 前进 后退

在OA办公系统中常见

常见方法:

  • back() 后退功能
  • forward() 前进功能
  • go(参数) 前进后退功能,参数如果是1 前进1个页面,如果是-1 后退1个页面

本地存储

数据存储在本地浏览器中

使用场景:https://todomvc.com/examples/duel/www/#/ 页面刷新数据不丢失

好处:

1.页面刷新或者关闭不丢失数据,实现数据持久化

2.容量较大,sessionStorage 和localStorage 5M左右

localStorage

作用:数据可以长期保留本地浏览器中,页面刷新或者关闭不丢失数据

​ 以键值对的形式存储,存储的是字符串,省略window

语法:

//存储数据
localStorage.setItem(key,value)
//读取数据
localStorage.getItem(key)
//删除数据
localStorage.removeItem(key)
存储复杂数据类型
 const goods={
            name:"小米",
            price:1999
        }
        // localStorage.setItem('goods',goods) //[object Object]
        // console.log(localStorage.getItem('goods'))  //[object Object]


        // 对象------JSON.stringify(对象)【把对象转换为json字符串】----本地存储'
        //   "{name:'小米',price:1999}"

        // let str = JSON.stringify(goods)
        // // console.log(typeof str)  //string
        // localStorage.setItem('goods',str)

        // let goodStr =localStorage.getItem('goods')
        // console.log(typeof goodStr)
        // // 本地存储---------JSON.parse(字符串)[把json字符串转换为对象]---输出
        // console.log(typeof JSON.parse(goodStr))
        // const obj=JSON.parse(goodStr)
        // console.log(obj.name)
        // console.log(obj.price)


        localStorage.setItem('goods',JSON.stringify(goods))
        console.log(JSON.parse(localStorage.getItem('goods')))

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

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

相关文章

Ruoyi单体项目与Echarts4.2.1地图集成时的思路及解决办法

目录 背景 一、相关数据 1、湖南省2021全省地区生产总值 2、湖南Geojson数据 二、Ruoyi集成设计与实现 1、自定义地图注册 2、湖南地图引用 3、图表初始化及数据绑定 4、实际效果 总结 背景 在之前博客中,介绍了Echarts和Ruoyi集成的一些博客基于Echarts2.X的…

时间序列预测 | Matlab麻雀算法(SSA)优化极限梯度提升树XGBoost时间序列预测,SSA-XGBoost时间序列预测模型,单列数据输入模型

文章目录 效果一览文章概述部分源码参考资料效果一览 文章概述 麻雀算法(SSA)优化极限梯度提升树XGBoost时间序列预测,SSA-XGBoost时间序列预测模型,单列数据输入模型 评价指标包括:MAPE、RMSE等,代码质量极高,方便学习和替换数据。要求2018版本及以上。 部分源码

Java的线程(Thread)、线程池(ThreadPool)

一、线程(Thread) 1、线程的创建 Java创建线程是采用内核线程: 由操作系统内核支持的线程,通过操纵调度器对线程进行调度(内核切换线程),将线程的任务映射到各个处理器上。 调native方法 —> 调C -> 调操作系统(通过操作…

反码与移码

反码与移码 反码的表示 反码与补码的差异是补码需要末位1 反码的性质 反码练习题 # 移码的表示 移码的性质 移码例题 原码、移码、反码之间的对应关系

Chrome将更换HTTPS的“小绿锁”图标

HTTPS 是一种用于安全地传输数据的网络协议。HTTPS 是在 HTTP 协议的基础上添加了 SSL/TLS 协议,通过对数据进行加密,从而保证数据传输的安全性。HTTPS 常用于保护敏感信息,如个人身份信息、银行账户信息、信用卡信息等。 目前市面上所有的浏…

机器学习|了解数据处理

数据处理是将数据从给定形式转换为更有用和更期望的形式的任务,即使其更有意义和信息。使用机器学习算法,数学建模和统计知识,整个过程可以自动化。这个完整过程的输出可以是任何所需的形式,如图形,视频,图…

部署 zabbix 自动发现/注册、代理服务器、高可用

目录 一、部署 zabbix 自动发现与自动注册 1.zabbix自动发现与自动注册简介 1.1zabbix 自动发现(对于 agent2 是被动模式) 1.2zabbix 自动注册(对于 agent2 是主动模式) 2.部署 zabbix 自动发现 2.1关闭防火墙 2.2确保客户…

pycharm设置自动换行

目的 项目中编写代码的时候,方便查看代码 设置自动换行 文件-设置 编辑器-常规-自动换行,在输入框中添加;*.py,如下图所示 效果

在CentOS上修改IP地址

在CentOS上修改IP地址是一项常见的任务,可以通过以下步骤完成。 注意:在进行任何网络设置更改之前,请确保您对网络配置有一定的了解,并在修改前备份相关文件,以防止意外情况的发生。 使用root或具有sudo权限的用户登录…

硬件产品经理:小IPD项目管理流程(限制版)

目录 简介 项目管理 端到端的项目管理 专栏目录 新书发布 CSDN学院 简介 今天就来谈谈项目管理这个话题。 其实关于项目管理。 我在新书《硬件产品经理:从入门到精通》中有详细讲解。 感兴趣的小伙伴可以参阅一下,这里就不再详细解释了。 今天…

C++的auto类型说明符详解 附易错实例

💯 博客内容:C读取一行内个数不定的整数的方式 😀 作  者:陈大大陈 🚀 个人简介:一个正在努力学技术的准前端,专注基础和实战分享 ,欢迎私信! 💖 欢迎大家&…

Linux--Linux的应用市场:yum

先问大家一个问题: 你下载的软件,是从手机上下载的吗? 当然不是了,我手机上要是有这个软件,直接就可以打开使用了,我还下它干嘛。 那既然不是从手机下载的,那是从哪儿下的? 应用…

在SpringBoot中对RabbitMQ三种使用方式

基于API的方式 1.使用AmqpAdmin定制消息发送组件 Autowiredprivate AmqpAdmin amqpAdmin;Testpublic void amqpAdmin(){//1.定义fanout类型的交换器amqpAdmin.declareExchange(new FanoutExchange("fanout_exchange"));//2.定义两个默认持久化队列,分别处理email和sm…

Ubuntu18.04 SoftRoCE安装教程

SoftRoCE安装教程 文章目录 SoftRoCE安装教程前言一、安装环境二、配置RXE网卡perftest 带宽测试:perftest延迟测试:测试#rping命令测试ibv_rc_pingpong命令 前言 目标:创建两台Ubuntu18.04虚拟机,安装SoftRoCE环境,一…

基于matlab使用激光雷达数据构建地图并使用SLAM算法估计车辆轨迹(附源码)

一、前言 此示例演示如何处理来自安装在车辆上的传感器的 3-D 激光雷达数据,以逐步构建地图并使用同步定位和映射 (SLAM) 估计车辆的轨迹。除了 3D 激光雷达数据外,惯性导航传感器 (INS) 还用于帮助构建地…

(02)Cartographer源码无死角解析-(75) 2D后端优化→整体复盘,理解后端优化核心

讲解关于slam一系列文章汇总链接:史上最全slam从零开始,针对于本栏目讲解(02)Cartographer源码无死角解析-链接如下: (02)Cartographer源码无死角解析- (00)目录_最新无死角讲解:https://blog.csdn.net/weixin_43013761/article/details/127350885 文…

IIC接口隔离电路ISO

IIC为例 为什么需要隔离—隔离电路电源和数据线之间的隔离 隔离电性干扰,增强抗干扰能力,保护隔离总线iic确保系统的稳定型和可靠性。避免电源串扰以及避免数字信号对模拟信号的干扰,就需要总线进行信号隔离。 就IIC而言,让master…

SQL-每日一题【584.寻找用户推荐人】

题目 给定表 customer ,里面保存了所有客户信息和他们的推荐人。 写一个查询语句,返回一个客户列表,列表中客户的推荐人的编号都 不是 2。 对于上面的示例数据,结果为: 解题思路 1.题目要求查询列表中客户的推荐人的…

【剑指offer】4.从尾到头打印链表(java)

文章目录 从尾到头打印链表描述示例1示例2思路完整代码 从尾到头打印链表 描述 输入一个链表的头节点&#xff0c;按链表从尾到头的顺序返回每个节点的值&#xff08;用数组返回&#xff09;。 如输入{1,2,3}的链表如下图: 返回一个数组为[3,2,1] 0 < 链表长度 < 100…

分享 Eclipse 常用插件(持续更新)

NO1&#xff1a; sts 点评&#xff1a;不用多说了&#xff0c;springboot/springcloud 家族必备插件 NO2&#xff1a;Eclipse Color Theme 点评&#xff1a;是时候换个主题了&#xff01; 总有一款适合你&#xff01; 这里贴上按照步骤&#xff1a; 通过 help-> Eclips…