2014-06-29 Web-Front的学习(4)-----JavaScript中BOM基础及事件
1.BOM基本概述
BOM(Browser Object Model),浏览器对象模型,使JavaScript可以与浏览器之间对话,交流.还没有正式的标准。由于现代浏览器已经（几乎）实现了 JavaScript 交互性方面的相同方法和属性，因此常被认为是 BOM 的方法和属性.
Window 对象
Navigator 对象
Screen 对象
History 对象
Location 对象
2.Window 对象
Window 对象表示浏览器中打开的窗口。 如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的window对象。 相关方法和属性: window.frames 返回窗口中所有命名的框架 parent是父窗口（如果窗口是顶级窗口，那么parent==self==top） top是最顶级父窗口（有的窗口中套了好几层frameset或者iframe） self是当前窗口（等价window） opener是用open方法打开当前窗口的那个窗口 注释：没有应用于 window 对象的公开标准，不过所有浏览器都支持该对象。
示例:实现父子窗口信息通信
父窗口代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>window对象 </title>
<meta http-uqive="content-type" content="text/html;charset=UTF-8">
<style>
div{
width:200px;
height:100px;
border:1px solid red;
}
</style>
<script>
function getParentValue(){
var parentValue = document.getElementById("parentValue").value;
// self.frames[0].document.getElementsByName("childText")[0].value=parentValue; //通过下表访问
//通过名字访问.
self.frames["02child"].document.getElementsByName("childText")[0].value=parentValue;
}
function openWin(){
window.open("02opener.html","","");
}
</script>
</head>
<body>
<div id="display"></div><br/>
<input type="text" id="parentValue"/><input type="button" value="父窗口传值到子窗口" onclick="getParentValue()"/><input type="button" value="opener" onclick="openWin()" /><hr/>
<iframe src="02子窗口.html" name="02child"></ifream><br/>
</body>
</html>
子窗口代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> Opener</title>
<script>
alert(self.opener.document.getElementById("parentValue").value);
</script>
</head>
<body>
</body>
</html>
实现模式对话框:
模式对话框主页面:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>js模式对话框</title>
<script>
function getDialogValue(){
var cval = window.showModalDialog("01modal.html");
document.getElementById("city").value=cval;
}
</script>
</head>
<body>
<input type="text" id="city" name="city"/>
<input type="button" value="请选择城市" onclick="getDialogValue()"/>
</body>
</html>
模式对话框弹出页面代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>模式对话框</title>
<script type="text/javascript">
function getValue(obj){
window.returnValue = obj.value;
window.close();
}
</script>
</head>
<body>
<input type="radio" name="city" onclick="getValue(this)" value="北京"/>北京</input>
<input type="radio" name="city" onclick="getValue(this)" value="武汉"/>武汉</input>
<input type="radio" name="city" onclick="getValue(this)" value="广州"/>广州</input>
<input type="radio" name="city" onclick="getValue(this)" value="上海"/>上海</input>
</body>
</html>
Window对象中comfirm(),prompt(),location()等方法的使用,可以查询W3C官方文档.在HTML DOM下可以查询到BOM多个对象的属性和方法.
1.setInterval(code,millisec[,"lang"]) setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式 setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭 2.setTimeout(code,millisec) setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式
3.History 对象
History 对象包含用户（在浏览器窗口中）访问过的 URL。 History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。 History中的方法使用: back() 加载 history 列表中的前一个 URL forward() 加载 history 列表中的下一个 URL go() 加载 history 列表中的某个具体页面
4.Location 对象
Location 对象存储在 Window 对象的 Location 属性中，表示那个窗口中当前显示的文档的 Web 地址。它的 href 属性存放的是文档的完整 URL，其他属性则分别描述了 URL 的各个部分。这些属性与 Anchor 对象（或 Area 对象）的 URL 属性非常相似。当一个 Location 对象被转换成字符串，href 属性的值被返回。这意味着你可以使用表达式 location 来替代 location.href。 不过 Anchor 对象表示的是文档中的超链接，Location 对象表示的却是浏览器当前显示的文档的 URL（或位置）。但是 Location 对象所能做的远远不止这些，它还能控制浏览器显示的文档的位置。如果把一个含有 URL 的字符串赋予 Location 对象或它的 href 属性，浏览器就会把新的 URL 所指的文档装载进来，并显示出来。 除了设置 location 或 location.href 用完整的 URL 替换当前的 URL 之外，还可以修改部分 URL，只需要给 Location 对象的其他属性赋值即可。这样做就会创建新的 URL，其中的一部分与原来的 URL 不同，浏览器会将它装载并显示出来。例如，假设设置了Location对象的 hash 属性，那么浏览器就会转移到当前文档中的一个指定的位置。同样，如果设置了 search 属性，那么浏览器就会重新装载附加了新的查询字符串的 URL。 除了 URL 属性外，Location 对象的 reload() 方法可以重新装载当前文档，replace() 可以装载一个新文档而无须为它创建一个新的历史记录，也就是说，在浏览器的历史列表中，新文档将替换当前文档
5.Screen对象
每个 Window 对象的 screen 属性都引用一个 Screen 对象。Screen 对象中存放着有关显示浏览器屏幕的信息。JavaScript 程序将利用这些信息来优化它们的输出，以达到用户的显示要求。例如，一个程序可以根据显示器的尺寸选择使用大图像还是使用小图像，它还可以根据显示器的颜色深度选择使用 16 位色还是使用 8 位色的图形。另外，JavaScript 程序还能根据有关屏幕尺寸的信息将新的浏览器窗口定位在屏幕中间。
6.Navigator对象
Navigator 对象包含的属性描述了正在使用的浏览器。可以使用这些属性进行平台专用的配置。 虽然这个对象的名称显而易见的是Netscape的Navigator 浏览器，但其他实现了 JavaScript 的浏览器也支持这个对象. Navigator 对象的实例是唯一的，可以用 Window 对象的 navigator 属性来引用它。
7.JavaScript常用事件
鼠标移动事件(mousemove/mouseout/mouseover)
鼠标点击事件(click/dblclick/mousedown/mouseup)
加载与卸载事件(load/unload)
聚焦与离焦事件(focus/blur)
键盘事件(keydown/keyup/keypress)
提交与重置事件(submit/reset)
选择与改变事件(select/change)
更多的Js事件概述和使用,请查看W3C文档使用说明.