一、 BOM
解释: Browser Object Model,浏览器对象模型
概念: 将浏览器的各个组成部分封装为对象
特点: BOM对象不能自己创建,当文档加载进内存,浏览器自动创建。
作用: 使JS能与浏览器对话
组成: Window(窗口对象)、Location(地址栏对象)、History(历史记录对象)、Navigator(浏览器对象)、Screen(显示器屏幕)
1.1 Window
解释:窗口(视图)对象,即地址栏下方的区域
使用方式: window.方法名();
注意:window可以省略(由于以前频繁的调用太麻烦,所以省略!)
常用的方法
1、与弹出有关的方法
1.1 alert()
特点: 显示带有一段消息和一个确认按钮的警告框。
window.alert("我是警告弹框");
1.2 confirm()
特点:显示带有一段消息以及确认按钮和取消按钮的对话框。
返回值:boolean类型的返回值
简单应用:用户要执行某个操作(给予提示,让其重新确认,以防误点) ,例如:关闭页面时,给予其提示。
function disp_confirm() {
var r = confirm("Press a button");//注意返回值类型(用户通过按钮来选择的)
if (r == true) {
document.write("You pressed OK!")
} else {
document.write("You pressed Cancel!")
}
}
disp_confirm();//调用函数
1.3 prompt()
特点:显示可提示用户输入的对话框
参数:参数1是提示,参数2是默认的输入内容(可以不写)
var text=window.prompt("请输入收货地址","陕西西安咸阳");
document.write(typeof text);//string类型
相关链接:点击打开链接,点击打开链接(比较透彻),点击打开链接
2、 与定时器有关的方法(执行一次和循环执行)
2.1 setInterval()
参数:参数1是调用的的函数;参数2是延时的周期(多少秒之后执行)特点:循环执行
说明:clearInterval()取消由 setInterval()设置的timeout
应用:动态显示时钟
<body>
<span id="time" style="color:blue"></span>
</body>
<script type="text/javascript">
function showtime() {
var date = new Date();
var datetime = date.toLocaleString(); //获取时间的字符串形式
//在指定的位置显示,所以要获取标签对象(DOM),通过id获取
var time = document.getElementById("time");
//要注意:如果在块在span标签之前,由于加载顺序,尚未加载,获取的是null值
time.innerHTML = datetime;//给此标签之间设置时间(内容);注意"+="是追加,否则是覆盖
}
window.setInterval("showtime()", 1000);
</script>
实际应用:点击打开链接(看该作者的其它博客),点击打开链接(重点)
2.2 setTimeout()
说明:在指定的毫秒数后调用函数或计算表达式特点:只执行一次
说明:clearTimeout() 取消由 setTimeout() 方法设置的 timeout
定时器理解:理解为执行一个任务
应用:向屏幕中输入内容,执行三次结束
<script type="text/javascript">
function add() {
document.write("哈喽!");
}
var i = 1;
while (i <= 3) {
window.setTimeout("add()",2000);
i++;
}
document.write("hello kitty");
//疑问:为什么是hello kitty先输出屏幕(不是应该最后输出吗?),然后执行的三次哈喽,覆盖掉原内容!---
</script>
补充:每个定时器开启的时候(set),都有一个id,关闭定时器是针对此id的定时器进行关闭的
3 与打开关闭有关的方法
3.1 open()
说明:打开一个新的浏览器窗口或查找一个已命名的窗口
参数:打开目标的URL
返回值:返回新打开窗口的window引用(注意)
特点:打开了两个窗口
var newWindwo=window.open("http://www.baidu.com");
document.write(newWindwo);//[object Window]
document.write(this==newWindwo);//看是否是同一个窗口对象
3.2 close()
说明:关闭浏览器窗口
特点:谁调用我,我关谁-------------------------------------
常用属性
作用:获取其他对象的属性:
history :对 History 对象的只读引用(获取 历史记录对象)location :用于窗口或框架的 Location 对象( 地址栏对象)
Navigator: 对 Navigator 对象的只读引用()
Screen :对 Screen 对象的只读引用(屏幕对象)
document:对Document对象的只读引用( 重点)
1.2 其它对象
Location:地址栏对象
获取方式:可以用window对象中的属性获取(见名知意)
var locat=window.location;
document.write(typeof locat);//object
document.write(locat.Location);//未定义(说明地址栏没有内容,暂时获取不到!)
locat.href="http://www.baidu.com";//通过地址栏对象,给地址栏赋值(打开的窗口会覆盖原来的窗口!)
属性:href---设置或获取当前的URL
方法:relod()--重新加载当前的文档对象
History:历史记录对象
获取方式:可以用window对象中的属性获取
方法:
forward():等效前进的按钮
back():下面一行代码执行的操作与单击后退按钮执行的操作一样
go(参数):负数(后退几次),0(刷新当前页面),正数(前进几次)
属性:
length:获取的是从当前窗口开始的访问历史记录条数(默认是1表示当前)
相关链接:点击打开链接
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var v = window.history.length;
alert(v);//初始值为1
function nextWeb(){
window.history.go(1);//传正数(前进--forward())下一个历史记录,传负数(后退--back())上一个历史记录
}
</script>
</head>
<body>
<button οnclick="nextWeb()">下一个</button>
<a href="http://www.baidu.com">abc</a>
<a href="http://www.163.com">abc</a>
<a href="http://www.sina.com">abc</a>
</body>
</html>
Screen:屏幕对象
通常:两个属性height和width,得到屏幕的分辨率