js关于BOM
1.概述
BOM 是Browser Object Model的缩写,简称浏览器对象模型, 提供了独立于内容而与浏览器窗口进行交互的对象,用于访问浏览器的功能。BOM由一系列相关的对象构成,并且每个对象都提供了一些方法与属性. 我们可以通过这些属性和方法去对浏览器进行操作。
![](https://img2022.cnblogs.com/blog/1810478/202208/1810478-20220809185015036-1133527797.png)
2.window对象
1 //bom称为浏览器对象模型(bowser object model),可以获取浏览器上所有的内容及相关操作 2 //window对象 3 console.log(window);//对象和window的构造函数 4 //常用的弹窗方法及打印方法 5 window.console.log('hello')//window 可以省略 6 console.log('日志');//控制台 log日志 以日志的形式打印 7 //以错误的形式打印 8 console.error('错误'); 9 console.warn('警告'); 10 //弹窗 11 window.alert('hello') 12 var isTrue=confirm('你确定要删除吗?')//交互框 true确认 false取消 返回 13 console.log(isTrue); 14 var str=prompt('请输入你的手机号')//输入框 返回的是string类型 15 //打开 关闭 16 //第一个参数是url地址,第二个是参数为title标题 target是设置打开方式,第三个参数为设置参数的(窗口的高度 宽度等) 17 window.open('http://www.baidu.com','_blank','width=300,height=100,top=0,left=0') 18 // 移动窗口位置 19 window.moveBy(100,100) //X+100 Y+100 移动位置 20 window.moveTo(200,200) //从当前位置移动 21 //改变对应窗口大小 22 window.resizeBy(200,200)//改变大小 23 window.resizeTo(200,200) //从当前修改大小 24 //print打印方法 25 window.print() 26 window.focus()//聚焦 27 window.blur()//失去焦点 28 //滚动条栏位置改变 29 window.scrollBy(100,100)//在原本位置上面移动 30 window.scrollTo(0,550)//到达位置 回到顶部
3.location
//location console.log(location.hash); //哈希 #后面带的值和search不能同时使用 console.log(location.host); //主机 域名 ip地址+端口号 console.log(location.hostname);//主机名 ip地址 console.log(location.protocol);//协议 用于通信 (基于tcp/ip)http(明文传输)https(安全,加密) console.log(location.port);//端口号 1--65525 (1-100的端口号被电脑占用)http默认的端口号80 https默认端口443 console.log(location.href);//链接的地址,也可以设置 console.log(location.search);//?后面带的值 一般是get请求传输数据的时候 console.log(location.origin);//跨域 console.log(location.pathname);//路径名 获取的除了协议和ip地址 //使用href来跳转页面 通过更改路径地址来实现跳转 //location.href='http://www.baidu.com' //相关方法 location.assign('http://www.4399.com')//跳转页面 保存历史记录 //替换 location.replace('http://www.weibo.com')//直接替换 //重新加载页面 function fn(){ location.reload(true)//参数是boolean类型的值 true(从服务器加载) false(从缓存中加载) }
4.history
//length 历史页面个数,只能记录本页面中跳转的次数,其他页面只有在跳转到本页面后才记录 console.log(history.length);//要记 //scrollRestoration 滚动恢复属性 auto:自动 manual:手动操作 (keep-alive 缓存) console.log(history.scrollRestoration); //state 状态值 null console.log(history.state); //要记 function fn(){ history.forward()//前进 } function fn1(){ history.back()//后退 } function fn2(){ history.go(1)//去任意页面,0就是自己,小于0,后退,大于0前进 } function fn3(){ //添加state的值 数据 "" 地址 history.pushState('hello','','./index.html') //会改变地址,但是不会刷新,会推一个页面到历史区,价值更高 } function fn4(){ history.replaceState('world','','dizhi')//会改变地址,但是不会刷新,在历史区直接修改当前这个页面 }
5.hash
window.onhashchange=function(){ console.log('hash值变了'); } window.onpopstate=function(){ console.log('路由改变了'); } function fn(){ history.pushState('hello','') }
6.frame screen navigator
console.log(frames);//所有的iframe标签 实际返回一个window console.log(screen);//宽高属性 //多端适配 1.媒体查询 2,rem 3.实时设置 console.log(screen.availHeight);//高属性 可占用最大的高度 console.log(screen.availWidth);//宽属性 可占用最大的宽度 //获取浏览器及系统的相关内容 console.log(navigator); console.log(navigator.userAgent);//用户浏览设置信息
7.路由:前端路由、后端路由
- 后端路由:根据对应的接口地址来访问不同的功能(后端路由restful风格(接口的风格))
- 前端路由:根据不同的访问路径(path)来渲染不同的内容(组件)
1.页面路由(跳转页面,刷新操作)
location.href
location.assign()
location.replace()
history.back()
history.forward()
2.hash路由(使用hash来实现,后面必须要带上# ,不会刷新页面
通过hash的改变来改变对应的渲染内容(时间监听 onhashchange)
3.H5路由(history里面state进行监听)(常用SPA(单页应用程序))
history.pushState()加一个历史页面(地址变了,不会刷新)
history.replaceState()替换历史页面(地址变量 不会刷新)
也是通过事件进行监听(onpopstate)
在对应的框架学习中,路由的底层写法主要采用hash以及H5的方式(vue react)默认是路由模式hash vue中路由有几种模式
hash模式和history模式