开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第21天，点击查看活动详情

🎈大家好，我是李乐一，新人初来乍到，请多多关照~
📝小小的前端一枚，分享一些日常的学习和项目实战总结~
😜如果本文对你有帮助的话，帮忙点点赞呀！ღ( ´･ᴗ･` )比心~

1.window对象

在js中，一个浏览器窗口就是一个window对象。
一个窗口就是一个window对象，窗口里的HTML文档就是一个document对象，document对象是window对象的子对象。

window对象的子对象分很多种：

document 文档对象用于操作页面元素
location 地址对象用于操作URL地址
navigator 浏览器对象用于获取浏览器版本信息
history 历史对象用于操作浏览器历史
screen 屏幕对象用于操作屏幕的高度和宽度

注：一个窗口是一个window对象，这个窗口里边的HTML文件是一个document对象，window对象众多的子对象由于都是操作窗口的，所以称为BOM对象（浏览器对象类型）

ECMAScript指的是基本语法
DOM控制标签相关的内容
BOM控制浏览器窗口相关的

2.新窗口的关闭与打开

（1）窗口关闭：

window.close()关闭当前的窗口

<a href="关闭窗口.html" target="_blank">新窗口</a>
<script>
     btn.onclick=function(){
        window.close();  // window是代表关闭当前的窗口
     }
</script>

这里当我们点击新窗口时，会跳转新的窗口

<button type="button" id="btn">关闭窗口</button>
<script>
    btn.onclick=function(){
        window.close();  // window是代表关闭当前的窗口
    }
</script>

当我们点击关闭窗口时，会返回上一个页面，关闭当前页面

（2）窗口的打开

打开窗口 window.open('链接地址')

<body>
 <button type="button" id="btn">打开窗口（百度）</button>
<script>
 btn.onclick=function(){
     window.open('https://www.baidu.com/');
 }
</script>
</body>

当我们点击此按钮将会跳转百度这个窗口

当我们会使用如何关闭和打开新窗口，也可以绑定一个定时器设置多长时间去关闭窗口

<body>
<button type="button" id="btn">打开窗口(百度)</button>
<a href="关闭窗口.html" target="_blank">新窗口</a>
<script type="text/javascript">
  btn.οnclick=function(){
     // 打开窗口  window.open('链接地址');链接地址任意都可以
     // 相当于把打开的窗口存储到a内部
     var a=window.open('https://www.baidu.com/');
     // 绑定一个定时器，设置时间去关闭窗口
     setInterval(function(){
          // 关闭a窗口
          a.close()
     },1000)  // 设置为1秒钟后关闭也页面
  }
<script>
<body>

3.弹出框用法

设置一个按钮，点击的时候可以关闭窗口
关闭窗口之前会先弹出提示框，如果用户确认，就关闭窗口，否则不关闭

<body>
<button type="button" id="btn">点我有惊喜！！</button>
<script type="text/javascript">
btn.onclick = function(){    //绑定btn的点击事件
     // 弹出框
     if(confirm('确认关闭窗口吗')){  
        //关闭窗口
        window.close()
     }
 }
</script>
</body>

当我们点击的时候就会弹出确认框，如果点确定就会关闭窗口，取消不会关闭

1.单次定时器，只执行一次就停止了

setTimeout（code，time）–> code:可以是一段代码可以是一个函数名

time：是时间单位为毫米，表示要过多长时间执行code里边的代码 clearTimeout() —>暂停定时器

var timer=window.setTimeout(function(){
    console.log(111)
},1000)
// clearTimeout(定时器名字)停止单次定时器
clearTimeout(timer)

2.利用单次定时器，实现多次定时器的效果

function fn(){
    setTimeout(function(){
        console.log(1111);
        fn();
    },1000)
}
fn()

setInterval()和clearInterval()

（1）语法1： setInterval(code,time)：重复性的执行一段代码

参数code：可以是一段代码，可以是一个函数，也可以是一个函数名
参数time：是时间，单位为毫秒表示要过多长时间才执行code里边的代码
注：虽然和 setTimeout（）语法一样，但是不同的是 setTimeout（）只执行一次，然而setInterval()执行无数次

（2）语法2： clearInterval(obj)：取消

clearInterval()的执行
obj是clearInterval()方法返回的对象

3.函数与定时器写法区别

<script>
function fn(){
    console.log(1111)
}
// fn是函数
//fn()是执行函数
setTimeout(fn,1000); //和原来的书写方式一样
setTimeout(fn(),1000)  //函数后面加括号，会直接执行函数，定时器失效，就不会用到定时器
setTimeout("fn()",1000)  //如果书写成函数的形式，直接加引号即可
</script>

1.history用法

history.go(num)可以跳转页面 num值可以自定义正值返回之后的页面负值返回之前的页面

history.go(-1)等价于与history.back() —>返回之前的页面

history.go(1) 等价于history.forward() —>返回之后的页面

<button onclick="history.go(-1)">返回到上一级</button>
<button onclick="history.go(1)">返回到下一级</button>
<button onclick="history.back()">返回到上一级</button>
<button onclick="history.forward（）">返回到下一级</button>
<a href="07无缝滚动.html">窗口</a>

2.location()用法

location.reload() --->刷新页面

<button onclick="location.reload()">刷新页面reload</button>

// js中的双引号和单引号使用方法一样，但是单引号内部不能使用单引号，双引号内部不能使用双引号，自身不能嵌套自身，但是双引号可以嵌套单引号
// replace()是替换页面，跳转完回不去之前的页面
<button onclick="location.replace('https://www.bilibili.com/')">跳转页面replace</button>
// assign()是在历史页面新增一条记录
<button onclick="location.assign('https://www.bilibili.com/')">跳转页面assign</button>

<button id="btn">跳转页面</button>
<script type="text/javascript">
    btn.onclick=function(){
        //location.href可以修改地址，直接使用新地址赋值即可
        location.href='https://www.bilibili.com'
    }
</script>

3.screen

屏幕对象用于操作屏幕的高度和宽度 (指的是电脑的显示屏分辨率)

<script type="text/javascript">
    //screen指的是显示屏，是电脑显示屏
    console.log('显示屏宽度'+screen.width);
    console.log('显示屏高度'+screen.height);
    console.log('可用宽度'+screen.availWidth);
    console.log('可用高度'+screen.availHeight);//不包含导航条
</script>

4.navigator

浏览器对象用于获取浏览器版本信息

<script type="text/javascript">
    console.log(navigator.appName);//检测当前浏览器的名字
    console.log(navigator.appVersion); //检测当前的版本
</script>

5.document对象常用的方法

document.getElementById() 通过id获取元素
document.getElementsByTagName() 通过标签获取元素
document.getElementByClassName() 通过class获取元素
document.getElementByName() 通过name获取元素
document.write() 输出内容
document.writeln() 输出内容并换行

常用的window对象