文档中的对象模块 javascript

【文档中的对象模块】

当页面已经被下载到客户端时,浏览器就会创建几个用来存储页面信息和页面内容的对象。这些对象构成了一个树状结构 (对象的引用也是根据这种树一层一层引用的,引用时使用 “.” 号),在这棵“树”中,最高层的对象是 window 对象,window 对象具有以下的属性:

  • location - 页面的地址 (URL) 信息;
  • history - 包括了当前打开的这个浏览器访问过的地址 (URL) 列表;
  • frames - 如果页面使用了帧 (frame) 的话,这个对象包含了帧的版面布局的信息以及每一个帧所对应的窗口 (window) 对象;
  • document - 包含了页面的内容信息;
  • screen - 描述屏幕的尺寸和颜色 (仅限于 Netscape 4.0)。

在这同时,浏览器还会创建另一个高层的对象叫 navigator,这个对象包含了浏览器的类型、版本、安装的插件等等信息。

就像前边说的一样,使用英文的句号 (.) 来引用上边的对象以及对象的属性,例如,要获得当前页面的地址 (URL) 信息,我们可以这样用:

var url = window.location.href;

此外,还有一个很方便的东东产生了,那就是浏览器在创建 window navigator 对象的同时,也会将 window 的属性 locationhistorydocument 创建为高层对象,所以对于上边的语句,我们还可以简便的写成:

var url = location.href;

下边就简单的介绍一下 JavaScript 中为浏览器提供的对象。

window 对象】

window 对象提供了一些很有用的方法,使用这些方法你可以在浏览器中弹处对话框 (pop-up):

  • alert() 显示一个消息框,只有一个 'OK' ('确定') 按钮;
  • confirm() 显示一个对话框,带有 'OK' ('确定') 和 'Cancel' ('取消') 按钮;
  • prompt() 显示一个可以让用户输入信息的对话框。

看一下这个 在线示例 就一切都明白了。

我们在调试 JavaScript 脚本代码的时候经常会使用 alert() 方法,你可以将这个函数放在你的代码中,让它显示出所要调试的变量或对象的值,这对于在调试代码时跟踪错误是很重要的。

window 提供的另一些方法是打开、关闭窗口或者改变窗口的显示方式,我们将在第三部分讲到这几个方法的使用。

另外,window 对象中还有一个经常被用到的方法:setTimeout() 方法。此方法可以让 JavaScript 每隔一段间隔时间执行一段代码,代码的执行遵循事件句柄中的规则,也就是说,在这个函数中,每隔一段时间就会执行几条 JavaScript 代码 (每条代码使用“;”隔开) 或者执行调用的函数:

setTimeout("count++; alert('Hello world!');", 500);

上边的代码将会每隔半秒钟 (500毫秒) 执行一次 “count++; alert('Hello world')” 代码,此代码包含了两条 JavaScript 语句。也即是说,setTimeout() 方法有两个参数,第一个参数是想要执行的代码或函数 (在此例中是代码:count++; alert('Hello world')),第二个函数是间隔时间,单位是毫秒 (在此例中是500毫秒)。

setTimeout() 方法的返回值是一个唯一的数值,这个数值有什么用呢?如果你想要终止 setTimeout() 方法的执行,那就必须使用 clearTimeout() 方法来终止,而使用这个方法的时候,系统必须知道你到底要终止的是哪一个 setTimeout() 方法 (因为你可能同时调用了好几个 setTimeout() 方法),这样 clearTimeout() 方法就需要一个参数,这个参数就是 setTimeout() 方法的返回值 (数值),用这个数值来唯一确定结束哪一个 setTimeout() 方法:

var id = setTimeout("myFunction(arg1, arg2);", 3000);

...其它的 JavaScript 语句...

if (error)
clearTimeout(id); // 出现错误时终止 setTimeout() 方法的执行

需要注意的是,setTimeout() 方法并不会让浏览器暂停执行跟在此方法后的程序代码,浏览器会一直顺着每行代码往下执行,只不过是其它代码只执行一次,而 setTimeout() 方法则是隔一段时间执行一次。在 Netscape 4.0 中,你还可以通过使用 setInterval() 方法重复执行一段代码或函数,相对应的使用 clearInterval() 方法终止前一个方法的执行,这两个方法与 setTimeout()clearTimeout() 方法是一样的,这里就不再多说了。

