BOM

BOM的概述:

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

BOM的结构:

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 //回到顶部

相关属性

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)来渲染不同的内容(组件)

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,033评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,725评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,473评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,846评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,848评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,691评论 1 282
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,053评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,700评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,856评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,676评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,787评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,430评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,034评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,990评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,218评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,174评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,526评论 2 343

推荐阅读更多精彩内容

  • BOM是浏览器对象模型,DOM是文档对象模型;前者是对浏览器本身进行操作,而后者是对浏览器(可看成容器)内的内容进...
    learninginto阅读 287评论 0 9
  • js的组成部分 前面学习的部分是ECMAScript部分,都是基础语法部分。基础语法只是规定的代码如何写,并不能实...
    新生勿扰阅读 279评论 0 0
  • 浏览器对象模型的英文缩写。操作浏览器窗口 一、window对象:我们打开一个页面时的窗口 1.全局变量,局部变量 ...
    他在发呆阅读 378评论 0 1
  • BOM 浏览器对象模型:在Web中使用JavaScript的核心。BOM提供了操作浏览器的API接口(对象),用于...
    记录经历阅读 686评论 0 0
  • DOM 🚜 dom对象是HtmlElement类型 DOM document object model 文档对象模...
    Rikka丶阅读 310评论 1 0