js BOM

获取浏览器可视窗口尺寸

获取可视窗口宽度：window.innerWidth
获取可视窗口高度：window.innerHeight

 //获取可视窗口宽度
        var w=window.innerWidth
        //获取可视窗口高度
        var h=window.innerHeight
        //输出
        console.log(w)
        console.log(h)

浏览器的弹出层

window.alert('皮蛋瘦肉粥')

 询问框：window.confirm(‘提示信息’)

• 点击确认：返回值为输入的内容
• 点击取消：返回值为null

window.prompt('你wifi密码多少？')

Browser Object Model 浏览器对象模型---操作浏览器，也是能够与浏览器对话-顶级对象（Windows）；

windows.document.getElementById("header");
 
document.getElementByid("header");

windows.location 对象：用于获得当前页面的地址（URL），并把浏览器重定向到新的页面；

            地址栏上的地址的操作：location href 属性跳转页面、assgin()跳转页面 、reload()刷新、 replace()方法替换地址栏上的地址的，没有历史记录的。

windows.History对象：历史记录的后退和前进：history:back()后退；forward()前进

JavaScript Windows Navigator：获取系统和浏览器的信息的：nabigator userAgent属性---获取系统，浏览器的信息；

定时器：该定时器会返回自己的id的值
 

var timeId=windows.setInterval(函数，时间)；
//页面加载完毕后，过了一段时间执行函数，反复的，除非清理定时器。
windows.clearInterval(定时器的id的值);
 
不过这里也存在一次定时器：
setTimeOut(函数，时间)；clearTimeOut(定时器id);

动画函数

offset系列：获取元素的相关的样式属性的值；
（父级元素margin+父级元素padding+父级元素border+自己的margin）
offsetWidth:获取元素的宽；
offsetHeight:获取元素的高；
offsetLeft:获取元素距离左边位置的值（有边框）；
offsetTop：获取元素距离上面位置的值（有边框）；

//示例：浏览器滚动时，页面内容类似于卷帘门似的
//scroll系列：卷曲出去的值
//scrollLeft:向左卷曲出去的距离
//scrollTop：向上卷曲出去的距离
//scrollWidth:元素中内容的实际的宽（当内容较少时，元素自身的宽），没有边框
//scrollHeight:元素中内容的实际的高（当元素较少时，元素自身的高），没有边框

//client系列：
//clientWidth：可视区域的宽度，没有边框；
//clientHeight:可视区域的高度，没有边框；
//clientLeft:左边框的宽度；
//clientTop:上边框的宽度；
//clientX:可视区域的横坐标；
//clientY:可视区域的纵坐标；

 //节流：节约性能，间隔时间，延迟触发

        //   节流的思路与现实：

        // 1.事件函数执行，先判断有定时器，则直接return

        // 2.把逻辑代码放到定时容器中

        // 3.定时器执行后，置空定时器变量

        // 4.  下载事件函数执行时，再创建一个新定时器即可

 var timer = null
        test.oninput = function() {
            if (timer) {
                return
            }
            timer = setTimeout(function() {
                console.log("input")
                timer = null //置空定时器，让事件再次触发时，重新创建一个定时器
            }, 2000)
        }

 // 节流的思路与现实：
        var timer = null
        username.oninput = function() {
            if (timer) {
                return
            }
            timer = setTimeout(function() {
                console.log("aa")
                timer = null
            }, 2000)
        }

触发事件

 window.onload = function() {
                console.log("aa");
            }
            //滚动条的时候触发
        window.onscroll = function() {
                console.log("onscroll")
            }
            // onresize:当窗口大小改变的时触发
        window.onresize = function() {
            console.log("onresize")
        }