看一下这个 在线示例 吧,这个例子通过使用 setTimeout() 方法重复的调用一个函数,通过这个函数来获得当前的时间,并将时间显示在页面上,看起来就像是一个正在走的时钟。

frame 对象】

frame 即是帧,每一个帧对应一个窗口,每一个帧都是由一个 window 对象来指定的,当有一个页面使用了帧设置 (frameset) 的时候,主窗口 (又称为母窗口或母帧) 的 window 对象就包含了一个名为 frames 的数组,这个数组的每一个元素对应一个子帧 (或叫子窗口) ,而每一个子帧都对应一个 window 对象。

那些子窗口/子帧也可以通过使用帧设置 (frameset) 拥有子窗口 (对于最顶层的窗口来说就是孙子窗口了),这样的话它们也就同时拥有了对应于它们的子窗口的数组 frames 。 在某一窗口/帧的页面上使用 window.parent 或者只是 parent 即可指向此窗口的父窗口对象。同理,可以使用 window.parent.parent 指向此窗口的父窗口的父窗口,而使用 window.top 则可以直接指向所有帧中最高层的父窗口。

这样你就可以在这个帧里使用另一个帧里的数据或调用另一个帧里的函数了,详细讲述请参考第三部分。

document 对象】

document 对象可能将会是你使用的最多的对象之一。此对象包含了与页面内容相关的几个属性,请看:

  • bgColor - 页面的背景色;
  • fgColor - 页面的前景色,即文本的颜色;
  • linkColor - 超文本链接的颜色;
  • lastModified - 此页面 (HTML 文件) 最后被修改的时间;
  • images - 图片对象组成的数组,数组中的每一个元素对应于网页中的每一个 <IMG> 标记,数组元素对应的顺序是在 HTML 文件代码中标记出现的先后顺序;
  • forms - 表单 (form) 对象组成的数组,数组中的每一个元素对应于网页中的每一个 <FORM> 标记,数组元素对应的顺序是在 HTML 文件代码中标记出现的先后顺序;
  • links - 超文本链接对象组成的数组,数组中的每一个元素对应于网页中的每一个 <A> 标记,数组元素对应的顺序是在 HTML 文件代码中标记出现的先后顺序;

通常情况下,这些属性对应的是 HTML 标记的属性值,例如 bgColor 属性对应的是 <BODY> 标记中 BGCOLOR="..." 代码中的属性值,你会发现,在其它标记 (像图片和超文本链接) 中也是这样对应的。

imagesformslinks 属性实际上都是数组,对于数组中的元素,通常会使用像下边的语句那样访问之:

var abc = document.images[3];

这样变量 abc 指向的是网页中的第四个 (因为在 JavaScript 中数租下标是从 0 开始的) <IMG> 标记对应的图片对象,这样用起来其实并不方便,因为如果图片太多,你就必须知道每一个图片在网页中排在第几,要不然就无法知道数组的下标应该是几。不过不用担心, JavaScript 提供了一个方便的方法让你指向图片对象,那就是通过各个图片元素的名字:

var abc = document.images["menu"];

要使用这种方法,你就必须在 <IMG> 标记中加入 NAME= "图片的英文名" 的代码,此例中,<IMG> 标记的代码为:<IMG NAME="menu" SRC="test.gif">,这样你就再也不用担心你要引用的图片对象在网页中的排位顺序了,只要给它取个名字就可以了。 (在 Netscape 3.0 中,这种给图片命名的方法并不好用,可能会的不到正确的结果,这也是 Netscape 3.0 的一个 bug。)

在使用这种方法给网页中的图片对象取名子的时候,千万注意不要有重名的情况,否则就得不到正确结果了。此外,你还可以使用下边的代码一样代替上边的代码:

var abc = document.menu; // 这条语句和 var abc = document.images["menu"]; 是等价的

【图片对象 Image

关于一个图片的信息可以保存在一个叫 Image 的对象中,此对象包含了图片路径 (URL)、图片当前的下载状态、图片的高度和宽度等信息,通常情况下你会将此对象指向在 document.images 数组中存在的图片,也就是放在网页中的图片,但是有时候你可能要处理一些不在网页中的图片对象,这时候 Image 对象就派上用场了。

