BOM操作

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或iPhoneconst 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.hqwc.cn/news/14156.html

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

相关文章

从开机开始

1. 开机之后,计算机干了什么? 加载BIOS:计算机通电后,基本输入/输出系统(BIOS)会首先运行。BIOS是一个固件程序,它位于计算机主板上的芯片中,并负责初始化硬件设备、检测和解决问题…

106、基于STM32单片机万年历闹钟温度LCD1602系统设计(程序+原理图+PCB源文件+参考论文+开题报告+硬件设计资料+元器件清单等)

摘 要 本文介绍了基于STM32单片机的多功能电子万年历的硬件结构和软硬件设计方法。本设计由数据显示模块、温度采集模块、时间处理模块和调整设置模块四个模块组成。系统以STM32单片机为控制器,以串行时钟日历芯片DS1302记录日历和时间,它可以对年、月、…

Redis缓存同步1-策略介绍

缓存数据同步策略示意图 在大多数情况下,我们通过浏览器查询到的数据都是缓存数据,如果缓存数据与数据库的数据存在较大差异的话,可能会产生比较严重的后果的。所以,我们应该也必须保证数据库数据、缓存数据的一致性,…

Django_MVT(二)

目录 一、MVT简介 二、M-模型类 1. 定义模型类 2. 迁移 2.1 生成迁移文件命令如下: 2.2 执行迁移命令如下: 3. 数据基础操作 三、V-视图 1.定义视图 2.配置URLconf 访问服务器 四、T-模板 创建模板文件 定义模板 视图调用模板 视图调用模…

Ubuntu 的移动梦醒了

老实讲,移动版 Ubuntu 在手机、平板上的发展自始至终可能都没有达到过 Canonical 的期望,既然如此,不再勉为其难地坚持下去,或许才是更加明智的做法。 时至今日,官方显然也意识到了这一点,在早些时候发布的…

Linux安装配置Oracle+plsql安装配置(超详细)

注意:本文有大量的界面截图,如观看效果不佳可前往文字版: Linux安装配置Oracleplsql安装配置(详细)_超爱慢的博客-CSDN博客 目录 1 安装虚拟机系统 1.1 安装虚拟机 2.配置虚拟机 2.1 设置机器名 2.2 修改域名映射…

【编译原理】词法分析程序设计(C语言)

目录 一、实验内容二、实验原理三、结果分析四、源代码一、实验内容 给定下表所示的一个简单语言的词法规则描述完成以下任务: (1)画出识别该语言词法规则的状态转换图; (2)依据状态转换图,设计并编制词法分析程序,实现从输入源程序中,识别出各类单词,即关键字、标识…

keepalived

文章目录 一、suse系统安装keepalived1.1、准备环境1.2、修改主机名1.3、关闭防火墙1.4、配置网络1.5、配置 yum 源1.6、安装 mysql1.7、安装 keepalived报错信息:使用 wget 下载keepalived 报错解决 使用 wget 下载 keepalived的报错 一、suse系统安装keepalived …

Oracle表空间和用户

Oracle表空间和用户 前言 1、创建表空间 2、 删除表空间 3、创建用户 4、用户赋权限 5、Oracle三个重要的角色 1、创建表空间 ORACLE 数据库的逻辑单元。 一个表空间可以与多个数据文件(物理结构)关联 一个数据库下可以建立多个表空间,一个表…

什么是操作系统

操作系统(Operating System) 什么是操作系统 操作系统是一组做计算机资源管理的软件的统称。目前常见的操作系统有:Windows系列、Unix系列、Linux系列、OSX系列、Android系列、iOS系列、鸿蒙等 操作系统的定位 操作系统的基本功能 操作系统由…

Vue3setup的参数说明

setup的两个参数 setup包含两个参数&#xff0c;一个为props、一个为context &#xff08;均为形参&#xff09; props&#xff1a;值为对象&#xff0c;包含&#xff1a;组件外部传递过来&#xff0c;且组件内部声明接收了的属性。context&#xff1a;上下文对象 <scrip…

基于springboot+Redis的前后端分离项目之消息队列(六)-【黑马点评】

&#x1f381;&#x1f381;资源文件分享 链接&#xff1a;https://pan.baidu.com/s/1189u6u4icQYHg_9_7ovWmA?pwdeh11 提取码&#xff1a;eh11 秒杀优化、消息队列 秒杀优化1 秒杀优化-异步秒杀思路2 秒杀优化-Redis完成秒杀资格判断3 秒杀优化-基于阻塞队列实现秒杀优化 Red…