JavaScript BOM 操作 & 定时器

1、BOM

1.1 JavaScript 组成

• ECMAScript(ES3 ES5 ES6 ES7 ES8 ):
  核心语法: 条件判断 | 循环 | 函数 | 变量 | 运算符

• DOM: 操作HTML标签和 CSS 的方法(API)

• BOM: 浏览器对象模型

1.2 BOM 能做什么?

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

2、window 对象

2.1 认识

window 作为浏览器端 最顶层 对象

 
注意: 调用这个对象下的方法和属性可以不用写 window.

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

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

  	window.innerWidth 获取浏览器可用宽高

  	window.innerHeight 获取当前浏览器可用高度

浏览器的可用宽度测量方法还可以使用：

  	document.documentElement.clientWidth

  	document.body.clientWidth

3、location 对象

3.1 理解

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

3.2 location 的属性

location.href
当前页面完整的 url；

  // JS 跳转页面
  location.href = 'http://www.baidu.com';

location.protocal
url 的协议部分；
 
location.host
主机名和端口；
 
location.hostname；
url 的主机名.
 
location.port
url 中的端口号
 
location.hash
锚点部分, url 中以 '# '开头的部分
 
location.pathname
url 的路径部分, 以 / 开头部分
 
location.search
url 中的参数, 以 ? 开头 的键值对字符串, 格式: ?键 = 值 & 键 = 值.

3.3 location 方法

location.assign()
载入新文档。
 
location.replace()
用新文档替换当前历史记录。
 
location.reload()
重新载入。
//可以做页面刷新

4、navigator 对象

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

• onLine: ture 当前有网；

• onLine: false 当前没有网；

• userAgent: 用户浏览器信息；

5、screen 对象

获取当前显示器信息；

6、history 对象

提供对浏览器历史记录的访问功能
 

history.length
访问了多少个页面
 
history.back()
后退
 
history.forward()
前进.
 
history.go(n)
获取 前进/后退 步数, n 是一个数值, 正数代表前进多少页, 负数代表后退多少页.
 
路由部分：
history.state
 
得到history 的一个堆栈;
初始为 null
 
history.pushState(state,title, url);

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

7、计时器

7.1 setInterval

setInterval(code, delay)
 
按照指定的周期,重复调用函数。
调用 setInterval 时会返回一个数值；

• delay: 指定的周期,单位是毫秒.
• code: 要运行的函数或执行体;
   

clearInterval(id)
 
取消 对应 setInterval 返回的 id 的计时器

  	var timer = setInterval(code, delay)
  	
  	clearInterval(timer)

7.2 setTimeout（延时调用）

setTimeout(code, delay);
 
在指定的时间后调用函数.调用 setTimeout 会返回一个 数值；

• code: 要调用的函数 或者 表达式.
• delay: 延迟多少时间.

 

clearTimeout(id)
取消 对应 setTimeout 返回的 id 的计时器

  	var timer = setTimeout(code, delay)
  	
  	clearTimeout(timer)

7.3 同步异步

同步：
 
简单理解就是按照代码编写的先后顺序执行
 
异步：
 
简单理解就是,异步代码全部丢到一边去排队, 等到所有代码执行结束后再执行。

 
setInterval 和 setTimeout 是异步。

8、前端的持久性存储

8.1、Storage – 本地存储

sessionStorage
 
临时性存储，关闭当前浏览器后就会清除。
 

• sessionStorage.getItem(key) // 获取存储，key 是键名
• sessionStorage.setItem(key, value) // 设置存储，key 是键名，value 是键值
• sessionStorage.removeItem(key) // 移除存储，key 是键名
   

注意： value 只能是字符串；
 
如果需要存储其他数据，则需要通过一个方法将其他类型的数据转为字符串：

  	JSON.stringify(数据)

  	// 取出来的时候通过以下方法转为
  	Number()
  	JSON.parse() 字符串转对象

8.2 localStorage – 永久存储

永久性存储，除非是手动删除。

• localStorage.getItem()
• localStorage.setItem()
• localStorage.removeItem

---

相关文章

• ECMAScript - 初识 ECMAScript
• JavaScript - 初识 DOM
  ……

---