BOM

基础部分

BOM

  • BOM-（browser Object model）-浏览器对象模型。JavaScript会把浏览器 的一个标签页(即网页)作为一个对象存在于程序当中，提供了一系列的api来操作标签页本身。比如新建或关闭标签页，跳转页面、前进或后退等功能。
  • BOM本质上是相当于把一个页面当成一个对象数据放在JavaScript程序中，通过提供的api来操作页面本身。
  • 类似于DOM核心是document对象。BOM也是有一个核心对象-window.具体BOM相关的api是由window对象提供。BOM的核心就是window对象

window对象概念

  • widow对象是每一个页面都会有的对象，JavaScript程序自动生成。每个页面的window对象是不一样的。

  • window对象提供了用于操作本页面所需的所有api。值得一提的是document对象是作为window对象的一部分。

    1. console.log(window);
    2. console.log(window.document === document);true 
    3. //说明了document是window的一部分。
  • 作为window对象里的api，在使用的时候可以省略window.前缀。
    1. window.alert("123")
    2. 等同于
    3. alert("123");
  • 两者是完全等效的

window对象api

  • alert

  • prompt

  • confirm:页面上弹出一个确认框，会返回一个true或false。点击确定返回true，否则返回false

  • open:新建一个页面。不推荐使用，受浏览器的安全机制，可能无法执行。

  • close：关闭当前页面

  • setInterval

  • setTimeout

  • clearInterval

  • clearTimeout

  • innerWidth&innerHeight:用于获取页面窗口的宽度和首屏高度。

  • outerWidth&outerHeight:用于获取页面窗口的宽度和整个标签页窗口的高度(即innerHeight+浏览器的工具栏高度)。 ```javascript //close var result = confirm(‘确定是否关闭页面’); window.close();//关闭当前页面

//open window.open(“网页地址”,打开方式,”窗口的基本配置字符串”); 例子：新页面打开百度首页，宽高300，距离浏览器顶部和左边100px window.open(“http://www.baidu.com",'_blank',"width=300,height=300,top=100,left=100“)

// innerWidth innerHeith console.log(innerWidth ,innerHeight);

  4. <a name="c8dae166"></a>
  5. ## BOM 四大内置对象
  7. <a name="a79bf545"></a>
  8. ### location:
  10. - 
  11. 基础
  13.    - 
  14. 是属于window对象，location本身也是一个对象，内置了一些api能够实现刷新、跳转页面等功能，同时能够获取页面地址。
  16.    - 
  17. 基本使用
  18. ```javascript
  19. console.log(location)

  • 常用api

    • location.host获取页面地址中的主机地址
    • location.port:获取页面地址中的端口号
    • location.protocol获取页面地址中的协议名称
    • location.hostname:获取页面地址中的ip地址
    • location.search：获取页面地址中的 数据
    • location.href:获取页面的完整地址
    • location.assign():跳转到指定的页面，新建一条历史记录
    • location.replace()：跳转到指定的页面，替换当前历史记录，无法后退到上一步
    • location.reload():刷新当前页面 ```javascript //例子：http://127.0.0.1:5500/week4/day02/05-location.html?name=zs&age=12&sex=man console.log(location.host);//127.0.0.1:5500 console.log(location.port);//5500 console.log(location.protocol);//http: console.log(location.hostname);//127.0.0.1 console.log(location.search);//?name=zs&age=12&sex=man console.log(location.href);//整个地址

//跳转 location.assign(“要跳转的页面地址”) location.replace(“要跳转的页面地址”) location.href = “要跳转的页面地址”;

//刷新 location.reload();

  2.       - 基本上只能够使用，除了`href`外不能修改，
  3. - 
  4. 刷新：reload
  6. - 
  7. 跳转页面:assign  replace  href
  9. - 
  10. 获取页面地址中的数据实现多页面数据共享。
  12.    - 
  13. 结合了表单以及`location.search`来实现的。具体见week4-day02-例子代码
  15.    - 
  16. 使用location.search可能会导致传过去的数据(中文、特殊符号)乱码。
  17. ```javascript
  18. 例子：qq@qq.com 传到页面中获取输出 会显示qq%40.com
  20. //对数据进行解析，转为正确的格式,返回正确格式的字符串
  21. var str =decodeURIComponent(location.search);
  22. console.log(str);//qq@qq.com

