BOM概述
BOM（浏览器对象模型，Browser Object Model），即可以将浏览器的各个部分抽象成对象在JavaScript中进行调用和完成特定的功能。比如对历史记录，地址栏，整个窗口等都可以进行操作。
注意
调用方法时，可以使用
"_name()"或者
_name，不可以"_name"这样调用。
BOM对象
1. Window对象
1.1 常用属性
- closed：返回窗口是否已被关闭。
- document：对 Document 对象的只读引用。请参阅 Document 对象。
- location：用于窗口或框架的 Location 对象。请参阅 Location 对象。
- Navigator：对 Navigator 对象的只读引用。请参数 Navigator 对象。
- opener：返回对创建此窗口的窗口的引用。
- parent：返回父窗口。
- screen：对 Screen 对象的只读引用。请参数 Screen 对象。
- self：返回对当前窗口的引用。等价于 Window 属性。
- status：设置窗口状态栏的文本。
- top：返回最顶层的先辈窗口。
- window：window 属性等价于 self 属性，它包含了对窗口自身的引用。
1.2 常用方法
- alert()：显示带有一段消息和一个确认按钮的警告框。
- confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框。
- prompt()：显示可提示用户输入的对话框。
- open()：打开一个新的浏览器窗口或查找一个已命名的窗口，通过返回值为子窗口对象，子窗口通过opener传递数据。
- showModalDialog()：打开一个新的浏览器模式窗口，通过参数和返回值传递数据。
- close()：关闭浏览器窗口。
- focus()：把键盘焦点给予一个窗口。
- blur()：把键盘焦点从顶层窗口移开。
- setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式。
- clearInterval()：取消由 setInterval() 设置的 timeout。
- setTimeout()：在指定的毫秒数后调用函数或计算表达式。
- clearTimeout()：取消由 setTimeout() 方法设置的 timeout。
1.3 集合
frames[]：返回窗口中所有命名的框架。[]中可以是索引，也可以是name。
1.4 窗口结构
self指代本窗口，和window相同，parent指代父窗口，top指代顶层窗口。结构如图：
1.5 案例
父子传值（父子关系只存在于框架frame的情况）（chrome[本地]，IE11）
父子传值-父.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>父子传值-父</title>
<link rel="stylesheet" type="text/css" href="css.css">
<script type="text/javascript">
function _father(){
var content = document.getElementById("input").value;
var _ch = self.frames[0].document.getElementById("content");
_ch.innerHTML = content;
}
</script>
</head>
<body>
<br />
<div>父页面</div>
<br />
<div id="whole">
<input type="text" id="input" value="father"/>
<br /><br />
<input type="button" value="传值到子页面" onclick="_father()">
<br /><br />
<div>传送显示内容：</div>
<div id="content"></div>
</div>
<!--以下是子窗口-->
<div id="sonFrame"><br />子窗口<br /><br />
<iframe id="iframe" src="父子传值-子.html"></iframe>
</div>
</body>
</html>
父子传值-子.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>父子传值-子</title>
<link rel="stylesheet" type="text/css" href="css.css">
<script type="text/javascript">
function _son() {
var content = document.getElementById("input").value;
var _fa = self.parent.document.getElementById("content");
_fa.innerHTML = content;
}
</script>
</head>
<body>
<div id="whole">
<input type="text" id="input" value="son" />
<br />
<br />
<input type="button" value="传值到父页面" onclick="_son()">
<br />
<br />
<div>传送显示内容：</div>
<div id="content"></div>
</div>
</body>
</html>
效果：
窗口创建和信息传递（chrome[本地]，IE11）
新窗口-父：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>新窗口-父</title>
<style type="text/css">
#bank{
width: 200px;
height: 30px;
border: 2px solid red;
text-align: center;
line-height: 30px;
}
</style>
<script type="text/javascript">
function _open(){
/*
创建非模式窗口
//window.open(URL,name,features,replace)
window.open("新窗口-子.html", "城市列表", "width=100px;height=30px;");
*/
// 创建模式窗口
var value = window.showModalDialog("新窗口-子.html");
document.getElementById('bank').innerHTML = value;
}
</script>
</head>
<body>
<div id="bank"></div>
<input type="button" value="请选择城市" onclick="_open();"/>
</body>
</html>
新窗口-子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>新窗口-子</title>
<script type="text/javascript">
function _transfer(name){
/*
非模式窗口通过DOM传递信息
self.opener.document.getElementById("bank").innerHTML = name.value;
window.close();
*/
// 模式窗口信息返回
window.returnValue = name.value;
window.close();
}
</script>
</head>
<body>
<input type="radio" id="bj" value="北京" name="city" onclick="_transfer(this);"/>
<label for="bj">北京</label>
<input type="radio" id="sh" value="上海" name="city" onclick="_transfer(this);"/>
<label for="sh">上海</label>
<input type="radio" id="gz" value="广州" name="city" onclick="_transfer(this);"/>
<label for="gz">广州</label>
<input type="radio" id="sz" value="深圳" name="city" onclick="_transfer(this);"/>
<label for="sz">深圳</label>
</body>
</html>
效果：
点击“请选择城市”弹出新网页，选择城市后新网页自动关闭，并将城市显示在原网页中。
三种弹窗
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>三种弹窗</title>
</head>
<body>
<script type="text/javascript">
alert("test");
var s = confirm("确定删除吗");
if (s) {
alert("你点了确定");
} else {
alert("你点了取消");
}
var t = prompt("请输入行数", 5);
for (var i = 0; i < t; i++) {
document.write("<hr width=" + (i * 20) + "px />");
}
</script>
</body>
</html>
其他BOM对象
1. Navigator对象
1.1 常用属性
- appName：返回浏览器的名称。
- appVersion：返回浏览器的平台和版本信息。
- cookieEnabled：返回指明浏览器中是否启用 cookie 的布尔值。
- platform：返回运行浏览器的操作系统平台。
1.2 示例
alert(navigator.appName); // 显示浏览器名称
alert(navigator.appVersion); // 显示浏览器版本信息
2. Screen对象
2.1 常用属性
- width：返回屏幕宽度。
- height：返回屏幕高度。
2.2 示例
alert(screen.width);
alert(screen.height);
3. History对象
3.1 常用方法
- back()：加载 history 列表中的前一个 URL。
- forward()：加载 history 列表中的下一个 URL。
- go()：加载 history 列表中的某个具体页面。
3.2 示例
<a href="javascript:history.forward()">前进，相当于（go(1)）</a>
<a href="javascript:history.back()">后退，相当于（go(-1)）</a>
4. Location对象
4.1 常用属性
href：设置或返回完整的 URL。
4.2 常用方法
reload()：重新加载当前文档。
4.3 示例
跳转到相关网页。
function _location(){
location.href = "test.html";
}
定时器
1. 概述
定时器是Window对象中的方法，可以进行时间上的设定，在特定时间或者每隔一段时间运行特定功能。
2. 常用方法
- setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval(code, millisec)code（必须）：要调用的函数或要执行的代码串。millisec（必须）：周期性执行或调用 code 之间的时间间隔，以毫秒计。 - clearInterval()：取消由 setInterval() 设置的 timeout。
clearInterval(id_of_setinterval)id_of_setinterval：由 setInterval() 返回的 ID 值。 - setTimeout()：在指定的毫秒数后调用函数或计算表达式。
setTimeout(code, millisec)code（必需）：要调用的函数后要执行的 JavaScript 代码串。millisec（必需）：在执行代码前需等待的毫秒数。 - clearTimeout()：取消由 setTimeout() 方法设置的 timeout。
clearTimeout(id_of_settimeout)
id_of_settimeout：由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。
注意：
setTimeout()只在指定时间后调用一次function，若想要循环多次调用，请使用递归。
3. 示例
随机数显示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>定时器</title>
<style type="text/css">
#d1,#d2 {
border: 1px solid blue;
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
}
input{
width: 100px;
height: 20px;
}
</style>
<script type="text/javascript">
var out = "";
function _random1() {
var r = Math.floor(Math.random() * 100);
document.getElementById("d1").innerHTML = r;
out = setTimeout("_random1()", 500);
}
function _random() {
var r = Math.floor(Math.random() * 100);
document.getElementById("d2").innerHTML = r;
}
function _random2() {
out = setInterval("_random()", 500);
}
</script>
</head>
<body>
<div id="d1"></div>
<input type="button" value="setTimeout方法演示" onclick="_random1();"/>
<div id="d2"></div>
<input type="button" value="setInterval方法演示" onclick="_random2();"/>
</body>
</html>
4. 案例
抽奖
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>抽奖</title><style type="text/css">input {width: 100px;height: 50px;}</style><script type="text/javascript">var rand = "";function _rand() {rand = Math.floor(Math.random() * 100);document.getElementById('result').innerHTML = rand;}var time = "";var flag = true;function _start() {if (flag) {time = setInterval(_rand, 10);document.getElementById('go').value = "停止";} else {clearInterval(time);document.getElementById('go').value = "开始";}flag = !flag;}</script></head><body><div id="result"></div><br /><div id="b"><input type="button" id="go" value="抽奖" onclick="_start();" /></div></body></html>
效果（点击一次抽奖，再次点击停止）
事件（Event对象）
1. 鼠标事件
1.1 常用属性
- onclick：当用户点击某个对象时调用的事件句柄。
- ondblclick：当用户双击某个对象时调用的事件句柄。
- onmousedown：鼠标按钮被按下。
- onmousemove：鼠标被移动。
- onmouseout：鼠标从某元素移开。
- onmouseover：鼠标移到某元素之上。
- onmouseup：鼠标按键被松开。
- clientX：返回当事件被触发时，鼠标指针的水平坐标。
- clientY：返回当事件被触发时，鼠标指针的垂直坐标。
1.2 示例
<html><head><title>鼠标事件</title><style type="text/css">#div1 {border: 1px solid red;width: 500px;height: 500px;}</style><script type="text/javascript">function _onmouseover() {alert("鼠标已经移上来了");}function _onmouseout() {alert("鼠标已经移走了");}function _onmousemove() {window.status = event.clientX + "," + event.clientY;}function _btn() {alert("点击事件");}</script></head><body><div id="div1" onMouseMove="_onmousemove()"></div><input type="text" name="username" onMouseOver="_onmouseover();" onMouseOut="_onmouseout()" /><input type="button" value="点击事件" onclick="_btn()" /></body></html>
2. 键盘事件
2.1 常用属性
- onkeydown：某个键盘按键被按下。
- onkeypress：某个键盘按键被按下并松开。
- onkeyup：某个键盘按键被松开。
2.2 示例
<html><head><title>键盘事件</title><style type="text/css">#div1 {border: 1px solid red;width: 100px;height: 100px;}</style><script type="text/javascript">function _onkeydown() {document.getElementById("div1").innerHTML += "onkeydown<br/>";}function _onkeypress() {document.getElementById("div1").innerHTML += "onkeypress<br/>";}function _onkeyup() {document.getElementById("div1").innerHTML += "onkeyup<br/>";}function _changeInput() {//找到回车键的keyCodeif (event.keyCode == 13) {//将keyCode的值赋值为制表符的值event.keyCode = 9;}}</script></head><body><div id="div1" onKeyDown="_onkeydown()" onKeyUp="_onkeyup()" onKeyPress="_onkeypress()"></div>用户名：<input type="text" name="username" onKeyDown="_changeInput()" /> 昵称：<input type="text" name="nickname" /></body></html>
3. 加载退出事件
3.1 常用属性
- onload：一张页面或一幅图像完成加载。
- onunload：用户退出页面。
3.2 示例
<html><head><title> 加载卸载事件</title><script type="text/javascript">function _onload() {alert("当页面加载的时候就执行");}function _onunload() {alert("当页面被卸载的时候执行");}</script></head><body onload="_onload()" onunload="_onunload()"></body></html>
4. 聚焦离焦事件
4.1 常用属性
- onfocus：元素获得焦点。
- onblur：元素失去焦点。
4.2 示例
输入框验证
[正则验证在chrome，IE11中出现问题]
<html><head><title> 聚焦离焦事件 </title><script type="text/javascript">var flag = true;function _onfocus() {if(flag) {document.getElementById("tel").value = "";flag = false;}var msg = document.getElementById("msg");msg.innerHTML = "";}function _onblur() {var tel = document.getElementById("tel").value;var msg = document.getElementById("msg");var reg = /^[1][3578][0-9]{9}/;if (reg.test(tel)) {msg.style.color = "green";msg.innerHTML = "正确";} else {msg.style.color = "red";msg.innerHTML = "错误，请重新输入";}}</script></head><body><input type="text" id="tel" name="tel" value="请输入手机号" onfocus="_onfocus();" onblur="_onblur();" /><span id="msg"></span></body></html>
效果
5. 提交重置事件
5.1 常用属性
- onsubmit：提交按钮被点击。
- onreset：重置按钮被点击。
5.2 注意
- onsubmit和onreset都是针对表单说的，所以要写在表单标签内。
- onsubmit和onreset事件调用格式必须是 return 方法名。
- onsubmit的方法必须有个返回值。
5.2 示例
<html><head><title>提交重置事件</title><script type="text/javascript">function _onsubmit() {var uname = document.getElementsByName("username")[0].value;var psswd = document.getElementsByName("password")[0].value;if (uname == '') {alert("请输入用户名");return false;}if (psswd == '') {alert("请输入密码");return false;}return true;}</script></head><body><form action="" method="get" onsubmit="return _onsubmit();">用户名：<input type="text" name="username" /><br/>密码：<input type="password" name="password" /><br/><input type="submit" value="提交" /><input type="reset" value="重置" /></form></body></html>
6. 选择改变事件
6.1 属性
onchange：用户改变域的内容。
6.2 案例
城市区域选择
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>城市选择</title><script type="text/javascript">function _changearea() {var arr = new Array();arr[1] = ["海淀区", "昌平区", "东城区", "西城区"];arr[2] = ["黄浦区", "浦东新区", "徐汇区", "静安区"];arr[3] = ["田家庵区", "谢家集区", "潘集区", "大通区"];arr[4] = ["建邺区", "玄武区", "鼓楼区"];var city = document.getElementById('city');var area = document.getElementById('area');if (city.value == "none") {area.length = 1;return;} else {area.length = 1;for (var i = 0; i < arr[city.value].length; i++) {area.add(new Option(arr[city.value][i], arr[city.value][i]));}}}</script></head><body><select id="city" onchange="_changearea();"><option value="none">--请选择城市--</option><option value="1">北京</option><option value="2">上海</option><option value="3">淮南</option><option value="4">南京</option></select><select id="area"><option>--请选择地区--</option></select></body></html>
扫一扫
13万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
