1.BOM概述
BOM：Browser Object Model浏览器对象模型
在代码中渲染展示 页的浏览器，通过对象的形式模拟出来
BOM结构
Location对象：访问 址信息
| 属性 | 描述 |
|---|---|
| hash(*) | url 址中的锚连接，如#chapter（） |
| host(*) | url 址中的主机地址，可以显示为ip地址或者域名，如www.baidu.com |
| hostname | url 址中的主机名称 |
| href(*) | 浏览器窗口中输入url地址 |
| pathname（*） | url 址中访问资源的路径，一般指代主机域名后面的部分，如/index.html |
| port(*) | url 址访问端口，如http:80、http:443、ftp:21、ssh：22、mysql：3306 |
| protocal | 址访问协议，如http超文本传输协议、https安全超文本传输协议、ftp文件传输协议 |
| search（*） | 址中的参数数据，如d =55&ct=22 |
Navigator浏览器信息
| 属性 | 描述 |
|---|---|
| appCodeName | 浏览器软件内核程序名称，如Mozilla |
| appName | 浏览器软件内核名称、如Netspace |
| appVersion | 浏览器软件内核版本，如5.0（window NT 6.1；win64 x64）Applew |
| language | 浏览器当前语言环境，如zh-cn |
| platform | 浏览器安装的操作系统平台，如win32 |
| uerAgent | 浏览器代理标识，如Mozilla/5.0(…) |
History浏览历史信息
| 属性 | 描述 |
|---|---|
| go() | 让浏览器进入某个历史记录，浏览器查看历史记录然后访问 页 |
| back() | 浏览器浏览历史后退，模仿浏览器左上角向左按钮 |
| forword() | 浏览器浏览历史前进，模仿浏览器左上角向右按钮 |
2.Window对象
Bom对象，描述了浏览器窗口/对象模型，本身就是指代浏览器窗口
| 函数 | 描述 |
|---|---|
| window.alert(msg) | 弹出一个警告对话框，对话框属于浏览器窗口，可以省略window |
| window.confirm(msg) | 弹出一个确认对话框 |
| window.prompt(msg,dat) | 弹出一个交互对话框 |
| window.myFunctionn() | 调用一个声明的全局函数 |
| window.open(url) | 打开一个新的窗口 |
| window.close() | 关闭当前窗口 |
3.浏览器元素定位
| 名称 | 描述 |
|---|---|
| document.documentElement.clientWidth ,document.body.clientWidth |
获取浏览器可视窗口宽度 |
| document.documentElemment.clientHeight ,document/body.cientHeight |
获取浏览器可视窗口高度 |
| document.body.offsetWidth | 获取 页文旦那个完整宽度 |
| document.body.offsetHeight | 获取 页文档的完整高度 |
4.浏览器事件操作
| 事件名称 | 描述 |
|---|---|
| window.onload | 文档加载事件，HTML 页中所有数据加载完成后才会触发 注：如果这些代码需要在 页中所有数据加载后再之心那个，就把代码放在这个事件函数中 |
| window.onscroll | 滚动条事件，浏览器窗口检测到滚动条（水平、垂直）位置发生变化时就会触发执行 可以通过document.documentElement.scrollTop获取滚动条卷去 页的高度 |
| windo.onnresize | 浏览器窗口尺寸调整事件，一旦浏览器窗口大小发生拖动变化，该事件就会触发 这个事件经常用来做响应式处理 |
5.案例：吸顶导航菜单
移步吸顶导航菜单
6.案例：随机小球
移步：滚动的小球
后续根据此案例开发打砖块小游戏
7.案例：懒加载
移步页面图片的懒加载
声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！