JavaScript 内容总结(DOM和BOM)(三)BOM基础

2022-07-11 13:54:23

JavaScript 内容总结（JavaScript高级程序设计）

  1. BOM概述
  2. window对象的常见事件
  3. 定时器
  4. JS执行机制
  5. location对象
  6. navigator对象
  7. history对象

1.BOM概述

  • 浏览器对象模型，提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window

    DOM BOM
    文档对象模型 浏览器对象模型
    把文档当作一个对象来看待 把浏览器当作一个对象来看待
    *对象是document *对象是window
    操作页面元素 浏览器窗口交互
    W3C标准规范 浏览器厂商在各自浏览器上定义的，兼容性较差

  • BOM构成

    BOM比DOM更大，它包含DOM

    window：document、location、navigation、screen、history

  • window对象：浏览器*对象

    1. 它是JS访问浏览器窗口的一个接口
    2. 它是一个全局对象，定义在全局作用域中的变量、函数都会变成window对象的属性和方法
    3. 在调用的时候可以省略window
    4. 声明变量最好不要用name，因为name为window自带的特殊属性

2.window对象的常见事件

  • 窗口加载事件： window.onload，当文档内容完全加载完成会触发该事件（包括图像、脚本文件、css文件等），就调用的处理函数

    <body><!--由于页面从上到下解析 解析到body才会渲染页面 如果把js写在前面 页面将不会执行与body中内容相关的代码 所以要用到window.onload-->
  <script>
    window.onload = function () {
      var btn = document.querySelector('button');
      btn.addEventListener('click', function () {
        alert('1')
      })
    }
      //window.addEventListener('load',function(){})
  </script>
  <button>点击</button>
</body>

  • 注意：

    1. 有了window.onload就可以把JS代码写到页面元素的上方，因为onload是等页面内容全部加载完毕，再去执行处理函数
    2. window.onload 传统注册事件方式只能写一次，如果有多个，会以最后一个window.onload为准
    3. 如果使用addEventListener 则没有限制

  • 窗口加载事件：document.addEventListener(‘DOMContentLoaded’, function () {})；

    1. DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等
    2. 如果页面的图片很多的话，从用户访问到onload触发可能需要较长的时间，交互效果就不能实现，必然影响用户的体验，此时用DOMContentLoaded事件比较合适

  • 调整窗口大小事件：window.onresize,当触发时就调用的处理函数

    <body>
  <script>
    window.addEventListener('load', function () {
      var btn = document.querySelector('button')
      window.addEventListener('resize', function () {
        if (window.innerWidth <= 1000) {//获得当前屏幕宽度
          btn.style.display = 'none';
        }
        else{
          btn.style.display = 'block';
        }
      })
    })
  </script>
  <button>点击</button>

</body>

3.定时器

  • setTimeout()：用于设置一个定时器，该定时器在在定时器到期后执行调用函数

    window.setTimeout(回调函数，[延迟的毫秒数])；

    <body>
  <script>
    var time1=setTimeout(function () {//可以给定时器起名
      alert('时间到')
    }, 2000)//两秒后执行
      ----------------
    setTimeout(zz, 2000)
    function zz() {
      alert('时间到')
    }
      ----------------
    setTimeout('zz()', 2000)
    function zz() {
      alert('时间到')
    }
  </script>
</body>

    案例：

    <body>
  <img src="godgird.jpg" alt="">
  <script>
    var img = document.querySelector('img')
    setTimeout(zz, 2000)
    function zz() {
      img.style.display = 'none';//2s之后隐藏图片
    }
  </script>
</body>

  • 停止setTimeout() 定时器：window.clearTimeout(timeoutID)

    <body>
  <img src="godgird.jpg" alt="">
  <button>停止定时器</button>
  <script>
    var img = document.querySelector('img')
    var button = document.querySelector('button')
    var time1 = setTimeout(zz, 2000)
    function zz() {
      img.style.display = 'none';
    }
    button.addEventListener('click', function () {
      clearTimeout(time1);//停止定时器
    })
  </script>
</body>

  • setInterval()：方法重复调用一个函数，每隔这个时间，就会调用一次回调函数

    window.setInterval(回调函数，[延迟的毫秒数])；

    <body>
  <script>
    var time1=setInterval(function () {//可以给定时器起名
      alert('时间到')
    }, 2000)//两秒后执行
      ----------------
    setInterval(zz, 2000)
    function zz() {
      alert('时间到')
    }
      ----------------
    setInterval('zz()', 2000)
    function zz() {
      alert('时间到')
    }
  </script>
</body>

    案例：京东秒杀

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>京东秒杀</title>
  <style>
    div {
      float: left;
      width: 50px;
      height: 50px;
      background-color: black;
      margin-left: 10px;
      color: #fff;
      line-height: 50px;
      text-align: center;
      font-size: 20px;
    }
  </style>
