JS 中的BOM

1、BOM：

( Browser object model 浏览器对象模型) 提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window对象。

// ​BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。

// BOM的构成; BOM 比 DOM 更大，因为它包含 DOM。

// BOM的核心对象是window, window包含document,location,navigator,screen,history

2、BOM中的location对象

2.1 什么是location 对象

// window对象给我们提供了一个location属性用于"获取"或"设置"浏览器的URL(网址),并且可以用于解析URL.因为这个属性返回的是一个对象,所以我们将这个属性也称为location对象

2.2 URL介绍

// 统一资源定位符(Uniform Resource Locaotr,URL) 是互联网上标准资源的地址. 互联网上的每个文件都有一个唯一的URL,它包含的信息指出文件的位置以及浏览器应该怎么处理它.

// url可以简单理解为是某个网址

// URL的一般语法格式如下:

// protocol://host[:port]/path/[?query]#fragment

// 一个URL由以下几部分组成:

// 组成 说明

// protocol 通信协议 常见有http://,https://,ftp://等

// host 主机(域名) 比如:www.mi.com

// port 端口号 可选,省略时会使用默认端口,比如http协议默认端口为80; https协议默认端口为443

// path 路径 由零个或者多个"/"符号隔开的字符串,一般用来表示主机上的一个目录或者文件地址 比如"/shop/buy/detail"

// query 参数 以键值对的形式 通过&符号分隔开 get请求提交数据就是这种方式

// fragment 片段 #后面内容 常见于链接 锚点

2.3 location对象的属性

// location对象属性 返回值

// ❤location.href 获取或者设置 URL

// location.protocol 获取通信协议(常见的有http: , https: )

// location.host 返回主机(域名)

// location.port 返回端口号 如果没有写, 返回空字符串

// location.pathname 返回路径

// ❤location.search 返回参数

// location.hash 返回片段# 后面内容 常见于链接 锚点

2.4 location对象的常见方法

// location对象方法 返回值

// ❤location.assign(网址) 跟location.href一样,可以跳转页面(也称为重定向页面) 记录历史,可以实现后退功能

// location.replace(网址) 替换当前页面,不记录浏览历史，所以不可以实现后退功能

// location.reload() 重新加载页面,相当于点了刷新,或者按了f5 如果参数为true,表示强制刷新ctrl+f5

2、BOM中的navigator对象

// ​navigator 对象包含有关浏览器的信息，它有很多属性，我们最常用的是 navigator.userAgent，该属性可以返回由客户机发送服务器的 user-agent 头部的值。(也就是返回当前浏览器的用户代理。)

3、BOM中的screen对象

// 手动触发指定DOM对象的指定事件

// 语法一 手动触发传统绑定方式 要记

// dom对象.on事件类型() 可以手动触发传统绑定的事件

// 比如:

// dom对象.onclick();

4、BOM中的history对象:

4.1 介绍：

// ​window对象给我们提供了一个 history对象，与浏览器历史记录进行交互。该对象包含用户（在浏览器窗口中）访问过的URL。

// 注意: 如果想要使用history对象,那么浏览器必须有历史记录

4.2 history对象方法 作用:

history.back() 实现后退1个页面

history.forward() 实现前进1个页面

❤❤❤history.go(n) 参数n为数值,可以实现前进或者后退n个页面; n如果是正值代表前进,n如果是负值代表后退; 比如 history.go(1)代表前进一个页面; history.go(-1)代表后退一个页面;

4.3 注意:

history.go(1) 等价于 history.forward()

history.go(-1) 等价于 history.back()

5、JSON数据格式

5.1 什么是JSON数据格式

// JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。由于其利于阅读和编写、同时也方便机器进行解析和生成。这使得JSON成为最理想的数据交换语言

// JSON数据格式的应用场景

// 只要有数据交换(数据交互)的地方，都会有JSON数据格式的身影。

5.2 JSON格式的定义语法

/* {

"name":"Mark",

"age":18,

"mobile":"13586007445"

} */

5.3 JSON对象与JS对象的区别

// JSON格式的数据，其键名必须使用"双引号"引起来

// JSON格式的数据，"不能出现成员方法，只能是成员属性"

// JSON格式的数据, 最后一个逗号不能写

5.4 访问JSON对象的属性

// 跟访问JS对象的属性方式一样

5.5 遍历JSON对象的属性

// 跟遍历JS对象的属性方式一样

5.6 JSON数组 

// JSON数组意思就是把JSON对象放在一个数组里面

// ❤❤❤❤❤JSON格式的字符串与JS对象的转换 

// json对象转成json字符串 JSON.stringify(json对象)

// json字符串转成json对象 JSON.parse(json字符串)