JavaScript入门教程(10):认识其他对象

2016-02-20 00:54 6 1 收藏

图老师设计创意栏目是一个分享最好最实用的教程的社区,我们拥有最用心的各种教程,今天就给大家分享JavaScript入门教程(10):认识其他对象的教程,热爱PS的朋友们快点看过来吧!

【 tulaoshi.com - Web开发 】

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)


用法:document.anchors[[x]]; document.links[[x]]; anchorId; linkId
  document.anchors 是一个数组,包含了文档中所有锚标记(包含 name 属性的a标记),按照在文档中的次序,从 0 开始给每个锚标记定义了一个下标。
  document.links 也是一个数组,包含了文档中所有连接标记(包含 href 属性的a标记和map标记段里的area标记),按照在文档中的次序,从 0 开始给每个连接标记定义了一个下标。
  如果一个a标记既有 name 属性,又有 href 属性,则它既是一个 Anchor 对象,又是一个 Link 对象。
  在 IE 中,如果在a标记中添加id="..."属性,则这个a对象被赋予一个标识(ID),调用这个对象的时候只需要使用id就行了。很多文档部件都可以用这个方法来赋予 ID,但要注意不能有两个 ID 相同。
anchors 和 links 作为数组,有数组的属性和方法。单个 Anchor 对象没有属性;单个 Link 对象的属性见下。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)
属性
protocol; hostname; port; host; pathname; hash; search; href 与 location 对象相同。
target
返回/指定连接的目标窗口(字符串),与a标记里的 target 属性是一样的。
事件
; ; ; ;
它是一个数组,包含了文档中所有的 Applet 对象(Java 小程序)。作为一个数组,有数组的属性和方法。关于单个 Applet 对象的属性和方法,我引用一句话:Applet 对象继承了 Java 小程序的所有公共属性和方法。(英文原句:The Applet object inherits all public properties of the Java applet./The Applet object inherits all public methodss of the Java applet.) 因为本人很厌恶 Java 小程序,所以对它的什么公共私有的问题不感兴趣,也就没有探讨了。
它是一个数组,包含了文档中所有的插件(embed标记)。因为每个插件的不同,每个 Embed 对象也有不同的属性和方法。
document.forms[] 是一个数组,包含了文档中所有的表单(form)。要引用单个表单,可以用 document.forms[x],但是一般来说,人们都会这样做:在form标记中加上name="..."属性,那么直接用document.表单名就可以引用了。
Form 对象的属性
name 返回表单的名称,也就是form name="..."属性。
action
返回/设定表单的提交地址,也就是form action="..."属性。
method 返回/设定表单的提交方法,也就是form method="..."属性。
target 返回/设定表单提交后返回的窗口,也就是form target="..."属性。
encoding 返回/设定表单提交内容的编码方式,也就是form enctype="..."属性。
length 返回该表单所含元素的数目。
方法
reset() 重置表单。这与按下重置按钮是一样的。
submit() 提交表单。这与按下提交按钮是一样的。
事件
;
以下从Button到Textarea都是表单的元素对象。
由input type="button"指定。引用一个 Button 对象,可以使用文档对象.表单对象.按钮名称。按钮名称指在input标记中的name="..."属性的值。引用任意表单元素都可以用这种方法。
属性
name 返回/设定用input name="..."指定的元素名称。
value
返回/设定用input value="..."指定的元素的值。
form 返回包含本元素的表单对象。
方法
blur() 从对象中移走焦点。
focus() 让对象获得焦点。
click() 模拟鼠标点击该对象。
事件
; ;
由input type="checkbox"指定。
属性
name 返回/设定用input name="..."指定的元素名称。
value
返回/设定用input value="..."指定的元素的值。
form 返回包含本元素的表单对象。
checked 返回/设定该复选框对象是否被选中。这是一个布尔值。
defaultChecked 返回/设定该复选框对象默认是否被选中。这是一个布尔值。
方法
blur() 从对象中移走焦点。
focus()
让对象获得焦点。
click() 模拟鼠标点击该对象。
事件

表单对象.elements 是一个数组,包含了该表单所有的对象。一般我们不用该数组,而直接引用各个具体的对象。
由input type="hidden"指定。
属性
name 返回/设定用input name="..."指定的元素名称。
value
返回/设定用input value="..."指定的元素的值。
form
返回包含本元素的表单对象。
由input type="password"指定。
属性
name 返回/设定用input name="..."指定的元素名称。
value
返回/设定密码输入区当前的值。
defaultValue
返回用input value="..."指定的默认值。
form
返回包含本元素的表单对象。
方法
blur() 从对象中移走焦点。
focus()
让对象获得焦点。
select() 选中密码输入区里全部文本。
事件

由input type="radio"指定。一组 Radio 对象有共同的名称(name 属性),这样的话,document.formName.radioName 就成了一个数组。要访问单个 Radio 对象就要用:document.formName.radioName[x]。
单个 Radio 对象的属性
name 返回/设定用input name="..."指定的元素名称。
value
返回/设定用input value="..."指定的元素的值。
form
返回包含本元素的表单对象。
checked
返回/设定该单选域对象是否被选中。这是一个布尔值。
defaultChecked
返回/设定该对象默认是否被选中。这是一个布尔值。
方法
blur() 从对象中移走焦点。
focus()
让对象获得焦点。
click()
模拟鼠标点击该对象。
事件

