…browser浏览器对象模型,操作的是浏览器窗口。window是最顶端的对象。js三大组成= ECMAScript(ECMA)+BOM+DOM(W3C)
BOM
- 基本概念
(1) 全局变量都是window对象的属性,使用时可以省略window对象
(2) 若函数内没有通过var声明的变量,会被当做全局变量
(3) 把变量声明在函数内部
(4) 避免全局污染,全局变量起名字不要起name、top
(5) 避免命名冲突
(6) 一般window的方法可以省略window的调用,例如window,alert()可以省略window
(7) window对象本身存在的属性及事件,调用的时候尽量不要省略window的调用
(8) 不要对window本身存在的属性赋值 !!!
(9) 全局变量无法用delete删除
- window的属性及方法
(1) 浏览器窗口尺寸
① window.innerWidth / window.innerHeight
a) 表示浏览器窗口”可视区域”尺寸
② window.outerWidth/window.outerHeight
a) 表示浏览器窗口尺寸
(2) 与滚动相关
① window.scrollX/scrollY
a) 获取浏览器窗口的高度
② window.scrollTo(x,y)
a) 设置浏览器滚动到的位置
③ window.scrollBy(x,y)
a) 设置相对于当前滚动位置滚动的距离(往左、上为负值,往右、下为正值)
- window对象常用事件
(1) window.onscroll 浏览器滚动条滚动时触发函数
window.onscroll = function(){}
(2) window.onload 等待页面加载完毕后触发
(3) window.onresize 屏幕尺寸改变时触发
- 系统弹窗
(1) alert() 弹窗
(2) prompt(msg,默认值) 输入框,返回值为消息或者是null
(3) confirm(msg) 确认框,返回值为布尔值
(4) open(url) 打开一个新窗口并返回新 window 对象
(5) close() 关闭本窗口
(6) print() 调出打印对话框
- 属性对象
(1) Document 文档对象
a) 可以在js脚本中直接访问访问页面元素
(2) history 历史对象,包含窗口的浏览历史,可以实现后退
属性:length返回浏览器历史列表中的URL数量
方法:back()加载 history 列表中的前一个 URL
forward() 加载 history 列表中的下一个 URL
go() 加载 history 列表中的某个具体页面,支持负数。
a) history.go(2);//向前两个页面
b) history.go(-2);//后退两个页面
(3) location 保存文档的相关信息
1. href 设置或返回完整的URL
2. hash 设置或返回从(#)开始的URL(锚)==>哈希值
3. search 设置或返回从问好(?)开始的URL(查询部分),URL的参数
a) encodeURI(); //转码
b) decodeURI(); //解码
(4)navigator 导航对象, 包含所有有关访问者浏览器的信息,通常用于检测浏览器类型
1. appName 浏览器名称
2. appVersion 浏览器版本
3. platform 操作系统
4. userAgent 用户代理信息,通过该属性可以获取浏览器及操作系统信息
5. geolocation 获取地理位置信息