JavaScript中BOM

一.什么是BOM

BOM是浏览器对象模型

把浏览器当做一个对象，BOM的顶级对象是window

BOM学习的是浏览器窗口交互的一些对象，是浏览器厂商在各自浏览器上定义的，兼容性较差

二.window对象

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

1.它是js访问浏览器窗口的一个接口

2.它是一个全局变量 定义在全局作用域中  函数都会变成window 对象的属性和方法

三.window对象常见事件

窗口加载事件

window.οnlοad=function(){} 是窗口加载事件 当文档内容完全加载完成会触发该事件，就调用函数处理

注意：window.onload 传统注册方式 只能写一次 如果有多个 会以最后一个window.onload为准

window.addEventListener("load",function(){})  不受次数限制

 div{
            width: 400px;
            height: 400px;
            background-color: pink;
        }

<script>
    // 事件全部加载完毕执行事件
    window.addEventListener("load",function(){
        // 获取元素
        div=document.querySelector("div");
        // 注册事件  窗口变化
        window.addEventListener("resize",function(){
            // 窗口宽度小于800px  div 隐藏
            if(innerWidth<=800){
                div.style.display="none";
            }else{
                div.style.display="block";
            }
        })
    })
</script>





    <div></div>
    

调整窗口大小

window.onresize 是调整窗口大小加载事件，当触发时就调用的处理函数

  注意：只要窗口大小发生变化就会触发这个事件

定时器

setTimeout()定时器   一次性定时器

     语法格式： window.setTimeout(调用函数，延迟时间)；

        1.这个window 在调用的时候可以省略

        2.这个延迟时间的单位是毫秒数  但是可以省略  如果省略默认是0

        3.这个调用函数可以直接写函数，也可以写函数名

       4.页面中可能有很多的定时器 我们经常给定时器加标识符(名字)

        function callback(){
            console.log("爆炸了");
        }
        var timer1=setTimeout(callback,2000);
        var timer2= setTimeout(callback,5000);

 清除定时器   clearTimeout(定时器名字)

setInterval（）定时器    循环定时器

         语法规范：setInterval(调用函数，延迟时间)

清除定时器  clearInterval(定时器名字)

区别：

setTimeout 延迟时间到了 就去调用这个回调函数只调用一次  就结束了这个定时器

 setInterval 每隔这个延迟时间就去调用这个回调函数 会调用很多次 重复调用这个函数

js执行队列

 js 是单线程的

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

        异步：在做这件事情时，可以去处理其他的事

 同步任务 ：在主程序上执行，形成一个执行线

 异步任务：回调函数都是异步任务

         1.普通事件，如click，resize等

          2.资源加载，如load ，error等

          3.定时器，包括setInterval setTimeout等

先执行同步任务，在执行异步任务

location对象

location.href 可以获取或设置整个URL

        location.host 返回主机(域名)  www.baidu.com

        loaction.port  返回端口号  如果未写返回  空字符串

        location.parthname 返回路径

        location.search 返回参数

        location.hash  返回片段#后面内容 常见于链接 锚点

   重点记住href 和search

对象中常见的方法

• assign（）实现页面的跳转，跟href一样 记录历史，因此能后退页面

• replace（）替换当前页面，不记录历史，因此不能后退页面

• reload（）重新加载页面，实现页面的刷新，相当于F5

元素偏移量offset

offset系列只能读，不能改变值，而且返回的值是数字，不带单位。

• offsetTop 返回元素距离带有定位的父级顶部的距离，不带单位

• offsetLeft 返回元素距离带有定位的父级左侧的距离，不带单位

• offsetWidth 返回元素自身的宽度，包括padding、border、width，不带单位

• offsetHeight 返回元素自身的高度，包括padding、border、width，不带单位

• offsetParent 返回带有定位的父亲，没有则返回body

   *{
            margin: 0;
            padding: 0;
        }
        .father{
            width: 200px;
            height: 200px;
            background-color: pink;
            margin:100px;
            position: relative;
        }
        .son{
          width: 100px;
          height: 100px;
          background-color: blueviolet;
          margin-left: 45px;
        }
        .w{
            width: 200px;
            height: 200px;
            background-color: skyblue;
            margin: 0 auto 200px;
            padding:10px;
        }

 <div class="father">
        <div class="son"></div>
    </div>
    <div class="w"></div>

    var father=document.querySelector(".father");
        var son=document.querySelector(".son");
        var w=document.querySelector(".w");

1.可以得到元素的偏移  位置  返回的是不带单位的数值

 console.log(father.offsetTop);
 console.log(father.offsetLeft);

它以带有定位的父亲为准，如果父亲没有定位，它以浏览器窗口为准

 console.log(son.offsetLeft);

2.可以得到元素的大小 宽度 高度  是包含padding+border+width

console.log(w.offsetWidth);
  console.log(w.offsetHeight);

   3.返回带有定位的父亲 否则返回body

 console.log(son.offsetParent);
        console.log(son.parentNode);//返回父亲  是最近一级的父亲 不管父亲有没有定位

offset和style的区别：

 获取元素的大小位置 用offset更合适

 更改元素属性用style

获取鼠标在盒子内坐标

    首先得到鼠标在页面中的坐标（e.pageX，e.pageY)

    其次得到盒子在页面中的距离(box.offsetLeft,box.offsetTop);

    用鼠标距离还页面的坐标减去盒子在页面中的距离，得到鼠标坐标

（e.pageX-box.offsetLeft，e.pageY-box.offsetTop）；

   *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 400px;
            height: 400px;
            background-color: blueviolet;
            margin:100px
        }

<div class="box"></div>

 var box=document.querySelector(".box");
   box.addEventListener("mousemove",function(e){
    //    console.log(e.pageX,e.pageY);
    //    console.log(box.offsetLeft,box.offsetTop);
    var x=e.pageX-this.offsetLeft;
    var y=e.pageY-this.offsetTop;
    this.innerHTML="x坐标是"+x+",y坐标是"+y
   })