</head>

<body>
  <div class="h"></div>
  <div class="m"></div>
  <div class="s"></div>
  <script>
    var hour = document.querySelector('.h');
    var min = document.querySelector('.m');
    var sec = document.querySelector('.s');
    var inputTime = +new Date('2021-2-27 21:00:00');
    conutDown();//解决刷新页面出现短暂空白
    setInterval(conutDown, 1000);//倒计时
    function conutDown() {
      var nowTime = +new Date();
      var times = (inputTime - nowTime) / 1000;
      var h = parseInt(times / 60 / 60 % 24);
      h = h < 10 ? '0' + h : h;
      hour.innerHTML = h;
      var m = parseInt(times / 60 % 60);
      m = m < 10 ? '0' + m : m;
      min.innerHTML = m;
      var s = parseInt(times % 60);
      s = s < 10 ? '0' + s : s;
      sec.innerHTML = s;
    }
  </script>
</body>

</html>

  • 停止setInterval() 定时器：window.clearInterval(timeoutID)；

    <body>
  <button>停止定时器</button>
  <script>
    var button = document.querySelector('button')
    var time1 = setInterval(zz, 2000)
    function zz() {
      alert('时间到')
    }
    button.addEventListener('click', function () {
      clearInterval(time1);//停止定时器
    })
  </script>
</body>

    案例：发送验证码

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>验证</title>
</head>

<body>
  <input type="text" name="" id="">
  <button>发送</button>
  <script>
    var btn = document.querySelector('button');
    // var time = null;
    btn.addEventListener('click', function () {
      btn.disabled = true;
      var i = 60;
      btn.innerHTML = '还剩' + i + '秒';
      var time = setInterval(() => {
        i--;
        btn.innerHTML = '还剩' + i + '秒';
        if (i == 0) {
          clearInterval(time);
          btn.disabled = false;
          btn.innerHTML = '发送'
          i = 60;
        }
      }, 1000);
    })
  </script>
</body>

</html>

  • this指向问题：谁调用 指向谁

4.JS执行机制

  • JS是单线程：同一时间只能做一件事

  • 同步和异步：为了解决长时间等待问题

  • 同步：前一个任务结束后再执行后一个任务

  • 异步：同时进行两个任务

    console.log(1);
setTimeout(() => {
      console.log(3);
}, 1000);
console.log(2);
//1 2 3

  • 同步任务：都在主线程上执行，形成执行线

  • 异步任务：js的异步是通过回调函数实现的，放到任务队列

    1. 普通事件：click，resize等
    2. 资源加载：load，error等
    3. 定时器：setInterval，setTimeout等

  • Js执行机制

    1. 先执行执行线中的同步任务
    2. 异步任务（回调函数）放入任务队列中。
    3. 执行线中的任务执行完毕，执行任务队列中的任务。

    JavaScript 内容总结(DOM和BOM)(三)BOM基础

    事件循环：反复检查异步任务，放入，执行的过程

5.location对象

  • window对象给我们提供了一个location属性用于获取或设置窗体的URL，并且可以用于解析URL。因为这个属性返回的是一个对象，所以我们将这个属性也称为location对象

  • URL

    JavaScript 内容总结(DOM和BOM)(三)BOM基础

  • location对象属性

    JavaScript 内容总结(DOM和BOM)(三)BOM基础

  • 案例：5s后自动跳转页面

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>5s后自动跳转页面</title>
</head>

<body>
  <div></div>
  <script>
    var div = document.querySelector('div');
    var i = 5;
    div.innerHTML = i + 's后将自动跳转页面'
    window.addEventListener('load', () => {
      var time = setInterval(() => {
        i--;
        div.innerHTML = i + 's后将自动跳转页面'
        if (i == 0) {
          location.href = 'http://www.baidu.com';
          clearInterval(time);
          i = 5;
        }
      }, 1000);
    })
  </script>
</body>

</html>

  • 案例：参数传递

    demo.html

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <form action="demo2.html">
    用户名：<input type="text" name="username" id="">
    <input type="submit" value="提交" id="tijiao">
  </form>
</body>

</html>

    demo2.html

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div></div>
  <script>
    console.log(location.search);
    var params = location.search.substr(1);
    var arr = params.split('=');
    var div = document.querySelector('div')
    div.innerHTML = arr[1] + '欢迎'
  </script>
</body>

</html>

  • location方法

    JavaScript 内容总结(DOM和BOM)(三)BOM基础

6.navigator对象

  • 一般服务端会用

    JavaScript 内容总结(DOM和BOM)(三)BOM基础

7.history对象

JavaScript 内容总结(DOM和BOM)(三)BOM基础

上一篇：SAP_SO_BOM_PROC 实际返回的行数超出请求的行数


下一篇：javascrip基础大全