一、BOM介绍
BOM：Browser Object Model，浏览器对象模型。
window代表BOM对象 ，浏览器窗口页面：滚动条,顶部tab页，整个导航条，浏览器弹窗
BOM操作只能在整个文档页面来操作
BOM的结构图：
从上图可以看出来：
（1）DOM对象也是BOM的一部分
（2）window对象是BOM的顶层（核心）对象
注意：
（1）在调用window对象的方法和属性时，可以省略window，例如：window.document.location可以简写为document.location （2）全局变量也是windows对象的属性，全局的函数是window对象的方法
二、对象history、navigator、screen（了解）
#1、history对象包不包含浏览器的历史 history.back() //后退一页，等同于history.go(-1) history.forward() //前进一页，等同于history.go(1) history.go(0) //0是刷新 用的不多。因为浏览器中已经自带了这些功能的按钮： #2、navigator对象包含了浏览器相关信息。 navigator.appName // Web浏览器全称 navigator.userAgent // 客户端绝大部分信息 navigator.platform // 浏览器运行所在的操作系统 #3、可以用screen对象得到可用的屏幕宽度和高度 screen.availWidth //可用的屏幕宽度 screen.availHeight //可用的屏幕高度
举例：点击进入上一页/下一页
================page11.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p>第一个页</p> <a href="page22.html">点我进入下一页</a> </body> </html> ================page22.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p>第二个页</p> <a href="page33.html">点我进入下一页</a> </body> </html> ================page33.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> function back() { window.history.back() } </script> </head> <body> <p>第三个页</p> <input type="button" value="点我进入上一页" onclick="back()"> </body> </html>
三、localtion对象（要用）
location.href //获取URL location.href="URL" // 跳转到指定页面 location.reload() //重新加载页面
location.href
练习1：点击盒子，跳转页面
<body>
<div id="div1">点我一下</div>
<script>
var oDiv = document.getElementById('div1');
oDiv.onclick = function () {
location.href = 'https://www.baidu.com';
}
</script>
</body>
//或
<body>
<div class="box">我是div,点我</div>
<script>
document.getElementsByClassName("box")[0].onclick=function () {
location.href="http://www.baidu.com"
}
</script>
</body>
练习2：3s后，自动跳转页面
<body> <div>这天下，本就是大争之世，孤的儿子，不仅要争，而且要争的光芒万丈</div> <script> setTimeout(function () { location.href = 'https://www.baidu.com'; }, 3000) </script> </body>
练习3：3s后让网页整个刷新
<body> <div>这天下，本就是大争之世，孤的儿子，不仅要争，而且要争的光芒万丈</div> <script> setTimeout(function () { location.reload(); }, 3000) </script> </body>
四、弹出系统对话框
alert在测试代码时要用
alert(1)是window.alert(1)的简写，因为它是window的子方法。 系统对话框有三种： alert("人丑还不读书，是找不到女朋友的"); //不同浏览器中的外观是不一样的 confirm("你真的要这么做吗小伙子"); //兼容不好 prompt("输入用户名："); //不推荐使用 // 示例 alert("弹框内内容") var res=confirm("弹框内信息 比如：你确定删库吗?") console.log(res) //接收弹框内容的返回值 true false var username=prompt("请输入用户名: ") //弹框让输入用户名 var password=prompt("请输入密码: ") console.log(username,password)
五、打开关闭窗口（了解）
#1、open("url地址","新窗口的位置_blank或者_self"，"新窗口的特征")
window.open("http://www.w3school.com.cn","_blank", "width=400, height=400")
#2、close()关闭当前窗口
var x=window.open("http://www.w3school.com.cn","_blank", "width=400, height=400") //_self代表在当前页面打开，_blank代表在新页面打开
x.close() #这个是点击立即关闭，可以自己设置关闭事件
六、浏览器窗口内部的高度和宽度
window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
七、 定时器
#1.setTimeOut() 只在指定时间后执行一次，通常用于延迟执行某方法或功能（多长时间之后干什么事） //定时器 异步运行 function say(){ alert("hello"); } //使用方法名字执行方法 var t1 = setTimeout(hello,1000); var t2 = setTimeout("hello()",3000); //使用字符串执行方法 clearTimeout(t2); //去掉定时器 #2.setInterval() 在指定时间为周期循环执行，通常用于刷新表单，对于一些表单的假实时指定时间刷新同步，动画效果等。 //实时刷新时间单位为毫秒 var t3 = setInterval(say,3000); var t4 = setInterval('say()',3000); clearInterval(t3); clearInterval(t4);
举例：
setTimeout(function () { location.href="http://www.baidu.com" location.reload() console.log(123) //3秒后打印出123 },3000) setInterval(function () { location.href="http://www.baidu.com" location.reload() console.log(123) //每隔3秒运行一次 },3000) var s1=setTimeout(function () { alert(123) },3000) clearTimeout(s1) //清理掉 var s2=setInterval(function () { alert(123) },2000) clearInterval(s2) //清理掉