第二章-JavaScript操作BOM对象

本章简介:

我们在上一章认识了JavaScript的主要作用,JavaScript的基本语法及函数,和在网页中引入JavaScript的三种方式。

本章来认识与DOM相关的一些对象,其中包括了 window、document、location‘’、history对象,以及Data时间对象和常用的定时函数。

本章单词:

Confirm         确认提示窗

Open             打开

Close             关闭

Interval          间隔,

Timeout        超时

Element         元素

2、1     Window对象

浏览器对象模型(DOM)是JavaScript的组成之一,它提供了独立于内容与浏览器窗口进行交互的对象,使用浏览器对象模型可以实现与HTML的交互。

Window对象是整个BOM的核心,在浏览器中打开网页后,首先看到的是浏览器窗口,即顶层的window对象,其次才是网页文档内容(document)。

Window对象也称为浏览器对象,当浏览器打开HTML文档时,通常会创建一个window对象,如果文档定义了一个或多个框架,浏览器将为原始文档创建一个window对象,同时为每个框架另外创建一个window对象。

1       常用属性

History          有关客户访问过的URL的信息

Location        有关当前URL的信息

Screen           只读属性,包含有关客户端显示屏幕的信息

2       常用方法

Prompt()               显示可提示用户输入的对话框

window.prompt("","");

有两个参数,是输入对话框,用来提示用户输入一些信息。

Alert()                   显示一个带有提示信息和一个确定按钮的警告提示框

window.alert("");

只有一个参数,仅显示警告对话框的信息,无返回值,不能对脚步产生任何改变。

Confirm()              显示一个带有提示信息,“确定“和”取消”按钮的对话框。

    window.confirm("");

只有一个参数,是确认对话框,显示对话框的消息,“确认”和“取消”按钮。

Close()             关闭浏览器窗口

window.close();

Open()             打开一个新的浏览器窗口,加载指定的URL所指定的文档

window.open("");

SetTimeout()    在指定的毫秒数后调用函数和计算表达式,只调用一次

window.setTimeout("");

SetInterval()     按照指定的周期(以毫秒计)来调用函数或表达式,无限次调用。

window.setInterval("");

2、2     history对象

History对象提供用户最近浏览过的URL列表,出于隐私原因,已经不再允许脚步访问已经访问过的实际URL,但是可以使用history对象提供的方法,逐个返回访问过的页面的方法。

Back()       加载history对象列表中前一个URL。

                     等效于“后退”按钮

 

Forward()  加载history对象列表中后一个URL。

                     等效于“前进”按钮

 

Go()          加载history对象列表中某个具体的URL。

                     Go(1) 代表前进一页,等价于forward()方法。

                     Go(-1)代表后退一页,等价于back()方法。

2、3     location对象

Location对象提供当前页面的URL信息,并且可以重新装载当前的页面和装入新页面。

location对象属性:

host                     设置或返回主机名和当前的URL的端口号

hostname             设置或返回当前URL的主机名

href                      设置或返回完整的URL

 

location对象方法

reload                  重新加载当当前文档

replace                 用新的文档替换当前文档

2、4     document对象

document对象即是window对象的一部分,又代表了整个HMTL文档,可以用来访问页面中的所有元素,在使用document对象时,除了要适用于浏览器外,也要符合W3C标准。

document对象常用属性

Referrer        返回载入当前文档的URL

URL               返回当前文档RUL

document对象常用方法:

//返回对拥有指定 id 的第一个引用
document.getElementById("");

//返回带有指定名称的对象的集合
document.getElementsByName("");

//返回带有指定标签名的对象的集合
document.getElementsByTagName("");

//向文档写文本、HTML代码、JavaScript代码
document.write("");

innerHMLT是几乎所有的HMTL元素都有的属性,它是一个字符串,用来设置或者获取当前对象的开始标签和结束标签之间的HTML。

2、5    Date对象:

此对象用于操作日期和时间,和Java中的类很相似,需要使用 new对象名()的方式创建

var time = new Date()//获得当前的时间
 
time.getDate();         //返回一个月中的每一天,其值为 1~31
time.getDay();          //返回星期中的每一天,其值为 0~6
time.getHours();        //返回小时数,其值为 0~23
time.getMinutes();      //返回分钟数,其值为 0~59
time.getSeconds();      //返回秒数,其值为 0~59
time.getMonth();         //返回月数,其值为 0~11
time.getFullYear();      //返回年数,其值为 四位数
time.getTime();          //返回自 1970-1-1 日以来的毫秒数

2、6     Math对象

Math对象提供了许多与数学相关的功能,它是一个JavaScript的全局对象。

Math.ceil("25.5");         //对数字进行上舍入 返回 26
Math.floor("25.5");        //对数字进行下舍入 返回 25
Math.round("25.5");         //对数字进行四舍五入 返回 26     
Math.random();              //返回随机数            

2、7     定时函数

Javscript提供了俩个定时函数 setTimeout() 和 setInterval(),并且还提供了用于清除定时函数的两个函数 clearTimeout()和 clearInterval()

setTimeout()

此函数用于在指定的毫秒数后调用函数或者表达式,只执行一次。

window.setTimeout("");

setInterval()

此函数用于在指定的毫秒数后调用函数或者表达式,重复执行

window.setInterval("");

本章总结:

1、学会使用window对象可以实现弹出窗口,关闭当前窗口,弹出页面消息框等效果。

2、学会使用Date 对象可以获得当前系统的日期,时间。

3、学会使用history和location对象的相关属性和方法可以轻松实现浏览器中的“后退”和“进行”以及“刷新”功能。

4、学会使用 document的各个方法来访问元素。

5、学会使用两个定时函数,和清除它们。

猜你喜欢

转载自blog.csdn.net/weixin_42413153/article/details/80723222
今日推荐