二、BOM对象
2.1概念
Browser object Model 浏览器对象模型
将浏览器的各个组成部分封装成对象。
2.2组成
2.2.1window :窗口对象
（1）实例
<body> <input id = 'open' type="button" value="打开新窗口"> <input id = 'close' type="button" value="关闭新窗口"> <script> /*
windows对象
1.创建
2.方法
1.与弹出有关的方法
alert() 显示一段消息和一个确认
confirm() 显示带有确认和取消的对话框
点击确定返回true
点击取消返回false
prompt() 显示可以提示用户输入的对话框
返回值：获取用户输入值
2.与打开关闭有关的方法
open() 打开窗口
close() 关闭窗口，谁调用谁被关
3.与定时器有关的方式
setTimeout() 在指定的毫秒数后调用函数或计算表达式
参数 ：
1.js代码或者方法对象
2.毫秒值
返回值：
唯一标识，用于取消定时器
cleanTimeout() 取消由setTimeout()方法设置的timeout
setInterval() 按照指定的周期来调用
clearInterval() 取消setInterval设置的timeout
3.属型
获取其他的BOM对象和DOM对象
4.特点
windows对象不需要创建可以直接使用
windows引用可以省略
例如我们前面常用的alert，其实就是windows对象中的方法
*/ var flag = confirm("下面会出现两个按钮，确认和取消"); if (flag){ alert("你点了确定"); }else { alert("你点了取消"); } var str = prompt("请输出用户名"); alert(str); 获得标签对象 var ele = document.getElementById("open"); var newWindow; //绑定事件 ele.onclick = function (){ newWindow = open("http://www.baidu.com"); } var ele1 = document.getElementById("close"); ele1.onclick = function (){ newWindow.close(); } var timeout = setTimeout(fun,2000); clearTimeout(timeout); function fun(){ alert("boom~~~"); } var interval = setInterval(fun,2000); clearInterval(interval); function fun(){ alert("boom~~~"); } window.document </script> </body>
（2）轮播图实例和小bug
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <img id = "img1" src="../img/g1.jpeg" width="100%"> <script> /*轮播图思路 1.写更改图片的方法 2.调用更改图片的方法 3.每3秒 */ var num = 1; function fun(){ num ++; if (num > 3){ num = 1; } var img = document.getElementById("img1"); //小bug // Uncaught TypeError: Cannot set property 'src' of null //原因是document.getElementById("img1")没有获取到元素对象 img.src = "../img/g"+num+".jpeg"; } setInterval(fun,2000); </script> </body> </html>
2.2.2Navigator 浏览器对象
不常用
2.2.3screen 显示器屏幕对象
不常用
2.2.4History 历史记录对象
（1）创建(获取)
window.history
history
（2）方法
back() 加载history列表中的前一个URL。
forward() 加载history 列表中的下一个URL。
go() 加载hisItory 列表中的某个具体页面。
参数：
正数：前进几个历史记录
负数：后退几个历史记录
相当于集成了back和forwork方法
（3）属性
length 返回当前窗口历史列表中的URL数量。
（4）实例
<body> <!--<input id = "forword" type="button" value="前进">--> <input id = "f" type="button" value="前进"> <a href="轮播图案列.html">后退实例</a> <script> // var f = document.getElementById("forword"); // f.onclick = function (){ // history.forward(); // } var f1 = document.getElementById("f"); f1.onclick = function (){ history.go(1); } // var b = document.getElementById("back"); // f.onclick = function (){ // history.back(); // } </script> </body>
2.2.5Location 地址栏对象
（1）创建
window.location
location
（2）方法
reload() 重新加载当前文档。刷新
（3）自动跳转实例
<style> /* div这个标签是用来划分区域的，它是个块级元素block span标签是个行内元素（行内元素就是在浏览器的一行上）比如span里面的元素不会换到下一行 */ p{ text-align: center; } span{ color: #ff0000; } </style> <body> <p> <span id = "time">5</span>秒之后，自动跳转到首页 </p> <script> /* 分析: 1.显示页面效果<p> 2.倒计时读秒效果实现 2.1定义一个方法,获取span标签，修改span标签体内容，时间-- 2.2定义一个定时器,1秒执行一次该方法 3.在方法中判断时间如果<= 0，则跳转到首页 */ var second = 5; function fun(){ second --; if (second <= 0){ location.href = "http://www.qq.com" } var time = document.getElementById("time"); time.innerHTML = second + ""; } setInterval(fun,1000); </script> </body>
