第二章：JavaScript操作BOM对象

第二章：JavaScript操作BOM对象

一，BOM模型

​ BOM：浏览器对象模型（Browser Object Model）
​ BOM提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。

​ BOM是分为三大部分的，分别是：history，document，location。我们也会根据这三个部分，一一讲述。

​ BOM可实现功能

• 弹出新的浏览器窗口
• 移动、关闭浏览器窗口以及调整窗口的大小
• 页面的前进、后退

1. windows对象

​ 常用属性

• history: 有关客户访问过的URL的信息
• location: 有关当前 URL 的信息

​ 语法：

window.属性名= “属性值”

示例：

window.location=“http://www.baidu.com” ;

​ 常用方法

​ confirm()方法:

语法：

confirm(“对话框中显示的纯文本”)

示例：

<script type="text/javascript">
   var flag=confirm("确认要删除此条信息吗？");
    if(flag==true)
	      alert("删除成功！");
      else
	       alert("你取消了删除");
</script>

tip:confirm()与alert ()、 prompt()区别

• alert( )：一个参数，仅显示警告对话框的消息，无返回值，不能对脚本产生任何改变
• prompt( )：两个参数，输入对话框，用来提示用户输入一些信息，单击“取消”按钮则返回null，单击“确定”按钮则返回用户输入的值，常用于收集用户关于特定问题而反馈的信息
• confirm( )：一个参数，确认对话框，显示提示对话框的消息、“确定”按钮和“取消”按钮，单击“确定”按钮返回true，单击“取消”按钮返回false，因此与if-else语句搭配使用

​ open()方法:

​ open方法在一些支持上已经步入之前了，现在的一些属性尽管设置了。可能浏览器不支持的原因，会没有效果。所以我们在这了解一下即可。

语法：

window.open(“弹出窗口的url”,“窗口名称”,"窗口特征”)

示例：

window.open("www.baidu,com","百度一下","width=20px,height=20px")

2.history对象

​ 常用方法：


​ 其实我们可以只记住go()就可以了。实现的功能都一样。

3. location对象

​ 常用属性

​ 使用频率最高的就是href这个属性。

​ 常用方法

​ history和location结合示例：

<a href="javascript:location.href='flower.html'">查看鲜花详情</a>  
<a href="javascript:location.reload()">刷新本页</a>
<a href="javascript:history.back()">返回主页面</a>

4. Document对象

​ 其实Document是我们DOM对象的内容，但是我们在这里简单提一下。

​ 常用属性

​ 示例：

• document.referrer
• document.URL

​ Document对象应用

• 判断页面是否是链接进入
• 自动跳转到登录页面

var preUrl=document.referrer;  //载入本页面文档的地址
if(preUrl==""){	
      document.write("<h2>您不是从领奖页面进入，5秒后将自动 
                         跳转到登录页面</h2>");
      setTimeout("javascript:location.href='login.html'",5000);
}

​ Document对象的常用方法

5.JavaScript内置对象

Date对象

​ 如何在页面中显示当前时间的小时、分钟和秒？使用Date对象获得时、分、秒

语法：

var 日期对象=new Date(参数)
参数格式：MM DD,YYYY,hh:mm:ss

示例：

var  today=new Date();   //返回当前日期和时间
var tdate=new Date("september 1,2013,14:58:12");

​ Date对象的方法
​
时钟效果示例：

function disptime(){
var today = new Date();  
var hh = today.getHours(); 
var mm = today.getMinutes();
var ss = today.getSeconds();
document.getElementById("myclock").innerHTML="现在是:"+hh +":"+mm+": "+ss;
}
disptime();

Math对象

​ 常用方法：

定时函数

​ 1. setTimeout()

语法：

setTimeout(“调用的函数”,等待的毫秒数)

setTimeout()函数在指定时间后调用指定的函数，要注意该函数只执行一次。

示例：

<input name="s" type="button" value="显示提示消息" onclick="timer()" />
function timer(){
        var t=setTimeout("alert('3 seconds')",3000);
}

​ 2. setInterval()

语法：

setInterval(“调用的函数”,间隔的毫秒数)

示例：

var  myTime＝setInterval("disptime() ", 1000 );
//每隔1秒(1000毫秒)执行函数disptime()一次

setInterval方法会在指定时间，周期的调用指定函数。

注意：如果要多次调用，使用setInterval()或者让disptime()自身再次调用setTimeout()；

​ 3.清除定时函数

​ clearTimeout()：

语法：

clearTimeout(setTimeOut()返回的ID值)

示例：

var  myTime＝setTimeout("disptime() ", 1000 );
clearTimeout(myTime)；

​ clearInterval ():

语法：

clearInterval(setInterval()返回的ID值)

示例：

var  myTime＝setInterval("disptime() ", 1000 );
clearInterval(myTime)；

二，知识点总结：