[JavaScript知识库]Web APIs 第六天 BOM

1.BOM介绍

BOM：浏览器对象模型

? window最大，包括了document

? naviagter：浏览器对象

? location:地址栏对象

? history：历史记录对象

? screen：屏幕对象

2.定时器-延时函数

? 一次性函数

? 开启定时器：setTimeout(函数，时间)；

? 关闭定时器：把它赋值给一个变量，然后clearTimeout(变量)

3.递归函数

? 在自己函数内部调用自己的函数叫递归函数

? 例如：function fn () {

? fn();

? }

? fn();

? function fn (n) { //打印出来的是3

? if (n === 0) {

? return;

? }

? fn(n-1);

? console.log(n);

? }

fn(3);

4.JS执行机制

? 同步：等这个执行完才执行下一个，依次执行下一个

? 异步：同时执行

? 区别：各个流程的执行顺序不同

? 执行机制：先执行执行栈里的，在执行执行队列里的异步任务

5.location地址栏对象

? location.href='地址'；href属性用于获取完整的URL地址，对他赋值用于地址的跳转

? search属性获取地址中携带的参数，就是？后边部分

? hash属性获取地址的哈希值，#后边的部分

? reload属性用来刷新页面，参数为true时强制刷新

? 加载指定的URL：location.assign('htttp:www.jd.com')

? 替换指定的URL：location.replace('http:www.jd.com')

? 区别：assign跳转之后可以返回，replace不会返回到原页面 assign可以产生历史记录，replace不会

6.navigator浏览器对象

? 记录了浏览器自身的相关信息

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

7.history历史记录对象

? history.length：统计浏览的个数

? history.back()；可以后退到浏览的下一个页面

? history.forward()；可以前进一个浏览器的页面

? history.go(参数)；可以是正数(前进)，可以是负数(后退)

8.swiper插件

? 轮播图的插件

? 步骤：(1)下载swiper

? (2)在package里面找到min.css和min.js引入到html中

? (3)可以修改轮播图改成自己想用的样式

? 注意：多个类名同时使用的时候想要不同的效果要加类名

9.本地存储

? 声明周期永久有效，关闭浏览器也有效，除非手动删除

? 存数据：localStorage.setItem('键','值');

? 取数据：localStorage.getItem('键');

? 删数据：localStorage.removeItem('键');

? 本地存储只能存储字符串，无法存储复杂数据类型(对象/数组)，要转换为本地字符串，存储到本地

? 把对象转换为字符串：localStorage.setItem('键',JSON.stringify(obj));

? 把字符串转化为对象：JSON.parse(JSON字符串)

? 存储数据如果有多个同属性的，下面的会覆盖上面的

? 获取不到数据，就会显示null

10.自定义属性

? 自己定义的属性，可以随意定义，最好用data-xxx

? （一）获取属性值：getAttribute('属性名')

? 设置属性值：getAttribute('属性名'，'值')

? 删除属性：removeAttribute('属性名')

? （二）如果属性名是data-xxx，以data-开头的

? 获取属性值：DOM对象.dataset.xxx

? 设置属性值：DOM对象.dataset.xxx = '值'