《使用jQuery快速高效制作网页交互特效》Lesson2 JavaScript操作BOM对象

window 对象

浏览器对象模型（BOM）是JavaScript的组成之一，它提供了独立于内容与浏览器窗口进行交互的对象，使用浏览器对象模型可以实现与HTML的交互。它的作用是将相关的元素组织包装起来，提供给程序设计人员使用，从而降低开发人员的劳动量，提高设计Web页面的能力。

                                   BOM是一个分层结构

                                                 ↓

BOM通常可实现如下功能：

→弹出新的浏览器窗口。

→移动、关闭浏览器窗口及调整窗口的大小。

→在浏览器窗口中实现页面的前进、后退功能。

常用的属性

window对象的常用属性

名称	说明
history	有关客户访问过的URL的信息
location	有关当前URL的信息
screen	只读属性，包含有关客户端显示屏幕的信息

属性的语法格式：

window.属性名="属性值"

常用的方法

window对象的常用方法

名称	说明
prompt()	显示可提示用户输入的对话框
alert()	显示一个带有提示信息和一个“确定”按钮的警示对话框
confirm()	显示一个带有提示信息、“确定”和“取消”按钮的对话框
close()	关闭浏览器窗口
open()	打开一个新的浏览器窗口，加载给定URL所指定的文档
setTimeout()	在指定的毫秒数后调用函数或计算表达式
setInterval()	按照指定的周期（以毫秒计）来调用函数或表达式

方法的使用格式：

window.方法名();

1.confirm()

语法：

window.confirm("对话框中显示的纯文本");

示例：

var flag = confirm("确定要删除此条信息吗？");
    if (flag == true) {
        alert("删除成功！")
    } else {
        alert("取消删除！")
    }

alert()方法、prompt()方法、confirm()方法的不同：

→alert()只有一个参数，仅显示警告对话框的消息，无返回值，不能对脚本产生任何改变。

→prompt()有两个参数，是输入对话框，用来提示用户输入一些信息，单击“取消”按钮则返回null，单击“确定”按钮则返回用户输入的值，常用于用户关于特定问题而反馈的信息。

→confirm()只有一个参数，是确认对话框，显示提示对话框信息、“确定”按钮和“取消”按钮，单击“确定”按钮返回true，单击“取消”按钮返回false，因此与if-else语句搭配使用。

2.close()

语法：

window.close();

3.open()

语法：

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

窗口的特征属性

名称	说明
height、width	窗口文档显示区的高度、宽度，以像素计
left、top	窗口的x坐标、y坐标，以像素计
toolbar=yes|no|1|0	是否显示浏览器的工具栏，默认是yes
scrollbars=yes|no|1|0	是否显示滚动条，默认是yes
location=yes|no|1|0	是否显示地址栏，默认是yes
status=yes|no|1|0	是否添加状态栏，默认是yes
menubar=yes|no|1|0	是否显示菜单栏，默认是yes
resizable=yes|no|1|0	窗口是否可调节尺寸，默认是yes
titlebar=yes|no|1|0	是否显示标题栏，默认是yes
fullscreen=yes|no|1|0	是否使用全屏模式显示浏览器，默认是no

history对象与location对象

history对象提供用户最近浏览过的URL列表。

history对象的方法

名称	描述
back()	加载history对象列表中的前一个URL
forward()	加载history对象列表中的后一个URL
go()	加载history对象列表中的某个具体URL

→history.back()方法等效于浏览器中的“后退”按钮。

→history.forward()等效于浏览器中的“前进”按钮。

→go(n)方法中的n是具体的数字。

history,go(1)等价于forward()方法。

history,go(-1)等价于back()方法。

location对象提供当前页面的URL信息

location对象的属性

名称	说明
host	设置或返回主机名和当前URL的端口号
hostname	设置或返回当前URL的主机名
href	设置或返回完整的URL

location对象的方法

名称	说明
reload()	重新加载当前文档
replace()	用新的文档替换当前文档

location对象常用的属性是href，通过对此属性设置不同的网址，从而达到跳转功能。

例如：

<a href="javascript:location.href='flower.html'">查看详情</a>

document对象

document对象的常用属性

属性	描述
referrer	返回载入当前文档的URL
URL	返回当前文档的URL

语法：

document.referrer;
document.URL;

document对象的常用方法

方法	描述
getElementById()	返回对拥有指定id的第一个对象的引用
getElementsByName()	返回带有指定名称的对象集合
getElementByTagName()	返回带有指定标签名的对象的集合
write()	向文档写文本、HTML表达式或JavaScript代码

JavaScript内置对象

Date：用于操作日期和时间

Array：用于单独的变量名中存储一系列的值

String：用于支持对字符串的处理

Math：使我们有能力执行常用的数学任务，它包含了若干个数学常量和函数

Date对象

语法：

var 日期实例 = new Date(参数);

Date对象的常用方法

方法	说明
getDate()	返回Date对象的一个月中的每一天，其值为1~31
getDay()	返回Date对象的星期中的每一天，其值为0~6
getHours()	返回Date对象的小时数，其值为0~23
getMinutes()	返回Date对象的分钟数，其值为0~59
getSeconds()	返回Date对象的秒数，其值为0~59
getMonth()	返回Date对象的月份，其值为0~11
getFullYear()	返回Date对象的年份，其值为四位数
getTime()	返回自某一时刻（1970年1月1日）以来的毫秒数

示例：

<script type="text/javascript">
    function time() {
        var today = new Date();
        var hh = today.getHours();
        var mm = today.getMinutes();
        var ss = today.getSeconds();
        var yyyy = today.getFullYear();
        var m = today.getMonth();
        var dd = today.getDate();
        var d = today.getDay();
        var c;
        switch (d) {
            case d = 0:
                c = "星期日";
                break;
            case d = 1:
                c = "星期一";
                break;
            case d = 2:
                c = "星期二";
                break;
            case d = 3:
                c = "星期三";
                break;
            case d = 4:
                c = "星期四";
                break;
            case d = 5:
                c = "星期五";
                break
            case d = 6:
                c = "星期六";
                break;
        }
        var q;
        if (hh > 12) {
            q = "PM";
        } else {
            q = "AM";
        }
        document.getElementById("h1_time").innerHTML = yyyy + "年" + (m+1) + "月" + dd + "日" + "   " + hh + ":" + mm + ":" + ss + "   " + q + "   " + c;
    }
    var mytime = setInterval("time()", 1000);
</script>

Math对象

Math对象的常用方法

方法	说明	示例
ceil()	对数进行上舍入	Math.ceil(25.5);返回26 Math.ceil(-25.5);返回-25
floor()	对数进行下舍入	Math.floor(25.5);返回25 Math.floor(-25.5);返回-26
round()	把数四舍五入为最接近的数	Math.round(25.5);返回26 Math.round(-25.5);返回-26
random()	返回0~1中的随机数	Math.random();例如，0.51516684

如果希望返回一个1~100中的整数（包括1和100）：

var iNum=Math.floor(Math.random()*100+1);

定时函数

常用定时函数

1.setTImeout()

语法：

setTImeout("调用的函数名称",等待的毫秒数);

2.setInterval()

语法：

setInterval("调用的函数名称",周期性调用函数之间间隔的毫秒数);

3.clearTimeout()和clearInterval()

clearTimeout()函数用来清楚由setTime()函数设置的定时器。

语法：

clearTimeout(setTimeout()返回的ID值);

clearInterval()函数用来清楚由setInterval()函数设置的定时器。

语法：

clearInterval(setInterval()返回的ID值);