JsDay14

最新推荐文章于 2022-09-01 17:44:59 发布

undyue

最新推荐文章于 2022-09-01 17:44:59 发布

阅读量83

点赞数

本文链接：https://blog.csdn.net/undyue/article/details/106039331

版权

一、BOM

0.复习

js的三大组成部分
- BOM（浏览器），DOM（页面），ECMAScript（语法）
- 关系
  - ECMAScript（语法）规定，在 BOM（浏览器）中，如何操作 DOM（页面），做什么交互

1.什么是BOM

概念
- BOM：浏览器对象模型，是个模型，这个模型由一个对象window来体现（具象）
- 作用：
  - 提供了ES和页面的运行环境
  - 浏览器的一些规定，首先需要在ES的基础之上设置，但是最终生效时，以浏览器的标准为主
    - 浏览器的规范没有涉及到的范围，使用ES的规范
    - 宪法：ES，地方法规：浏览器的规定
    - 浏览器 > ES ×
    - 兼容:
      - 不是兼容问题的兼容问题：
        alert(1);
        功能一致，没有兼容
        每个浏览器显示的样式都不一样
window的具体功能和作用
- window：窗口
- window提供的窗口或窗口与窗口之间的操作
- 因为所有内容都运行在浏览器中，所以，window也是浏览器的js中的顶层（大boos）对象
  - 所有的全局变量和函数，都属于window
  - window在使用过程中可以省略
  - 注意，严格模式下，全局函数如果省略window，会导致全局函数中的this指向undefined

方法（内置全局函数）

弹出框三兄弟
- 弹出信息框：alert()
- 弹出对话框：prompt()
- 弹出选择框：confirm()
- 注意原理，将来会使用html+css+js模拟
页面的打开和关闭
- open()
- close()
- 注意：
  - 尽量配合行为适用，不要直接执行
  - 而且某些浏览器还有兼容性
计时器
- 计时器（定时器）（重复执行）
  - 开
    - setInterval()
    - 功能：每隔参数2的时间，执行一次参数1的函数
    - 参数：参数1：函数；参数2：毫秒数
    - 返回值：当前计时器的唯一标志，是个数值，只有一个作用：用来清除当前计时器！！！
    - 是否改变原数据：否
```
var t = setInterval(function(){
    console.log("hello");
}, 1000);
```
  - 关
    - clearInterval()
    - 功能：用来关闭计时器
    - 参数：要关闭的计时器的返回值所在的变量！切记，变量！
    - 返回值：无
    - 是否改变：否
```
document.onclick = function(){
    clearInterval( t );
};
```
- 延时器（延迟，一次）
  - 开
    - setTimeout()
    - 功能：延迟参数2的时间，执行一次参数1的函数
    - 参数：参数1：函数；参数2：毫秒数
    - 返回值：当前延时器的唯一标志，是个数值，只有一个作用：用来清除当前延时器！！！
    - 是否改变原数据：否
```
var t = setTimeout(function(){
    console.log("hello");
}, 5000);
```
  - 关
    - clearTimeout()
    - 功能：用来关闭延时器
    - 参数：要关闭的延时器的返回值所在的变量！切记，变量！
    - 返回值：无
    - 是否改变：否
```
document.onclick = function(){
    clearTimeout( t );
};
```

事件（内置全局事件）

window浏览器事件
- load：加载
  - window.onload不仅是页面的加载，还在等待资源的加载
  - document.onload仅仅是页面的加载
- resize：改变大小
- scroll：滚动
语法：
- 事件源.on事件名 = 事件处理函数
- 如：btn.onclick = function(){}
- 如：window.onlaod = funciton(){}
- 如：onlaod = funciton(){}

子对象（内置对象）

history：历史记录
- 控制浏览器的前进后退刷新等于历史记录相关的功能
- 不方便在代码中临时测试，所以在浏览器打开其他页面测试
- 属性：
  - 历史记录的个数：history.length
- 方法：
  - 前进：history.forward()
  - 后退：history.back()
  - 前进或后退指定的步数：history.go(num); num为正前进，为负后退，0刷新
location：地址url
- 控制浏览器的地址栏的内容
- 不方便在代码中临时测试，所以在浏览器打开其他页面测试
- 属性：
  - 既可以获取又可以设置：当前页面的地址，设置之后，页面会自动跳转
    - js实现跳转的方式：
    - location.href
  - 既可以获取也可以设置：当前页面地址中向后台发送的数据部分（?后的部分），页面也会跳转
    - location.search
  - 既可以获取也可以设置：当前页面地址的锚点连接（哈希值，#后的部分），页面也会跳转
    - location.hash
- 方法：
  - 重新加载当前地址，意味着刷新了
    - location.reload()
  - 跳转方法，必须传参，空字符刷新，指定地址会跳转
    - location.assign("")
navigator：浏览器信息（了解）
- 以下测试是在Mac OS X 10_15_4系统的Chrome/81.0.4044.129浏览器进行的测试
- navigator.userAgent：浏览器信息
  - “Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.129 Safari/537.36”
- navigator.appName：浏览器名字（废弃）
  - “Netscape”
- navigator.appVersion：浏览器版本
  - “5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.129 Safari/537.36”
- navigator.appCodeName：浏览器内核
  - “Mozilla”
- navigator.platform：运行系统
  - “MacIntel”
screen：屏幕尺寸（了解）
- 显示器的分辨率
frames：框架（了解）
- 需要配合frame使用
document：文档（DOM，重中之重点）

补充（…）

获取页面的可视（看得见的区域）区域的大小
- document.documentElement.clientWidth
- document.documentElement.clientHeight
- 只能获取，不能设置
获取滚走的了距离
- document.documentElement.scrollTop
- document.documentElement.scrollLeft
- 既能获取，又能设置