JavaScript进阶-WebAPI（DOM网页特效-BOM操作浏览器）

二、JavaScript进阶-WebAPI

DOM-网页特效

常用事件对象属性-位置

let img = document.querySelector('img')
document.addEventListener('click', function (e) {
	console.log('clientX', e.clientX, 'clientY', e.clientY) // 获取光标相对于浏览器可见窗口左上角的位置
	console.log('pageX', e.pageX, 'pageY', e.pageY) // 获取光标相对于页面左上角的位置
	console.log('offsetX', e.offsetX, 'offsetY', e.offsetY) // 获取光标相对于当前DOM元素左上角的位置

	img.style.left = `${e.pageX}px`
	img.style.top = `${e.pageY}px`
});

页面滚动事件和页面加载事件

页面滚动事件（给document或window添加scroll事件）
　　滚动条在滚动的时候持续触发的事件
　　　　document.addEventListener(‘scroll’, function () { })
　　　　window.addEventListener(‘scroll’, function () { })
页面加载事件
　　加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件
　　　　window.addEventListener(‘load’, function () { })
　　　　注意：
　　　　　　不光可以监听整个页面资源加载完毕，也可以针对于某个资源绑定load事件
　　当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像等完全加载
　　　　window.addEventListener(‘DOMContentLoaded’, function () { })

scroll和offset和client

scroll家族

offset家族

client家族

给window注册的事件
　　　　window.addEventListener(‘resize’, function () {});
　　　　window.onresize = function () {}
　　clientWidth 获取元素的可见部分宽（不包含边框和滚动条）
　　clientWidth 获取元素的可见部分高（不包含边框和滚动条）
　　clientTop 获取左边框宽度（padding）
　　clientLeft 获取上边框宽度（padding)

BOM操作浏览器

Window对象

window对象是一个全局对象，也可以说是JavaScript中的顶级对象
像document、alert()、console.log()这些都是window的属性，基本BOM的属性和方法都是window的
所有通过var定义在全局作用域中的变量、函数都会变成window对象的属性和方法
window对象下的属性和方法调用的时候可以省略window

延时器和定时器
　　延时器
　　　　延迟一段时间之后才执行对应的代码
　　　　let timerId = setTimeout(回调函数, 延迟时间)
　　清除延时器
　　　　clearTimeout(timerId)
　　注意点
　　　　延时器需要等待,所以后面的代码先执行
　　　　每一次调用延时器都会产生一个新的延时器
　　和定时器的区别：
　　　　执行的次数
　　　　　　延时函数：执行一次
　　　　　　间歇函数：每隔一段时间就执行一次,除非手动清除

location对象
　　跳转页面
　　　　location.href // href属性获取完整的URL地址，对其赋值时用于地址的跳转
　　刷新页面
　　　　location.reload() // 传入参数true时表示强制刷新
　　?后面的内容
　　　　locaction.search // search属性获取地址中携带的参数，符号?后面部分
　　#后面的内容
　　　　locaction.hash // search属性获取地址中携带的参数，符号#后面部分

navigator对象
　　主要用来获取浏览器的信息
　　navigator.userAgent
　　　　案例: 判断设备
　　　　navigator.userAgent 在这个字段里面判断是否有Mobile字段. 如果有表示是手机,反之则表示PC

histroy对象
　　history.forward()
　　history.back()
　　history.go()

JS执行机制

js单线程
js 把任务分为：同步任务和异步任务
　　同步任务
　　异步任务：
　　　　普通事件，如 click、resize 等
　　　　资源加载，如 load、error 等
　　　　定时器，包括 setinterval、setTimeout 等
同步任务放到执行栈里面
异步任务放到任务队列里面
事件循环：event loop
　　执行执行栈里面的任务，执行完毕再去任务队列里面看看是否有任务，如果有，则得到放入执行栈中执行，再次循环

本地存储

作用：
　　可以将数据永久存储在本地(用户的电脑), 除非手动删除
　　可以多窗口共享（同一浏览器可以共享）
语法
　　存
　　　　localStorage.setItem(‘键’, ‘值’)
　　取
　　　　localStorage.getItem(‘键’)
　　删
　　　　localStorage.removeItem(‘键’)
存储复杂数据类型
　　本地只能存储字符串,无法存储复杂数据类型.需要将复杂数据类型转换成JSON字符串,在存储到本地
　　将复杂数据转换成JSON字符串
　　　　JSON.stringify(复杂数据类型)
　　将JSON字符串转换成对象
　　　　JSON.parse(JSON字符串)