day06-BOM操作浏览器

webApi

day06-BOM操作浏览器

目标： 能够利用JS操作浏览器,具备利用本地存储实现记录用户名的能力

window

1. window对象是一个全局对象，也可以说是JavaScript中的顶级对象

2. 像document、alert()、console.log()这些都是window的属性，基本BOM的属性和方法都是window的。

3. 所有通过var定义在全局作用域中的变量、函数都会变成window对象的属性和方法

4. window对象下的属性和方法调用的时候可以省略window

延时器和定时器

延时器

延迟一段时间之后才执行对应的代码

let timerId = setTimeout(回调函数, 延迟时间)

清除延时器

####### clearTimeout(timerId)

注意点

####### 延时器需要等待,所以后面的代码先执行

####### 每一次调用延时器都会产生一个新的延时器

定时器

区别:执行的次数

延时函数: 执行一次

间歇函数:每隔一段时间就执行一次,除非手动清除

案例：阅读协议倒计时

location对象

主要负责网页的地址栏

location.href

跳转页面

location.reload()刷新

locaction.search

?后面的内容

locaction.hash

#后面的内容

案例-5秒钟之后页面自动跳转

navigator对象

主要用来获取浏览器的信息

navigator.userAgent

案例: 判断设备

navigator.userAgent 在这个字段里面判断是否有Mobile字段. 如果有表示是手机,反之则表示PC

histroy对象

管理历史记录

history.forward()

history.back()

history.go()

JS执行机制

面试要问的

js单线程

js 把任务分为 同步任务和异步任务

同步任务

####### let num = 10

异步任务

####### 定时器

####### 事件 click

####### load 加载

####### ajax

同步任务放到执行栈里面

异步任务放到任务队列里面

事件循环 event loop

执行执行栈里面的任务，执行完毕再去任务队列里面看看是否有任务，如果有，则得到放入执行栈中执行，再次循环

swiper

插件: 就是别人写好的一些代码,我们只需要复制对应的代码,就可以直接实现对应的效果

学习插件的基本过程

熟悉官网,了解这个插件可以完成什么需求

https://www.swiper.com.cn/

看在线演示,找到符合自己需求的demo

https://www.swiper.com.cn/demo/index.html

查看基本使用流程

https://www.swiper.com.cn/usage/index.html

查看APi文档,去配置自己的插件

https://www.swiper.com.cn/api/index.html

注意: 多个swiper同时使用的时候, 类名需要注意区分

PC端和移动端

使用插件完成 小兔鲜儿轮播图案例

本地存储

作用: 可以将数据永久存储在本地(用户的电脑), 除非手动删除

语法

存

localStorage.setItem(‘键’, ‘值’)

取

localStorage.getItem(‘键’)

删

localStorage.removeItem(‘键’)

存储复杂数据类型

本地只能存储字符串,无法存储复杂数据类型.需要将复杂数据类型转换成JSON字符串,在存储到本地

转换成JSON字符串的语法

JSON.stringify(复杂数据类型)

####### 将复杂数据转换成JSON字符串

JSON.parse(JSON字符串)

####### 将JSON字符串转换成对象

学生信息表本地存储版本

自定义属性

固有属性: 标签天生自带的属性 比如class id title等, 可以直接使用点语法操作

自定义属性: 由程序员自己添加的属性,在DOM对象中找不到, 无法使用点语法操作,必须使用专门的API

getAttribute(‘属性名’) // 获取自定义属性

setAttribute(‘属性名’, ‘属性值’) // 设置自定义属性

removeAttribute(‘属性名’) // 删除自定义属性

data-自定义属性

传统的自定义属性没有专门的定义规则,开发者随意定值,不够规范,所以在html5中推出来了专门的data-自定义属性

在标签上一律以data-开头

在DOM对象上一律以dataset对象方式获取