BOM的概述及方法
BOM的概述:
bom 称为浏览器对象模型(bowser object model),也就意味他可以获取浏览器上的所有内容以及相关的操作。BOM缺乏规范的,存在共有对象来解决这个问题,但是共有对象也存在兼容问题(ie10以后)
window
概述: 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 //回到顶部
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 前进
function fn(){
history.forward() //前进
}
back 后退
function fn1(){
history.back() //后退
}
go 去任意的历史页面
function fn2(){
history.go(-1) //去任意页面 0就是自己 小于0 后退 大于0前进
}
pushState
//spa 单页应用
function fn3(){
//添加state的值 数据 "" 地址(会产生跨域问题)
history.pushState('hello','','./index.html') //会改地址 但是不会刷新 推一个历史页面到历史区 state设置进去
}
replaceState
function fn4(){
//替换state
history.replaceState('world','','/location对象讲解.html') //会改地址 但是不会刷新 在历史区直接修改当前这个历史页面 state设置进去
}
screen 对象
属性
avaliHeight 可占用的最大高度
avaliWidth 可占用的最大宽度
avaliLeft 离屏幕左侧的距离
avaliTop 离屏幕上方的距离
navigator对象
属性
userAgent 用户浏览器设置信息
下面是BOM的一个思维导图
BOM的概述及方法的更多相关文章
- js-DOM ~ 04. BOM:浏览器对象模型window. 、定时器、在线用户、祝愿墙、BOM的内置方法内置对象
multiple. select列表多选 触发事件后调用有参数的函数要先创建一个函数,然后在函数内调用执行函数 Array.from(伪数组):伪数组变为真数组 indexOf():查询字符的索引 a ...
- 解释BOM头和去掉方法
http://www.thinkphp.cn/topic/2592.html 以上是叫你去掉bom头的,因为有些文件加载不出来就是window会以记事本的形式打开,然后默认给我们加了了bom头,有些文 ...
- Java基础知识强化82:Random类概述和方法使用
1. Random类 public class Random extends Object implements Serializable: 此类的实例用于生成伪随机数流.此类使用48位种子. (1) ...
- DOM 和 BOM 的 对象 和方法
DOM 对象 有 documet event element attlibute 方法 getElementById getElementsBytagname getElementsB ...
- dom&bom的起源,方法,内容,应用
Document Object Model的历史可以追溯至1990年代后期微软与Netscape的"浏览器大战"(browser wars),双方为了在JavaScript与JSc ...
- BOM主要对象属性方法总结
BOM window对象 浏览器实例,全局对象 1.窗口位置: screenTop,screenLeft(screenX,screenY):窗口相对于屏幕左边和上边的位置 moveTo(x,y):将窗 ...
- 【C# IO 操作 】详解去掉字符顺序标记(BOM)头的方法
类似WINDOWS自带的记事本等软件,在保存一个以UTF-8编码的文件时,会在文件开始的地方插入三个不可见的字符(0xEF 0xBB 0xBF,即BOM).它是一串隐藏的字符,用于让记事本等编辑器识别 ...
- Upstart概述引导方法事件驱动的任务和服务
/********************************************************************* * Author : Samson * Date ...
- Java基础知识强化89:Date类之Data类概述及其方法
1. Date类概述 类Date表示特定的瞬间,精确到毫秒 2. 构造方法 public Date():根据当前默认毫秒值创建日期对象 public Date(long date):根据给定的毫秒值创 ...
- 一步步优化JVM一:概述、方法及需求
现代JVM是一个具有灵活适应各种应用能力的软件,尽管很多应用能够在JVM的默认配置下运行良好,但是有些应用还是需要优化JVM配置以达到其性能要求.由于各种各样的应用能够运行在现在JVM上面,所以大量的 ...
随机推荐
- Mamba安装
wget https://github.com/conda-forge/miniforge/releases/latest/download/Mambaforge-pypy3-Linux-x86_64 ...
- 代码行数统计(指定目录下所有文件的Line)
遍历文件夹计算文件行数(Windows) 主要使用的是 FindFirstFile. FindNextFile函数寻找子目录下的文件,使用 WIN32_FIND_DATA(文件属性) 结构体 #def ...
- SQL Server性能优化
源代码文件 1,什么是性能问题? 现有资源没有达到最大吞吐量的前提下,系统不能满足合理的预期表现,则可以定义为有性能问题.性能指标包括:响应时间,吞吐量,可扩展性. 2,初探优化 2.1优化论 一般遇 ...
- 自定义函数式@FunctionalInterface异常接口
1.添加注解 /** * 抛出异常函数接口 * * @author liunancun * @date 2021/2/5 */ @FunctionalInterface public interfac ...
- 睿爸信奥-【临阵磨枪】练习赛(第二场)- T2
目录 题面 code 题面 徐老师在[睿爸信奥]里面颇受学生欢迎,有一天校长石老师想要搞个最受欢迎老师投票,徐老师就很想拿到这个奖.假设有 名候选者,有 人参加了投票,与以往不同的是,这次所有得票数超 ...
- MySQL 常用命令(4)------mysqladmin命令详解
mysqladmin是一个执行管理操作的客户端程序.它可以用来检查服务器的配置和当前状态.创建和删除数据库等. mysqladmin 工具的使用格式: mysqladmin [option] comm ...
- aspx页面,Page_Load 无人进入,解决
又一次copy放的错误,今天必须记录一下. 当你不需要走后台时候,ready 就有限制了. ready放的位置有问题.下面是错误示范. <script src="../ToExamin ...
- 2022-04-18内部群每日三题-清辉PMP
1.在为一个有预算限制的项目生成状态报告时,项目经理发现该项目比进度计划落后一周.若要将项目拉回正轨,项目经理应该怎么做? A.重新分配关键路径活动的团队成员. B.向项目发起人要求额外的时间. C. ...
- Fastreport 如果值相同合并单元格
在fastreport 中设置text的属性即可 效果如下
- linux三权分立账号创建
系统管理员 创建系统管理员(sys用户)并设置密码 [root@localhost ~]# useradd sys [root@localhost ~]# passwd sys 创建组并将用户添加到组 ...