自学分享: JavaScript -- BOM的调用

@[TOC](JavaScript之BOM(Browser Object Model))

1.BOM

1.1 js组成

DOM:操作标签和css的方法(API)
BOM:浏览器对象模型

1.2BOM能做什么?

*操作浏览器窗口
*提供导航对象
*屏幕相关信息
*浏览器信息
*cookie

2.window

2.1认识 window

是作为浏览器端最顶层的对象.
注意:调用这个对象下的方法和属性可以不写window.
全局变量 方法都是window下面的属性 都可以写为window.a

window.open()打开一个新窗口’

window.close()关闭一个新窗口.

window.innerWidth 获取浏览器可用宽
window.innerHeight 获取浏览器可用搞

浏览器的可用宽度还可以使用:document.documentElement.clientWidth
||document.body.clientWidth

3.location对象

3.1理解

用于获取当前页面的地址，也可以操作当前页面定向到其他页面。

3.2location的属性

location.href
当前页面完成的url js跳转!回到原网页

location.protocol
url的协议部分.

location.host
主机名和端口.

location.hostname
uel的主机名

location.port
url的端口号

location.hash
锚点部分,url中以"#"开头的部分,修改锚点不会导致

location.pathname
url 的路径部分

location.search
url中的参数.以?开头的键

3.3location 方法

location.assign()
载入新文档

location.replace()
用新文档替换当前历史记录.相当于没访问过

location.reload()
重新加载

4.navigator 对象

包含浏览器所有的详细信息

5.screen对象

获取当前屏幕的信息

6.history 对象

提供读浏览器历史记录的访问能力

history.length
访问了多少个页面

history.back() 后退

history.forward()前进

history.go()
后退或前进多少步,n 是一个数值,正数代表前进多少页,负数代表后退多少页.

路由部分

history.state
获取history的堆栈,初始为空.

history.pushState (state, title, url)
state: 一个与添加的记录相关联的状态对象;
title:新页面的标题,一般浏览器会忽略，所以可以直接填空的;
url:要打开的新网址。

7、计时器(重点）

7.1 setInterval( code, delay);

理解:
按照指定的周期,重复调用函数。

code:要运行的函数或者表达式。
delay:指定的周期，单位是毫秒。

取消计时器
clearInterval(id);取消上面的计时器

7.2 setTimeout(code, delay);

理解:
在指定的时间后调用函数。调用 setTimeout会返回一个递增的数值。
code:要调用的函数或者表达式。
delay:延迟多少时间。(不循环)

取消计时器
clearTimout(id);

7.3 同步与异步

同步:按照代码编写的先后顺序执行

异步:异步代码全部丢到一边去排队,等到所有同步代码执行结束后再执行

8.模板字符串ES6

var str = ${变量名};(模板字符串)可以换行
//模板字符串
li.innerHTML =<span class="item-body">${liData.body}</span> <a href="" class="item-del" data-idn=${liData.id}>删除</a>;