javscript BOM对象
1. js的BOM概述
BOM（Browser Object Model）浏览器对象模型，是将我们使用的浏览器抽象成对象模型，例如我们打开一个浏览器，会呈现出页面，通过js提供BOM对象我们可以模拟浏览器功能。
例如，在浏览器地址栏输入地址，敲击回车这个过程，我们可以使用location对象进行模拟。再例如，浏览器中的前进和后退按钮，我们可以使用history对象模拟。
2. js的BOM对象
- Window对象，对象表示浏览器中打开的窗口。
- Location对象，包含有关当前 URL 的信息。用于操作浏览器的地址栏
- Screen对象，包含有关客户端显示屏幕的信息。。
- Navigator对象，包含有关浏览器的信息
- History对象，包含用户（在浏览器窗口中）访问过的 URL，其实就是来保存浏览器历史记录信息。
3. js的window对象
所有浏览器都支持 Window对象。Window 对象表示浏览器中打开的窗口。
Window对象的属性在调用的时候不需要加上window也可以，比如window.alert()等价于alert()
3.1 JavaScript消息框
可以在 JavaScript 中创建三种消息框：
- alert(“指定消息”) 方法用于显示带有一条指定消息和一个 OK 按钮的警告框。
- confirm(“指定消息”) 方法用于显示一个带有指定消息和 OK 及取消按钮的对话框。
- 点击ok按钮，返回true； 点击取消按钮，返回false
- prompt(“提示用户”) 方法用于显示可提示用户进行输入的对话框。
- 点击确定，返回输入的内容 ""；点击取消，返回 null
演示代码：
<script type="text/javascript">
if( confirm("确定要删除吗?")){
alert("点击确定");
} else {
alert("点击取消");
}
var str = prompt("请输入你的价格");
alert( str );
</script>
3.2 定时器
执行定时器
- setTimeout(定时执行的函数, 毫秒值) 定时执行一次，方法用于在指定的毫秒数后调用函数。
- setInterval(定时执行的函数, 毫秒值) 反复执行，方法可按照指定的周期（以毫秒计）来调用函数。
<script type="text/javascript">
/*
// 2秒后，定时执行一次
setTimeout(function(){
alert("单次定时器");
},2000);
*/
//每隔2秒, 定时执行一次
setInterval(function(){
alert("循环定时器");
},2000);
</script>
取消执行的定时器
- clearInterval( ID值 ) 可取消由 setInterval() 设置的 周期性执行。
注意：clearInterval() 方法的参数ID，必须是由 setInterval() 返回的 ID 值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
// 每隔2秒,重复执行
var id = setInterval(function(){
alert("定时器");
}, 2000);
// 结束定时器执行
function fnClear(){
clearInterval(id);
}
</script>
<input type="button" value="取消" onclick="fnClear()"/>
</body>
</html>
4. js的location对象
location对象，用于操作浏览器的地址栏
- href属性：就是浏览器的地址栏。我们可以通过为该属性设置新的 URL，使浏览器读取并显示新的 URL 的内容。
- 格式：
location.href=URL
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
function fn(){
location.href="http://www.baidu.com";
}
</script>
<a href="#" onclick="fn()">点我跳转到百度</a>
</body>
</html>
浙公网安备 33010602011771号