由input type="reset"指定。因为 Reset 也是按钮,所以也有 的属性和方法。至于onclick事件,一般用 对象的 代替。
由select指定。
属性
name 返回/设定用input name="..."指定的元素名称。
length
返回 Select 对象下选项的数目。
selectedIndex
返回被选中的选项的下标。这个下标就是在 options[] 数组中该选项的位置。如果 Select 对象允许多项选择,则返回第一个被选中的选项的下标。
form
返回包含本元素的表单对象。
方法
blur() 从对象中移走焦点。
focus()
让对象获得焦点。
事件

options[] 是一个数组,包含了在同一个 Select 对象下的 Option 对象。Option 对象由select下的options指定。
options[] 数组的属性
length; selectedIndex 与所属 Select 对象的同名属性相同。
单个 Option 对象的属性
text 返回/指定 Option 对象所显示的文本
value
返回/指定 Option 对象的值,与options value="..."一致。
index
返回该 Option 对象的下标。对此并没有什么好说,因为要指定特定的一个 Option 对象,都要先知道该对象的下标。这个属性好像没有什么用。
selected
返回/指定该对象是否被选中。通过指定 true 或者 false,可以动态的改变选中项。
defaultSelected 返回该对象默认是否被选中。true / false。
由input type="submit"指定。因为 Submit 也是按钮,所以也有 的属性和方法。至于onclick事件,一般用 对象的 代替。
由input type="text"指定。Password 对象也是 Text 对象的一种,所以 所有的属性、方法和事件,Text 对象都有。
由textarea指定。Textarea 对象所有的属性、方法和事件和 相同,也就是跟 一样。
document.images[] 是一个数组,包含了文档中所有的图片(img)。要引用单个图片,可以用 document.images[x]。如果某图片包含name属性,也就是用img name="..."这种格式定义了一幅图片,就可以使用document.images['...']这种方法来引用图片。在 IE 中,如果某图片包含 ID 属性,也就是用img id="..."这种格式定义了一幅图片,就可以直接使用imageID来引用图片。
单个 Image 对象的属性
name; src; lowsrc; width; height; vspace; hspace; border 这些属性跟img标记里的同名属性是一样的。在 Netscape 里,除了 src 属性,其它属性(几乎全部)都不能改的,即使改了,在文档中也不能显示出效果来。这些属性最有用的就是 src 了,通过对 src 属性赋值,可以实时的更改图片。
事件

不显示在文档中的 Image 对象
不显示在文档中的 Image 对象是用 var 语句定义的:
var myImage = new Image(); 或
var myImage = new Image(图片地址字符串);
然后就可以像一般 Image 对象一样对待 myImage 变量了。不过既然它不显示在文档中,以下属性:lowsrc, width, height, vspace, hspace, border 就没有什么用途了。一般这种对象只有一个用:预读图片(preload)。因为当对对象的 src 属性赋值的时候,整个文档的读取、JavaScript 的运行都暂停,让浏览器专心的读取图片。预读图片以后,浏览器的缓存里就有了图片的 Copy,到真正要把图片放到文档中的时候,图片就可以立刻显示了。现在的网页中经常会有一些图像连接,当鼠标指向它的时候,图像换成另外一幅图像,它们都是先预读图像的。
预读图像的 JavaScript 例子
var imagePreload = new Image();
imagePreload.src = '001.gif';
imagePreload.src = '002.gif';
imagePreload.src = '003.gif';
以上例子适合预读少量图片。
function imagePreload() {
  var imgPreload = new Image();
  for (i = 0; i arguments.length; i++) {
    imgPreload.src = arguments[i];
  }
}
imagePreload('001.gif', '002.gif', '003.gif', '004.gif', '005.gif');

以上例子适合预读大量图片。

来源:http://www.tulaoshi.com/n/20160220/1632819.html

延伸阅读
标签: Web开发
使用 Cookies 我们已经知道,在 document 对象中有一个 cookie 属性。但是 Cookie 又是什么?某些 Web 站点在您的硬盘上用很小的文本文件存储了一些信息,这些文件就称为 Cookie。 MSIE 帮助。一般来说,Cookies 是 CGI 或类似,比 HTML 高级的文件、程序等创建的,但是 JavaScript 也提供了对 Cookies 的很全面的访问权利。 在继续...
标签: Web开发
anchors[]; links[]; Link 连接对象 用法:document.anchors[[x]]; document.links[[x]]; anchorId; linkId document.anchors 是一个数组,包含了文档中所有锚标记(包含 name 属性的a标记),按照在文档中的次序,从 0 开始给每个锚标记定义了一个下标。 document.links&nb...
; Photoshop还提供了其他的一些色彩调整命令,对于这些命令我们不再详细介绍,只采取简述的形式。其中通道混和器这个工具目前较难理解,因此暂时不作介绍。在今后应用到的时候再作讲解。并且随着大家对Photoshop和基础概念的日益深化,自己也有可能无师自通的。渐变映射命令我们将在介绍了渐变设定之后再作介绍。可选颜色命令在...
:“新手应该怎样做学习Photoshop”?为了帮助解决这个困惑,将更多的PS爱好者领进门,特整理编辑了《新手学习Photoshop入门教程》(原书由赵鹏编写)。本入门教程注重基础知识,辅以经典实例,是新手学习Photoshop很好的参考资料。 1226在前面的学习过程中,大家可能会遇到所绘制的路径不知为何消失的情况,怎么也找...
标签: Web开发
事件处理 概述 事件处理是对象化编程的一个很重要的环节,没有了事件处理,程序就会变得很死,缺乏灵活性。事件处理的过程可以这样表示:发生事件 - 启动事件处理程序 - 事件处理程序作出反应。其中,要使事件处理程序能够启动,必须先告诉对象,如果发生了什么事情,要启动什么处理程序,否则这个流程就不能进行下去。事件的处理程序...

经验教程

779

收藏

63
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部