BOM
Borwser Object Model --- 浏览器对象模型
顶级对象：window
window对象 包含的对象
1. 浏览器的信息 navigator对象
navigator对象 包含的对象：
// 以下内容以Chorm浏览器为例
// 1.1 返回浏览器的代码名 --- 内核名称
console.log(window.navigator.appCodeName); // Mozilla
// 1.2 返回浏览器的名称
console.log(window.navigator.appName); // Netscape
// 1.3 返回浏览器的平台和版本信息
console.log( window.navigator.appVersion );
// 1.4 返回浏览器用于 HTTP 请求 的 用户代理 头部的值
console.log(window.navigator.userAgent);
2. 浏览器的历史记录 history对象
history对象 包含的对象：
// 2.1 返回到上一个页面
history.back()
// 2.2 前进到下一个页面
history.forward()
// 2.3 前进/返回到若干页面
history.go(参)
//参数指定页数 如 -2 则返回到上上个页面
3. 浏览器的地址栏信息 location对象
location对象 包含的对象：
// 3.1 设置或返回地址栏中完整的url
// 设置url --- 跳转页面
window.location.href = 'https://www.baidu.com/'
// 设置属性值时 用引号包裹 用等号连接属性 下同
// 返回当前url
window.location.href()
// 3.2 设置或返回地址栏中的锚点
// 设置锚点 --- 不会跳转页面
window.location.hash = '#abc'
// 应用场景：通过改变锚点来切换到nav栏对应的内容
// 返回当前地址栏中的url
window.locaton.hash()
// 3.3 设置或返回地址栏中的数据
window.location.search = '?abc=123&def=456'
// 数据的格式：?键=值&键=值
// 地址栏内容的组成：文档路径 + 数据 + 锚点
// 返回当前地址栏中的数据
window.location.search()
// 3.4 网页重定向 --- 跳转网页
window.location.assign('https://www.baidu.com/')
// 3.5 用指定地址替换当前地址 --- 跳转网页
window.location.replace('https://www.baidu.com/')
// 3.6 重新加载本页面 --- 刷新
window.location.reload()
4. 浏览器窗口的尺寸
返回浏览器窗口的高度
window.innerHeight
返回浏览器窗口的宽度
window.innerHeight
[返回值的单位为像素]
[计算范围包括滚动条区域]
[应用场景：用JS手动实现媒体查询]
解码、编码
原由：地址栏默认会将符号、汉字进行url编码
// 编码 encodeURI('目标字符')
// 解码 decodeURI(‘编码’)
案例：
var code = encodeURI('前端学习')
// 编码
console.log(code); // %E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0
// 解码
console.log(decodeURI(code)); // 前端学习
定时器
延迟定时器
setTimeout(参1,参2)
[参1指定要执行的函数 参2指定延迟时间]
[返回值为数字 意为 第num个定时器]
[只执行一次]
间隔定时器
setInterval(参1,参2)
[参1指定要执行的函数 参2指定每次执行之间的时间间隔]
[返回值为数字 意为 第num个定时器]
[默认死循环执行]
关闭定时器
clearTimeout(定时器id/定制器的返回值)
clearInterval(定时器id/定制器的返回值)
