千锋教育JavaScript全套视频教程（10天学会Js，前端javascrip
BOM
概述
BOM (Browser Object model 浏览器对象模型)，主要是对应的浏览器内容的相关操作对象。它缺乏规范，利用共有对象来解决每个浏览器不一致的问题。
BOM主要的内容
- window 浏览器窗口
- location 地址栏 *
- history 历史对象 *
- navigator 导航对象
- screen 屏幕对象
- document 文档对象
- frames 子窗口对象实际它也是一个window
window对象
window对象是浏览器global对象，它表示浏览器的窗口。里面具备相关方法及内容。所有的全局属性及对应的全局方法都是它的子内容。bom其他的相关内容都是window的子元素（属性）。
属性
- caches 浏览器缓存
- crypto 浏览器的加密模块
- indexedDB 浏览器的数据库
- innerHeight,innerWidth 浏览器显示区域的宽高
- localStorage,sessionStorage 浏览器的本次存储
- console 浏览器控制台对象
- ....
js 复制代码 //相关属性 console.log(window.caches) //浏览器缓存 console.log(window.clientInformation) //客户端详情 返回一个navigator对象 console.log(window.closed) //是否关闭 console.log(window.crypto) //加密包 console.log(window.indexedDB) //浏览器自带数据库 （存储其他地方存储不了的数据 存储数据大） console.log(window.innerHeight,window.innerWidth) //获取窗口的高度 获取窗口的宽度 显示内容部分 console.log(window.localStorage) //本地存储 console.log(window.sessionStorage) //本地存储 console.log(window.console) //获取控制台对象 console.log(window.document) console.log(window.history) console.log(window.location) console.log(window.frames)
方法 （window对象可以被省略）
打印相关方法
js
复制代码
//打印相关的方法
console.log('日志打印')
console.debug('调试打印')
console.error('错误打印')
console.info('信息打印')
console.dir('文件打印')
console.warn('警告打印')
//清空控制台
console.clear()
弹窗相关方法
- alert
- confirm
- prompt
js
复制代码
alert('信息弹窗')
//输入弹窗 返回输入的字符串
var str = prompt('输入弹窗')
console.log(str)
//交互弹窗 接收一个boolean类型的值 点击确认返回true 点击取消返回false
var is = confirm('您是否要删除')
console.log(is)
打开和关闭窗口的方法
- open
js
复制代码
//打开窗口
//相关配置
// width=1024 窗口宽度；
// height=700 窗口高度；
// top=0 窗口距离屏幕上方的象素值；
// left=0 窗口距离屏幕左侧的象素值；
// titlebar=no 是否显示标题栏，被忽略，除非调用HTML应用程序或一个值得信赖的对话框.默认值是yes；
// menubar=no 表示菜单栏，默认值是yes；
// scrollbars=yes 是否显示滚动条，默认值是yes；
// resizable=no 是否允许改变窗口大小，默认值是yes；
// status=no 是否要添加一个状态栏，默认值是yes；
// toolbar=no 是否显示工具栏，默认值是yes；
// location=no 是否显示地址栏，默认值是yes；
//打开窗口url地址 相关打开方式（_self 自身打开 _blank 新的页面） 窗口的相关配置
window.open('http://www.baidu.com','_blank','width=20,height=40,top=0,left=0')
- close 关闭自身的窗口
js 复制代码 window.close()
窗口位置移动的方法
- moveTo 传入对应的x，y坐标移动到这个坐标
js 复制代码 //100,100 window.moveTo(200,200) //移动到坐标200,200的位置
- moveBy 传入对应的需要移动的距离 在原本的基础上移动这个距离
js 复制代码 //100,100 window.moveBy(200,200) //移动到坐标300,300的位置
窗口大小的更改的方法
- resizeTo 传入对应的宽高 更改到这个宽高的大小
js 复制代码 //100,100 window.resizeTo(200,200) //200,200
- resizeBy 传入对应的宽高 在原本的大小上增加对应的宽高
js 复制代码 //100,100 window.resizeBy(200,200) //300,300
滚动栏的位置更改 (x,y)
- scrollTo 传入x,y坐标移动到这个坐标
js 复制代码 //50,50 window.scrollTo(100,100) //滚动栏距离到100,100
- scrollBy 传入移动的距离在原本基础上移动对应的距离
js 复制代码 //50,50 window.scrollBy(100,100) //滚动栏距离到150,150
print 打印方法
dart 复制代码 window.print()
获取焦点和失去焦点的方法
js 复制代码 window.focus() //获取焦点 window.blur() //失去焦点
定时器和延时器
js
复制代码
window.setInterval(function(){},1000,'传递的参数')
window.clearInterval('定时器id')
window.setTimeout(function(){},1000,'传递的参数')
window.clearTimeout('延时器id')
延时器
js 复制代码 window.setImmediate //等待其他执行完再执行
location
location表示是地址栏对象，主要作用是设置地址栏内容及获取地址栏内容。
属性（所有属性都是可读可写）
- hash #号后面的值
- host 主机
- hostname 主机名
- href: 地址路径
- origin 跨域地址
- pathname 路径名
- port 端口号
- protocol 协议
- search ?后面携带的参数
js 复制代码 console.log(location) // #号后的值 #一般都存在于最后面 console.log(location.hash) //域名 相当于ip地址+端口号 localhost表示本机它的IP为127.0.0.1 console.log(location.host) //ip地址 console.log(location.hostname) //地址的链接 console.log(location.href) //跨域地址 console.log(location.origin) //路径地址 去除对应的ip地址+端口号的剩余内容 console.log(location.pathname) //端口号 1-65525 （1-100的端口一般被系统占用） http协议默认端口为80 https的默认端口为443 console.log(location.port) //超文本传输协议 网络请求访问常用 http 不安全 https 安全 console.log(location.protocol) //?后面的值 ?用于传递参数的 ?key=值&key=值 console.log(location.search) //location是可以设置的 location.hash = "hello" location.search = 'name=tom' // location.port = 9999 location.proctocol = "https" //没作用 location.hostname = "127.0.0.1" //href location的链接地址 设置href可以使页面跳转 没有历史记录 // location.href = "http://www.baidu.com" location = "http://www.baidu.com" //跟href属性是一致的
方法
- reload 重新加载
- assign 跳转页面
- replace 替换href地址跳转页面
js
复制代码
//重新加载
location.reload()
// 历史原因 可以会传入对应的boolean类型的值 true表示重新加载 false表示从缓存中加载
location.reload(true)
// assign 跳转页面的 有历史记录的
location.assign('http://www.baidu.com')
// 替换当前href地址 没有历史记录
location.replace('http://www.baidu.com')
history
history是历史对象，主要是用于操作对应的历史页面的。
属性 （只读）
- state 状态值
- length 历史页面个数
- scrollRestoration 滚动恢复属性
js 复制代码 console.log(history.state) //状态值 默认为null console.log(history.length) //历史页面个数 console.log(history.scrollRestoration)//滚动栏位置缓存选项 滚动恢复属性
方法 （不会进行刷新操作）
- pushState 将历史页面推入（设置state的值）
- replaceState 将历史页面替换 （设置state的值）
js
复制代码
/* pushState replaceSate 三个参数 设置给state的数据 打开的页面名字（""） 链接地址
pushState 推入一个历史页面 这个页面地址会替换当前的页面地址 但是不会进行页面刷新操作 state的值会发生变化 历史页面个数+1
replaceState 替换当前的历史页面 这个页面地址会替换当前的页面地址 也不会进行刷新操作 state的值会发生变化 历史页面个数不会变化
*/
//相关方法
function fn(){
history.pushState('hello','','./state.html')
console.log(history.length) //2
console.log(history.state) //hello
}
function fn1(){
history.replaceState('hi','','./state.html')
console.log(history.length) //1
console.log(history.state) //hi
}
- forward 前进
- back 后退
- go 历史页面跳转
html 复制代码 <!-- 前进后退和跳转 --> <button onclick="history.forward()">前进</button> <button onclick="history.back()">后退</button> <!-- go方法里面传入的是对应的数值 0为当前页面 大于为0为前进 小于0为后退 --> <button onclick="history.go(-1)">跳转</button>
navigator
浏览器的导航对象，主要是描述当前浏览器的信息及相关内容。
相关属性
userAgent 携带发生给对应的服务器
js 复制代码 console.log(navigator.appName) //当前应用名 console.log(navigator.appCodeName) //应用编码名 console.log(navigator.appVersion) //应用版本 console.log(navigator.userAgent) //客户端相关信息
screen
浏览器的屏幕对象，主要是用于获取当前的屏幕大小。（大屏可视化）
属性
- width 宽度
- height 高度
- availHeight 可占用高度
- availWidth 可占用宽度
js 复制代码 //宽度和高度 console.log(screen.width); console.log(screen.height); //可占用宽度和高度 console.log(screen.availHeight); console.log(screen.availWidth);
document
表示当前的文档对象，也就是书写的html文档。
frames
表示子窗口，实际也是一个window对象
总结
- bom是利用共有对象来实现对应的兼容。主要的对象有window，history , screen , navigator, document、frames、location。
- history主要是用于操作历史页面的，里面的方法都不会进行刷新操作。（back、forward、go 、pushState 、replaceState）
- location 主要是用于操作对应的地址栏 里面的属性都可以进行设置（hash、query）。 主要的方法有（reload、assign、replace）。
- screen主要是屏幕对象，它可以获取屏幕相关内容。
- navigator是导航对象，主要可以获取浏览器的相关内容及外设。
- bom基础是路由的底层实现（主要用到了location 及 history）
跳转页面的几种方式
- a标签跳转页面
- location赋值
- location.href赋值
- location.assign()
- location.replace()
- history.go()
- history.back()
- history.forward()
