JavaScript+jQuery交互式Web前端开发（第2版） 课件 第8、9章 BOM、jQuery（上）.pptx

第8章BOM;学习目标/Target;章节概述/Summary;目录/Contents;BOM简介;了解BOM的概念，能够阐述BOM的概念;8.1BOM简介;以下5个BOM对象都是window对象的属性。

document对象表示文档，它既属于BOM又属于DOM。

location对象用于操作浏览器地址。

navigator对象用于获取浏览器的基本信息。

history对象用于操作浏览器的历史记录。

screen对象用于获取屏幕信息。

BOM没有统一标准，每个浏览器都有对BOM的实现方式，因此，BOM的浏览器兼容性较差。;BOM对象;掌握window对象的使用，能够灵活应用window对象常用的方法和属性;;在JavaScript中，定义在全局作用域中的变量是window对象的属性；定义在全局作用域中的函数是window对象的方法，示例代码如下。;下面列举window对象常用的方法和属性，如下表所示。;>>续上一页表;下面通过代码演示window对象中alert()方法和confirm()方法的使用，示例代码如下。;掌握location对象的使用，能够灵活应用location对象常用的方法和属性;;下面列举location对象常用的方法和属性，如下表所示。;>>续上一页表;reload()方法的可选参数forcedReload是一个布尔值，当值为true时，表示强制浏览器从服务器加载页面资源，当值为false或未传参时，浏览器则可能从缓存中读取页面。

search属性通常用于在向服务器查询信息时传入查询条件，如页码、搜索的关键字、排序方式等。

assign()方法在打开指定URL时，会生成一条新的历史记录，而replace()方法不会在浏览器历史记录中生成新的记录，并且在调用replace()方法后，用户不能返回到前一个页面。;下面以如下URL为例，演示location对象常用的属性的使用。;掌握navigator对象的使用，能够灵活应用navigator对象常用的方法和属性;navigator对象用于获取浏览器的相关信息，下面列举navigator对象常用的方法和属性，如下表所示。;下面以userAgent属性为例，演示如何获取由浏览器发送到服务器的User-Agent的值。;下面以Chrome浏览器、Firefox浏览器、IE浏览器为例演示浏览器获取的信息。;掌握history对象的使用，能够灵活应用navigator对象常用的方法和属性;;8.2.4 history对象;8.2.4 history对象;掌握screen对象的使用，能够灵活应用screen对象常用的方法和属性;screen对象用???获取屏幕相关的信息，例如，屏幕的宽度、屏幕的高度等。下面列举screen对象常用的属性，如下表所示。;下面通过代码进行演示。;窗口事件;掌握窗口加载与卸载事件，能够在窗口加载、窗口卸载时运行特定的代码;当需要在窗口加载完成后运行某些代码，或在窗口关闭时运行某些代码，可以使用window对象提供的窗口加载与卸载事件。

下面列举window对象提供的窗口加载与卸载事件，如下表所示。;窗口加载与卸载事件有两种注册方式，第1种注册方式的示例代码如下。;窗口加载与卸载事件的第2种注册方式的示例代码如下。;下面通过代码进行演示。首先演示不使用窗口加载事件时代码运行出错的情况。由于程序中的代码是从上往下运行的，当JavaScript代码写在需要操作的HTML标签前面时，获取元素的操作会失败，示例代码如下。;保存代码，在浏览器中进行测试，运行结果如下图所示。;下面通过窗口加载事件解决示例代码中出现的问题。;;;在实际开发中，为了能够响应用户调整浏览器窗口大小的操作，可以使用窗口大小改变事件resize，该事件有两种注册方式，第1种注册方式的示例代码如下。;下面通过代码进行演示。要求当用户调整窗口大小时，在控制台输出当前页面的宽度。;定时器;掌握定时器方法的使用，能够应用定时器延迟一段时间运行代码或间歇运行代码;window对象提供了两种用于设置定时器的方法，分别是setTimeout()方法和setInterval()方法，此外，还提供了两种用于清除定时器的方法，分别是clearTimeout()方法和clearInterval()方法。关于设置和清除定时器的方法说明如下。;;8.4.1 设置定时器方法;8.4.1 设置定时器方法;8.4.1 设置定时器方法;8.4.1 设置定时器方法;8.4.1 设置定时器方法;掌握3秒后自动关闭广告的案例，能够编写代码实现案例;在浏览网站的过程中，经常会在页面中看到广告，并显示自动关闭广告的倒计时。自动关闭广告的倒计时效果可以使用定时器实现。

下面将通过一个案例演示如何实现3秒后自动关闭广告。;掌