BOM汇总

BOM系列目录

---

---

前言

BOM（Browser Object Model）即浏览器对象模型，提供了独立于内容而与浏览器窗口交互的对象，其核心对象是window。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、BOM的构成

window对象是浏览器对象的顶级模型，它具有双重角色

• 它是JS访问浏览器窗口的一个接口
• 它是一个全局对象，定义在全局作用域中的变量、函数都会变为window对象的属性和方法。 调用的时候可以省略window,如alert(),prompt()等。

二、Window常见事件对象

window.onload = function() {}
或者
window.addEventListener('load',function() {});
window.onload就是页面加载事件，当文档内容全部加载完毕会触发该事件（包括图像、脚本文件、CSS文件等），就调用的处理函数
DOMContentLoaded 事件触发是，仅当DOM加载完毕，不包括样式表，图片和flash等等。
如果页面图片特别多，从用户访问onload到页面加载需要很多时间，因此可以用DOMContentLoaded.

❤窗口加载事件
window.onresize 是调整窗口大小加载事件，当触发时就调用的处理函数。
window.onresize = function() {}
window.addEventListener('resize',function(){});

<script>
        window.addEventListener('resize',function() {
          console.log('你真的好帅');

          只要窗口大小的像素发生变化就会触发该事件
        //   我们经常用这个事件完成响应式布局，window.innerWidth当前屏幕的宽度
        })
    </script>

三、定时器

两个定时器

• setTimeout()
• setInterval()

 <!-- setTimeout() 定时器 -->
    <!-- window.setTimeout (调用函数，[延迟的毫秒数])； -->
    <!-- setTimeout()方法用于设置一个定时器，该定时器在定时器到期后执行调用函数  只调用一次 -->
    <script>
        // window在调用的时候经常省略
        // 这个调用函数可以直接写函数，也可以调用函数名
        // 页面中可能有很多的定时器，我们给他定时器加标识符(名字)
        setTimeout(function() {
            console.log('夕颜好帅');
        } ,200);
        function callback () {
            console.log(666);
        }
        var time1 = setTimeout(callback ,3000);
        var time1 = setTimeout(callback ,4000);
        // setTimeout(callback ,3000);
        // 停止定时器
        // 停止setTimeout()定时器
        window.clearTimeout(timeoutID);
        
    </script>

---

<!-- window.setInterval();   反复调用一个函数，每间隔这个时间，就去回调一次函数，可以多次调用-->
    <script>
        setInterval(function(){
            console.log('我好帅');
        },1000);
    </script>

案例1

1.这个倒计时是不断变化的,所以用定时器来自动变化setInterval()
2.三个黑色的盒子存放时分秒.
CSS设置

<style>
        div {
            margin: 100px auto;
        }
        span {
             display:inline-block;
            width: 100px;
            height: 100px;
            background-color: pink;
            line-height: 100px;
            margin :10px 20px;
            text-align: center;
        }
</style>

HTML设置

<!-- 1.这个倒计时是不断变化的,所以用定时器来自动变化setInterval() -->
    <!-- 2.三个黑色的盒子存放时分秒. -->
    <div>
        <span class="hour">1</span>
        <span class="minute">1</span>
        <span class="second">1</span>
    </div>

JS设置

<!-- 获取元素 -->
    <script>
        var hour = document.querySelector('.hour');
        var minute = document.querySelector('.minute');
        var second = document.querySelector('.second');
        var inputTime = +new Date('2022-6-30 9:05:00');
        // 页面刷新 会导致延迟  因此先调用函数一次
        countDown();
        // 开启定时器
        setInterval(countDown,1000);
        function countDown() {
            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;
            minute.innerHTML = m;
            var s = parseInt(times %60 ) ;//秒
            s = s <10 ? '0' + s : s;
           second.innerHTML = s;
        }
    </script>

案例2

手机号：<input type="text" class="shuru"> <button>提交</button>
<script>
        // 获得元素
        var shuru = document.querySelector('.shuru');
        var btn = document.querySelector('button');
        var times = 5;
        btn.addEventListener('click', function() {
            btn.disabled = true ;
         var  timer=  setInterval(function(){
            // 清除定时器和复原按钮
            if (times == 0 ) {
                
                
                clearInterval(timer);
                btn.disabled = false ;
                btn.innerHTML = '提交'; 
                times = 5;  //这个5需要重新开始计算时间
            } else {
                btn.innerHTML = '还剩下'+times +'秒'; //拼接字符串
               times--;
            }
            
           } ,1000);   
        })
    </script>

