BOM

简介: BOM

Bom 称为浏览器对象模型(bowser object model),也就意味他可以获取浏览器上的所有内容以及相关的操作。BOM缺乏规范的,存在共有对象来解决这个问题,但是共有对象也存在兼容问题(ie10以后)
d2e28b33fde8b43dbff51c573cc77789_28335994-662b3da5a19de4df.png

概述: window是顶层对象 属于golbal对象。他是所有全局变量的父亲。
// window //对象
console.log(window);//window 对象 Window的构造函数
//常用的弹窗方法及打印方法
window.console.log('hello')//console.log() window可以省略的
console.log('日志')//控制台 log日志 以日志的形式打印
console.error('错误')//以错误的形式打印
console.warn('警告')//以错误的形式打印
console.debug('测试')//以错误的形式打印
console.info('信息提示')//以错误的形式打印
//弹窗
window.alert('hello')//弹提示窗
var isTrue=confirm('你确认要删除吗')//交互框 true确认 false取消 返回
console.log(isTrue);
var str=prompt('请输入你的手机号')//输入框 他会有个输入框让你输入返回对应的你输入的内容 (string的内容)
console.log(str);
//打开 open 关闭 close
// 第一个参数是url地址 第二个参数为title target(打开方式 _blank _self _parent) 第三个参数为设置的参数(窗口的高度 宽度等等)
window.open('http://www.baidu.com','_blank','width=300,height=100,top=0,left=0')
//   height=100 窗⼝⾼度;
//   width=400 窗⼝宽度;
//   top=0 窗⼝距离屏幕上⽅的象素值;
//   left=0 窗⼝距离屏幕左侧的象素值;
//   toolbar=no 是否显⽰⼯具栏,yes为显⽰;
//   menubar,scrollbars 表⽰菜单栏和滚动栏。
//   resizable=no 是否允许改变窗⼝⼤⼩,yes为允许;
//   location=no 是否显⽰地址栏,yes为允许;
//   status=no 是否显⽰状态栏内的信息(通常是⽂件已经打开),yes为允许;
window.close()//关闭当前的窗口 (关闭浏览器只能有一个页面)
//moveBy 一个是x轴的距离 y轴的距离
window.moveBy(100,100)//X+100 Y+100
//moveTo 一个x轴 一个y轴
window.moveTo(200,200)//X=200 Y=200
//改变对应的窗口大小
window.resizeBy(200,200)//width+200 height+200
//resizeTo
window.resizeTo(200,200)//width=200 height=200
//print打印方法
window.print()
聚焦和失焦的方法
//focus 聚焦 blur 失去焦点
window.focus()
window.blur()
//find查找 ctrl+f
window.find()
滚动栏位置改变
//滚动栏位置改变 初始位置 x:0,y:0
window.scrollBy(100,100)//原本的位置 x+100,y+100
window.scrollTo(500,500)//到达位置 x=500 y=500 //回到顶部
innerHeight 和 innerWidth
parent
location对象 (
console.log(location.hash)//哈希 #后面带的值

console.log(location.host)//主机 域名 ip地址+端口号
console.log(location.hostname)//主机名 ip地址 (127.0.0.1表示本机地址和localhost是一样的)
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地址加端口号后面的东西
assign 跳转页面
location.assign('http://www.baidu.com')
replace 替换页面
location.replace('http://www.weibo.com')
reload 重新加载页面
location.reload()
//参数 boolean类型的值 true(从服务器加载 慢) false (从缓存中加载 快)
history对象 (

属性
length 历史页面个数
state 状态存储的对象
scrollRestoration 滚动栏恢复
方法
forwad 前进
functionfn(){
history.forward()//前进
back 后退
functionfn1(){
history.back()//后退
go 去任意的历史页面
functionfn2(){
history.go(-1)//去任意页面 0就是自己 小于0 后退 大于0前进
pushState
//spa 单页应用
functionfn3(){
//添加state的值 数据 "" 地址(会产生跨域问题)
history.pushState('hello','','./index.html')//会改地址 但是不会刷新 推一个历史页面到历史区 state设置进去
replaceState
functionfn4(){
//替换state
history.replaceState('world','','/location对象讲解.html')//会改地址 但是不会刷新 在历史区直接修改当前这个历史页面 state设置进去
screen 对象
属性
avaliHeight 可占用的最大高度
avaliWidth 可占用的最大宽度
avaliLeft 离屏幕左侧的距离
avaliTop 离屏幕上方的距离
navigator对象
属性
userAgent 用户浏览器设置信息
路由 (扩展)
对应的开发者来说 路由是一个很重要的东西。(前端路由)(后端路由)
后端路由
根据对应的接口地址来访问不同的功能 (后端路由 restful风格(接口的风格))
前端路由
根据不同的访问路径 (path)来渲染不同的内容(组件)

相关文章
|
存储 Prometheus Kubernetes
「译文」Prometheus 中的 relabel 是如何工作的?
「译文」Prometheus 中的 relabel 是如何工作的?
|
11天前
|
人工智能 自然语言处理 语音技术
智谱开源GLM-ASR:动动嘴,活就干了
智谱发布并开源GLM-ASR系列语音识别模型,推出桌面端AI输入法。包含云端旗舰模型GLM-ASR-2512与端侧轻量版GLM-ASR-Nano-2512(仅1.5B参数),实现高精度、低延迟、强隐私保护的语音转写。输入法集成大模型能力,支持语音指令、翻译、改写、人设切换、Vibe Coding等功能,让用户“动嘴干活”,提升办公效率。现已免费开放体验。
290 0
|
编解码 物联网 API
"揭秘SD文生图的神秘面纱:从选择模型到生成图像,一键解锁你的创意图像世界,你敢来挑战吗?"
【10月更文挑战第14天】Stable Diffusion(SD)文生图功能让用户通过文字描述生成复杂图像。过程包括:选择合适的SD模型(如二次元、2.5D、写实等),编写精准的提示词(正向和反向提示词),设置参数(迭代步数、采样方法、分辨率等),并调用API生成图像。示例代码展示了如何使用Python实现这一过程。
586 4
|
存储 自然语言处理 JavaScript
鸿蒙next字符串基础:掌握字符串操作与多语言支持
本文深入介绍了鸿蒙(HarmonyOS)开发中字符串处理的基础知识和高级技巧。涵盖字符串资源管理、多语言支持、基本操作(如拼接、替换、分割和大小写转换)以及在用户界面和交互中的应用。通过合理管理和使用字符串资源,提升应用的用户体验和国际化水平。
695 3
|
SQL 缓存 关系型数据库
如何优化分页查询的性能?
【8月更文挑战第3天】如何优化分页查询的性能?
704 37
|
API 云计算 开发者
使用宜搭平台带来的便利:技术解析与实践
【9月更文第8天】随着企业信息化建设的不断深入,业务流程自动化的需求日益增长。宜搭平台作为一种高效的应用构建工具,为企业提供了快速搭建各类业务系统的可能。本文将探讨使用宜搭平台给企业和开发者带来的便利,并通过具体的代码示例展示其优势。
439 11
|
机器学习/深度学习 数据采集 算法
推荐引擎离线算法与在线算法的探索与实践
推荐引擎是现代互联网产品中至关重要的组成部分。离线算法和在线算法分别负责处理大量数据的预处理和模型训练,以及快速响应用户的实时请求。通过合理的架构设计和算法选择,可以构建出高效且个性化的推荐系统,从而提升用户体验,增加用户满意度和留存率。未来,随着技术的发展,推荐引擎将更加智能化和个性化,为用户提供更加精准的服务。
|
机器学习/深度学习 自然语言处理 语音技术
使用Python实现深度学习模型:智能语音助手与家庭管理
使用Python实现深度学习模型:智能语音助手与家庭管理
500 0
|
运维 网络协议 网络架构
|
SQL Oracle 关系型数据库
利用 SQL 注入提取数据方法总结
利用 SQL 注入提取数据方法总结