JavaScript (基本教程)(5)

时间：2013-04-25 10:39 来源：网络整理作者：采集侠收藏

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

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="..." 代码中的属性值，你会发现，在其它标记 (像图片和超文本链接) 中也是这样对应的。

images、forms 和 links 属性实际上都是数组，对于数组中的元素，通常会使用像下边的语句那样访问之：

var abc = document.images[3];

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

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

要使用这种方法，你就必须在 <IMG> 标记中加入 NAME= "图片的英文名" 的代码，此例中，<IMG> 标记的代码为：<IMG 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 语言参考。

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

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

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