jQuery从入门到精通 (软件开发视频大讲堂)
上QQ阅读APP看书,第一时间看更新

2.5 BOM对象编程

2.5.1 什么是BOM对象

浏览器对象模型(Browser Object Model)简称为BOM。浏览器对象模型提供了用户与浏览器之间交互的对象以及操作的接口。BOM对象的具体功能如表2.6所示。

表2.6 BOM对象的具体功能

2.5.2 BOM对象编程

我们在2.5.1节当中介绍了BOM对象的基本情况,BOM对象是HTML DOM类结构中包含的一组浏览器对象。本节我们结合实例来介绍Window和Document等常用BOM对象的编程方法。

1.Window对象

Window对象表示浏览器中一个打开的窗口。Window对象的属性如表2.7所示。

表2.7 Window对象的属性

Window对象的方法如表2.8所示。

表2.8 Window对象的方法

下面详细介绍一下window.setTimeout()方法的使用。window.setTimeout()方法的语法如下:

        window.setTimeout(code, millisec)

参数说明:

code:在调用的函数后要执行的JavaScript代码串。

millisec:在执行代码前需要等待的毫秒数。

【例2.7】在页面载入完成执行按钮的click事件,但是并不需要用户自己操作。(实例位置:光盘\TM\sl\2\7)

(1)创建一个名称为index.html的文件。

(2)在页面的<body>标记中,添加一个button按钮,具体代码如下:

        <input type="button"name="button"value="关闭"  onclick="closeWindow()"/>

(3)在<head>标签下编写JavaScript代码,使用setTimeout()方法令查看窗口在3秒钟后关闭,具体代码如下:

        <script language="javascript">
            function closeWindow(){
                document.write("3秒钟后关闭该窗口!");
                setTimeout("window.close()", "3000");
            }
        </script>

运行本实例,效果如图2.25所示。

图2.25 关闭浏览器窗口

2.document对象

document对象是常用的JavaScript对象,用于管理网页文档。document对象的常用属性如表2.9所示。

表2.9 document对象的常用属性

document对象的常用方法如表2.10所示。

表2.10 document对象的常用方法

document对象的常用子对象和集合如表2.11所示。

表2.11 document对象的常用子对象和集合

【例2.8】document对象的使用。(实例位置:光盘\TM\sl\2\8)

(1)创建一个名称为index.html的文件。

(2)在页面的<body>标记中,使用<img>标签添加一张图片,具体代码如下:

        <h3>document对象的使用</h3>
        <p><img src="images/php5.png" width="867" height="454" border="0" title="" /> </p>

(3)在图片下方编写JavaScript代码,获取文件地址、文件标题等信息,具体代码如下:

        <script language="javascript">
            document.write("文件地址:"+document.location+"<br/>");
            document.write("文件标题:"+document.title+"<br/>");
            document.write("图片路径:"+document.images[0].src+"<br/>");
            document.write("前景色:"+document.fgColor+"<br/>");
            document.write("背景颜色:"+document.bgColor+"<br/>");
        </script>

运行本实例,效果如图2.26所示。

图2.26 运行结果