history

  • 概念

    • 提供了页面前进或后退的api，能够实现页面的前进或后退

  • api

    • go(数字):根据数字的正负来确定是前进还是后退指定的页数。go(-1)表示后退一页，go(1)表示前进一步
    • forward():前进一页
    • back():后退一页
      1. window.history.go(-1);
      2. 等同于 history.go(-1);
      3. history.forward();
      4. history.back();

  • 应用场景

    • 比如在用户登录或注册后返回上一个访问的页面，而不是返回首页

navigator

  • 概念：收集了跟浏览器本身相关的信息，比如浏览器版本，当前操作系统的版本等。

  • 应用场景

    • 配合正则表达式，能够判断当前用户使用的浏览器版本以及是否是移动端,方便切换pc端页面或移动端页面

  • api

    • userAgent:返回浏览器的版本信息
      1. navigator.userAgent

screen

  • 概念：收集屏幕的相关信息，比如是否横屏、色彩度之类的.HTML5针对screen新增了orientation来获取屏幕的角度信息，竖屏模式角度返回0，横屏返回90
    1. console.log(screen);
    2. //显示当前屏幕旋转的角度
    3. console.log(screen.orientation.angle);// 竖屏：0 横屏：90

定时器

概念

  • JavaScript提供了两个api来实现在一段时间之后执行指定的JavaScript代码的功能
  • 根据指定js代码是否重复执行分为两种定时器：延时定时器以及间隔定时器

延时定时器：setTimeout

  • 概念：

    • 利用JavaScript内置apisetTimeout来实现在指定一段时间之后执行一次指定的 JavaScript代码。js代码执行后定时器就结束了。
  • 语法
  1. setTimeout(function(){
  2.     延时执行的js代码
  3. },延时时间)；
  5. 例子：2秒后输出延时自拍
  6. setTimeout(function(){
  7.     console.log('延时自拍');
  8. },2000)；
  1. 延时时间以毫秒为单位。1000毫秒=1秒

  • 利用内置apiclearTimeout来终止定时器的执行

    • 语法

      1. clearTimeout(定时器的标识符);
      2. 例子：暂停还未执行的定时器
      3. //timer保存了该定时器的标识符
      4. var timer = setTimeout(function(){
      5. console.log('延时自拍');
      6. },2000)；
      7. //暂停定时器
      8. clearTimeout(timer);

    • 定时器的标识符指的是定时器的id，表示要暂停哪个定时器，定时器的标识符可以通过setTimeout的返回值来得到

    • clearTimeout是定时器执行之前使用。如果定时器执行后clearTimeout是无效的。

间隔定时器：setInterval

  • 概念：能够实现每隔一段时间都会执行一次指定的代码。即如果不暂停，间隔定时器会一直执行下去。
  • 语法
  1. setInterval(function(){
  2.     每隔一段时间要执行的js代码
  3. },间隔时间)；
  4. 例子：每隔2s输出一次自拍
  5. setInterval(function(){
  6.     console.log('自拍')
  7. },2000)；
  1. 间隔时间以毫秒为单位。1000毫秒=1秒
  • clearInterval: 用于停止间隔定时器
  1. clearInterval(间隔定是器的标识符);
  2. 例子：
  3. var timer = setInterval(function(){
  4.     console.log('自拍')
  5. },2000)；
  6. //暂停
  7. clearInterval(timer);

延时定时器和间隔定时器的区别

  • 延时定时器是在一定时间后只执行一次，执行后就结束了。间隔定时器是每隔一段时间之后都会执行一次。
  • 延时定时器使用clearTimeout来停止，间隔定时器使用clearInterval来停止。