《使用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值);
阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页