- A+
所属分类：Web前端
一、BOM介绍
BOM：Browser Object Model，浏览器对象模型。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 //可用的屏幕高度
三、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 () { window.location.href = 'https://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(1)是window.alert(1)的简写，因为它是window的子方法。 系统对话框有三种： alert("人丑还不读书，是找不到女朋友的"); //不同浏览器中的外观是不一样的 confirm("你真的要这么做吗小伙子"); //兼容不好 prompt("输入用户名："); //不推荐使用 # 示例 var x=confirm("你真到要这么做吗") console.log(x) var username=prompt("输入用户名：") console.log(username);
五、打开关闭窗口
#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") 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);