当你要实现图片翻滚效果的时候,提前将你想要使用的图片下载到客户端是一个很好的想法,因为这样的话,当用户触发事件,要换图片的时候,那个图片已经在客户端了,于是图片就会马上显示出来,避免了时间的延迟,否则换图的时候再让浏览器从服务器上下载图片的话,图片翻滚就有时间延迟了。而使用 Image 对象就可以做到提前下载图片的目的,如下边的代码一样,使用 Image 对象的 src 属性指定图片的路径 (URL),这样就将 images 目录下的图片 pic2.gif 下载到客户端了:

var myImg = new Image();
myImg.src = "images/pic2.gif";
这段代码将迫使浏览器开始从服务器下载指定的图片,如果客户端的缓存 (Cache) 中有这个图片的话,浏览器会自动将其覆盖,那样,当用户将鼠标移动到图片上边的时候,图片将会立即变换,不会有时间的延迟。

 

看看改进后的图片翻滚的 在线示例 吧,此程序使用了 Image 对象预先下载图片的方法。注意:此例不能在 Internet Explorer 3.0 或更早的版本中使用,因为它们不支持。

【超链接对象 link

通常你可能不会想到使用 link对象,如果想知道超链接的地址 (URL),你可以使用 href 属性,如果想知道超链接目标窗口 (window) 或目标帧 (frame),你可以使用 target 属性。

link 对象还包含一个 imagemap 对象,它对应的是 HTML 文件中的 <MAP> 标记。

【表单对象 form

form 对象自身用的并不是很多,但是 form 对象包含了很多别的元素对象,这些对象组成了表单 form。这些对象包括:文本框对象 (text)、密码框对象 (password)、单选框对象 (radio button)、复选框对象 (check box)、多行文本域 (text area)、隐藏域 (hidden field)、选择列表/下拉列表 (selection list option)、提交按钮 (submit button)、重置按钮 (reset button),它们对应的 HTML 标记可以参照相关的 HTML 语言参考。

这些对象都有共同的属性 namevaluevalue 属性是用户输入的数据或 HTML 文件给定的值,在 HTML 标记中,这两个属性分别对应的代码是 NAME="..."VALUE="...."

在使用 form 里的那些元素对象之前,首先你必须要引用 form 对象才行,因为 form 对象是那些对象的父对象,而 form 对象前边也要引用它的上一层父对象 document,这种层层引用是很重要的:

document.forms[0] // 指向页面中的第一个 form 对象
document.forms["order"] // 指向名为 order 的 form 对象,即<FORM>标记中包含有代码 NAME="order" 的表单
document.order // 这和上一行的代码是等价的
类似的,你可以通过表单 form 对象的 elements 数组访问每一个 input 对象,同时也可以使用表单中各个元素对象的名字来访问这些对象。input 对象的名字也是通过 <INPUT> 标记中的 NAME="..." HTML 代码来命名的:

 

document.forms[0].elements[3]
// 第一个表单 form 中的第三个 input 元素
document.forms["order"].elements["address"]
// 指向名为 order 的表单中名为 address 的对象
document.order.address
// 指向名为 order 的表单中名为 address 的对象,和上一行代码是一样的

通常我们使用表单对象来检查用户的输入是否正确或者用户提交的数据是否正确,这种检查是在表单数据被提交到服务器之前进行的,这样做可以节省用户填表的时间,保证用户只提交一次表单。请看 在线示例 ,此例中演示了如何使用 formform 里边的其它对象来检查用户输入的。

此例中一些需要注意的地方:

  • 我们在 <form> 标记中使用了 onSubmit 事件,此事件在用户按下“提交”按钮的时候,调用函数 checkForm() 来检查用户输入;
  • 在函数 checkForm() 中,无论表单中的哪一项没有填写,都会弹出一个带有错误信息的消息框,并使用 focus() 方法将鼠标的焦点放在相应的输入框 (input) 中;
  • 如果表单中有项目没有填写,checkForm() 函数会返回 false 值,而 onSubmit() 函数在获得 false 值之后,不执行提交表单内容的动作。如果返回致使 trueonSubmit() 则会执行提交的动作。 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值