BOM浏览器编程
1. BOM概述
1. 什么事BOM
BOM ( BrowserObject Model )即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。
BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。
BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分。
2. window对象
window 对象是一个顶层对象，其中包含很多属性和方法，其中的属性也对应一些子对象：document,history,location,screen等等
| 属性/方法 | 说明 |
|---|---|
| history | 历史记录对象 |
| location | 地址栏对象 |
| document | 文档对象 |
| screen | 客户窗口屏幕 |
| event | 事件对象 |
| stauts | 状态条 |
| open | 打开子窗口的方法 |
| alert | 消息提示框 |
| prompt | 输入提示框 |
| confirm | 确定框 |
3.history历史记录对象
history记录了用户在浏览器中的浏览器记录，通过history可以访问用户的浏览记录历史。对应于浏览器工具栏上的前进和后退按钮。
方法：
history.forward():前进下一页
history.back():返回上一页
history.go(索引): 跳到某一页
<!DOCTYPE html>
<html>
<head>
<title> spring </title>
<style type="text/css">
</style>
<script type="text/javascript">
</script>
</head>
<body>
<h1>春天</h1>
<a href="summer.html">访问夏天</a><br/>
<a href="javascript:history.forward()">下一页</a>
</body>
</html>
4. location地址栏对象
<!DOCTYPE html>
<html>
<head>
<title> my page </title>
<style type="text/css">
</style>
<script type="text/javascript">
//当下拉框选项切换的时候，跳转网站
function goWebSite()
{
//获取选中的网站
var site = document.getElementById("website").value;
//alert(site);
//选中的站点数据不为空时，才跳转网站
if(site!="")
{
//通过浏览器的地址栏对象，跳转页面
window.location.href=site;
}
}
</script>
</head>
<body>
网址:
<!--
onchange:下拉选项切换时触发的事件
-->
<select id="website" onchange="goWebSite()">
<option value="">请选择</option>
<option value="http://www.baidu.com">百度</option>
<option value="http://www.taobao.com">淘宝</option>
<option value="http://www.jd.com">京东</option>
</select>
</body>
</html>
5.window对象的常用方法
window.alert();//弹出消息框
window.prompt();//输入消息框
window.confirm();//确认框
5.1 window.open('新窗口的页面路径','新窗口的名称','新窗口的属性设置')
window.open ():用于打开子窗口
window.close():用于关闭当前窗口
<!DOCTYPE html>
<html>
<head>
<title> my page </title>
<style type="text/css">
</style>
<script type="text/javascript">
//定义子窗口变量
var subWin;
function openWin()
{
for(var i=1;i<=5;i++)
{
//window.open:打开子窗口
//将子窗口对象存入变量中
subWin = window.open('js-4.html','','width=300,height=300');
}
}
function closeWin()
{
//关闭窗口
subWin.close();
}
</script>
</head>
<body onload="openWin()">
<button type="button" onclick="openWin()">打开窗口</button>
<button type="button" onclick="closeWin()">关闭窗口</button>
</body>
</html>
5.2 定时器方法
setTimeout(函数名,延时时间) :延迟指定的时间后，执行一次函数
setInterval(函数名,延迟时间) :每隔指定的延迟时间，就执行一次函数
<!DOCTYPE html>
<html>
<head>
<title> my page </title>
<style type="text/css">
</style>
<script type="text/javascript">
function test()
{
alert(123);
//使用递归方式调用函数，实现每隔指定时间，调用一次的效果
//等价于setInterval
setTimeout("test()",3000);
}
//调用函数
//test();
//延迟调用
//延迟时间是毫秒数:1s = 1000ms
//延迟指定时间(毫秒数),调用一次函数
//setTimeout(test,3000);
//调用函数加双引号,函数后要加括号。函数外没有双引号时，直接写函数名
setTimeout("test()",3000);
//每隔指定时间调用一次函数
//setInterval(test,3000);
</script>
</head>
<body>
</body>
</html>
6.HTML页面常用事件
onclick :元素的单击事件
onload :页面加载完成事件
<!DOCTYPE html>
<html>
<head>
<title> my page </title>
<style type="text/css">
#d1
{
width:200px;
height:200px;
border:1px solid red;
}
</style>
<script type="text/javascript">
function setDiv()
{
//获取元素
var div =document.getElementById("d1");
//设置元素属性
div.innerHTML="这是DIV";
div.style.backgroundColor="red";
//使用js方法绑定单击事件
div.onclick=function(){
alert(123);
}
}
事件对象
//定义事件和函数的绑定声明
//函数会等到页面加载事件完成的时候，才会调用
window.onload=setDiv;
</script>
</head>
<!--使用标签事件属性绑定事件方法/函数-->
<!--body:onload="setDiv()"-->
<body >
<div id="d1"></div>
</body>
</html>
事件对象
<!DOCTYPE html>
<html>
<head>
<title> my page </title>
<style type="text/css">
#d1
{
width:100px;
height:100px;
border:1px solid red;
position:absolute;
left:0px;
top:0px;
}
</style>
<script type="text/javascript">
//当鼠标移动时，显示鼠标的坐标位置
//event:封装了事件发生时相关信息的事件对象
// 这个对象有浏览器在事件发生时自动创建出来，
// 并通过函数参数的方式，传给函数。
function showMouPos(e)
{
var div =document.getElementById("d1");
//通过事件对象可以获取事件中存储的鼠标位置：x,y
div.innerHTML=e.clientX+" "+e.clientY;
//让div元素随鼠标的位置移动
div.style.left=e.clientX+"px";
div.style.top=e.clientY+"px";
}
/*function showMouPos()
{
//在早期的IE中，事件对象是存储在window.event对象中
var div =document.getElementById("d1");
div.innerHTML=window.event.clientX+" "+window.event.clientY;
}*/
//绑定鼠标移动事件
document.onmousemove=showMouPos;
</script>
</head>
<body>
<div id="d1"></div>
</body>
</html>
