一、 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 onclick="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,得到屏幕的分辨率