this指向问题

 <!-- 全局作用域或者普通函数中this指向的全局对象window（注意定时器里面的this指向window） -->
    <!-- 2.方法调用中，谁调用thsi指向谁 -->
    <!-- 构造函数中的this指向构造函数的实例 -->
    <script>
        var o = {
            sayHi: function() {
                console.log(this);
            }
        }
        o.sayHi();
        function fun() {
            console.log(this);  //this指向 fun  实例对象
        }
        var fun = new fun();
    </script>

四、JS执行机制

 <!-- JS语言最大的特点就是单线程，同一个时间只能做一件事 -->
    <!-- 单线程意味着所有的任务都需要排队。 -->
    <!-- JS中出现了同步和异步 -->

      <!-- 1.同步任务 -->
      同步任务都在主线程上执行，形成一个执行栈。

      <!-- 2.异步任务 -->
      JS的异步是通过回调函数实现的
      一般而言，异步任务有以下三中类型；
      1.普通事件,如click | resize 等
      2.资源加载,如load | error等
      3.定时器,包括setInterval | setTimeout等
      异步任务相关回调函数添加到任务队列中（任务队列也称为消息队列）


      执行顺序
   1.先执行执行栈中的同步任务
   2.异步任务（回调函数）放入任务队列中  异步任务队列先进先出。
   3.一旦执行栈中的所有同步任务执行完毕，系统就会依次读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行

五、Location

location对象
window给我们提供了一个location属性用于获取或设置窗体的URL，并且可以用于解析URL。因为这个属性返回的是一个对象，所以我们也见这个属性成为location对象
统一资源定位符（Uniform Resource Locator,URL）是互联网上标准资源的地址
URL一般的语法格式为：
protocol://host[:port]/path/[?query]#fragment
http://www.itcast.cn/index.html?name=xiyan&age=18#link
protocol 通信协议 常用的http,ftp,matio等
host 主机域名 www.itheima.com
port 端口号可选 省略时使用方案默认端口如http的默认端口为80
path 路径 由 零或者多个’/'符号隔开的字符串 一般用来表示主机上的一个目录或者文件地址
query 参数 以键值对的形式 &符号分隔开
fragment 片段 #后面的内容 常用于链接 锚点

location属性
location.href 获取或者设置整个 URL
location.host 返回主机（域名）www.itheima.com
location.port 返回端口号 如果未写返回 空字符串
location.pathname 返回路径
location.search 返回参数
location.hash 返回片段

案例1-5s跳转页面

<button>跳转</button>
    <div></div>
    <script>
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        btn.addEventListener('click',function(){

            location.href = 'http://www.baidu.com';
        })
          var timer =5;
       
            setInterval(function(){
                if ( timer == 0 ) {
            location.href = 'http://www.baidu.com';
            timer = 5;
        } 
        else {
            div.innerHTML = '您将在' + timer+ '秒钟后跳转到首页'
            timer--;
            }
          }
        ,500)
    </script>

案例2-获取URL参数
1.第一个登陆界面 里面有提交表单 action提交到index.html页面
2.第二个页面，可以使用第一个页面参数，这样实现了以一个数据不同页面之间的传递效果
3.第二个页面和第三个页面之所以可以使用第一个页面的数据，是利用了URL里面的location.search参数。
4.在第二个页面中。需要把这个参数提取
5.第一步去掉？ 利用substr
6.第二部 利用=号分割键和值 split('= ')

login.html

 <form action="index.html">
        用户名：<input type="text" name="uname">
        <input type="submit" value="登录">
    </form>

index.html

<div></div>
    <script>
        console.log(location.search); //通过location.search把传递的参数取过来
    // 1.先去掉？ substr('起始的位置'，截取几个字符)；
    var params = location.search.slice('1'); // uname = 123;
    console.log(params); 

    // 利用 =把字符串分割成数组 split('=');
    var arr = params.split('=');
  var div = document.querySelector('div')
//   把获取的参数存放在div盒子里面
  div.innerHTML = arr[1] + '你好帅';
    </script>

六、Navigator

navigator对象包含很多浏览器的信息，有很多属性，最常用的是userAgent,该属性可以返回由客户机发生到服务器的uesr-agent头部的值

七、history对象

<a href="list.html">点击去往列表页面</a>
    <button>
        前进
    </button>
    <script>
        // back() 可以后退功能
        // forward() 前进功能
        // go(参数) 前进功能，后退功能 参数如果是1，前进一个页面 ，-1后退一个页面
        var btn = document.querySelector('button');
        btn.addEventListener('click' ,function(){
            history.forward();
        } ,)
    </script>

list.html

 <div>123</div>

---

总结

BOM到这就已经完结了

<<---------------------------------------------案例-------------------------------------------------------------------->>