1.1 BOM是浏览器对象模型
-
window是浏览器内置中的全局对象,我们所学习的所以web APIs的知识内容都是基于window对象实现的
-
window对象下包含了navigator、location、document、history、screen 5个属性,即所谓的BOM(浏览器对象模型)
-
document是实现DOM的基础,它其实是依附于window的属性。
-
注:依附于window对象的所有属性和方法,使用时可以省略window
1.2 定时器-延时函数
-
JavaScript内置的一个用来让代码延迟执行的函数,叫setTimeout
-
语法:
setTimeout(回调函数,等待的毫秒数);
-
setTimeout仅仅只执行一次,所以可以理解为就是把一段代码延迟执行,平时省略windos
let timer = setTimeout(回调函数, 等待的毫秒数); clearTimeout(timer);
-
结合递归函数可以使用setTimeout实现和 一样的功能
// 利用递归函数 模拟了setInterval let div = document.querySelector('div'); function fn() { div.innerHTML = new Date().toLocaleString(); setTimeout(fn, 1000); } fn();
setlnterval的特征是重复执行,首次执行会延时
setTimeout的特征是延时执行,只执行1次
setTimeout结合递归函数,能模拟setInterval重复执行
clearTimeout清除由setTimeout创建的定时任务
1.3 JS执行机制
js 是单线程
JavaScript 语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。这是因为Javascript这门脚本语言诞生的使命所致——JavaScript是为处理页面中用户的交互,以及操作DOM而诞生的。比如我们对某个DOM元素进行添加和删除操作,不能同时进行。应该先进行添加,之后再删除。
单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。这样所导致的问题是:如果JS执行的时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞的感觉
同步和异步
为了解决这个问题,利用多核CPU的计算能力,HTML5提出 Web worker标
准,允许JavaScript脚本创建多个线程。于是,JS中出现了同步和异步。
同步
前一个任务结束后再执行后一个任务,程序的执行顺序与任务的排列顺序是
一致的、同步的。比如做饭的同步做法:我们要烧水煮饭,等水开了(10分钟
之后),再去切菜,炒菜。
异步
你在做一件事情时,因为这件事情会花费很长时间,在做这件事的同时,你
还可以去处理其他事情。比如做饭的异步做法,我们在烧水的同时,利用这
10分钟,去切菜,炒菜。
他们的本质区别:这条流水线上各个流程的执行顺序不同。
同步任务
同步任务都在主线程上执行,形成一个执行栈。
异步任务
JS的异步是通过回调函数实现的。一般而言,异步任务有以下三种类型:
1、普通事件,如click、resize 等
2、资源加载,如 load、 error等
3、定时器,包括setlnterval、setTimeout 等
异步任务相关添加到任务队列中(任务队列也称为消息队列)。
执行顺序:
1.先执行执行栈中的同步任务。
2.异步任务放入任务队列中。
3.一旦执行栈中的所有同步任务执行完毕,系统就会按次序读取任务队列中的异步任务,于是被读取的异步任务结束等待状态,进入执行栈,开始执行。
1.4 location对象
-
location 的数据类型是对象,它拆分并保存了URL地址的各个组成部分
-
常用属性和方法:
href 属性获取完整的URL地址,对其赋值时用于地址的跳转
search属性获取地址中携带的参数,符号?后面部分
hash 属性获取地址中的啥希值,符号#后面部分 心 reload方法用来刷新当前页面,传入参数true时表示强制刷新
location的数据类型是对象,它拆分并保存了URL地址的各个组成部分
常用属性和方法:
href 属性获取完整的URL地址,对其赋值时用于地址的跳转
console.log(location.href);// 得到url地址
// 给的地址是字符串 可以利用js的方法跳转
location.href = 'http://www.itcast.cn';
location的数据类型是对象,它拆分并保存了URL地址的各个组成部分
常用属性和方法:
search属性获取地址中携带的参数,符号?后面部分
console.log(location.search);
location的数据类型是对象,它拆分并保存了URL地址的各个组成部分
常用属性和方法:
hash 属性获取地址中的哈希值,符号#后面部分
console.log(location.hash);
后期vue路由的铺垫,经常用于不刷新页面,显示不同页面,比如网易云音乐
location 的数据类型是对象,它拆分并保存了URL地址的各个组成部分
常用属性和方法:
reload方法用来刷新当前页面,传入参数true时表示强制刷新
<button>刷新</button>
<script>
let btn = document.querySelector('button');
btn.addEventListener('click', function() {
//reload() 刷新按钮 有本地缓存 强制刷新 ctrl+f5 直接更新最新内容从网上拉取,不走本地缓存
location.reload(true);
})
1.6 histroy对象
-
history的数据类型是对象,该对象与浏览器地址栏的操作相对应,如前进、
后退、历史记录等
-
常用属性和方法:
histroy对象方法 作用
back() 可以后退功能
forward() 前进功能
go(参数) 前进后退功能参数如果是1前进1个页面如果是-1后退1个页面
history对象一般在实际开发中比较少用,但是会在一些OA办公系统中见到。
三、本地存储
3.1 本地存储特性
随着互联网的快速发展,基于网页的应用越来越普遍,同时也变的越来越复
杂,为了满足各种各样的需求,会经常性在本地存储大量的数据,HTML5规
范提出了相关解决方案。
1、数据存储在用户浏览器中
2、设置、读取方便、甚至页面刷新不丢失数据
3、容量较大,sessionStorage和localStorage约5M左右
3.2 localStorage
1、生命周期永久生效,除非手动删除否则关闭页面也会存在
2、可以多窗口(页面)共享(同一浏览器可以共享)
3.以键值对的形式存储使用
存储数据:
localStorage.setItem('键','值');
获取数据:
localStorage.getItem('键');
删除数据:
localStorage.removeItem('键');
存储复杂数据类型存储
本地只能存储字符串,无法存储复杂数据类型.需要将复杂数据类型转换成JSON
字符串,再存储到本地
JSON.stringify(复杂数据类型)
将复杂数据转换成JSON字符串 存储 本地存储中 心
JSON.parse(SON字符串)
将JSON字符串转换成对象 取出 时候使用
自定义属性 固有属性:
标签天生自带的属性比如class id title等,可以直接使用点语法操作
自定义属性:
由程序员自己添加的属性,在DOM对象中找不到,无法使用点语法操作,必须使
用专门的API
getAttribute("属性名') //获取自定义属性
setAttribute('属性名'",'属性值') //设置自定义属性
removeAttribute('属性名") //删除自定义属性
// 设置自定义属性
let box = document.querySelector('.box');
box.setAttribute('myid', 10);
console.log(box.getAttribute('myid'))
data-自定义属性:
传统的自定义属性没有专门的定义规则,开发者随意定值,不够规范,所以在
html5中推出来了专门的data-自定义属性在标签上一律以data-开头
在DOM对象上一律以dataset对象方式获取
<div class="box" data-id="10"></div>
<script>
// 设置自定义属性
let box = document.querySelector('.box');
console.log(box.dataset.id);
</script>