JavaScript教程--从入门到精通(八) | |||||||
用javascript脚本实现Web页面信息交互 要实现动态交互,必须掌握有关窗体对象(Form)和框架对象(Frames)更为复杂的知识。
在Forms[0]中共有三个基本元素,而Forms[1]中只有两个元素。 窗体对象最主要的功能就是能够直接访问HTML文档中的窗体,它封装了相关的HTML代码:
2、窗体对象的方法 窗体对象的方法只有一个--submit()方法,该方法主要功用就是实现窗体信息的提交。如提交Mytest窗体,则使用下列格式: document.mytest.submit() 3、窗体对象的属性 窗体对象中的属性主要包括以下:elements name action target encoding method. 除Elements外,其它几个均反映了窗体中标识中相应属性的状态,这通常是单个窗体标识;而elements常常是多个窗体元素值的数组,例: elements[0].Mytable.elements[1] 4、访问窗体对象 在javascript中访问窗体对象可由两种方法实现: (1)通过访问窗体 在窗体对象的属性中首先必须指定其窗体名,而后就可以通过下列标识访问窗体如:document.Mytable()。 (2)通过数组来访问窗体 除了使用窗体名来访问窗体外,还可以使用窗体对象数组来访问窗体对象。但需要注意一点,因窗体对象是由浏览器环境的提供的,而浏览器环境所提供的数组下标是由0到n。所以可通过下列格式实现窗体对象的访问: document.forms[0] document.forms[1] document.forms[2]... 5、引用窗体的先决条件 在javascript中要对窗体引用的条件是:必须先在页面中用标识创建窗体,并将定义窗体部分放在引用之前。 二、窗体中的基本元素 窗体中的基本元素由按钮、单选按钮、复选按钮、提交按钮、重置按钮、文本框等组成。 在javascript中要访问这些基本元素,必须通过对应特定的窗体元素的数组下标或窗体元素名来实现。每一个元素主要是通过该元素的属性或方法来引用。其引用的基本格式见下: formName.elements[].methadName (窗体名.元素名或数组.方法) formName.elemaent[].propertyName(窗体名.元素名或数组.属性) 下面分别介绍: 1、Text单行单列输入元素 功能:对Text标识中的元素实施有效的控制。 基本属性: Name:设定提交信息时的信息名称。对应于HTML文档中的Name。 Value:用以设定出现在窗口中对应HTML文档中Value的信息。 defaultvalue:包括Text元素的默认值 基本方法: blur():将当前焦点移到后台。 select():加亮文字。 主要事件: onFocus:当Text获得焦点时,产生该事件。 OnBlur:从元素失去焦点时,产生该事件。 Onselect:当文字被加亮显示后,产生该文件。 onchange:当Text元素值改变时,产生该文件。 例:...
2、textarea多行多列输入元素 功能:实施对Textarea中的元素进行控制。 基本属性 name:设定提交信息时的信息名称,对应HTML文档Textarea的Name。 Value:用以设定出现在窗口中对应HTML文档中Value的信息。 Default value:元素的默认值。 方法: blur():将输入焦点失去 select():将文字加亮后 事件: onBlur:当失去输入焦点后产生该事件 onFocus:当输入获得焦点后,产生该文件 Onchange:当文字值改变时,产生该事件 Onselect:当文字加亮后,产生该文件 3、Select选择元素 功能:实施对滚动选择元素的控制。 属性: name:设定提交信息时的信息名称,对应文档select中的name。 Length:对应文档select中的length options:组成多个选项的数组 selectIndex;该下标指明一个选项 select在中每一选项都含有以下属性: Text:选项对应的文字 selected:指明当前选项是否被选中 Index:指明当前选项的位置 defaultselected:默认选项 事件: OnBlur:当select选项失去焦点时,产生该文件。 onFocas:当select获得焦点时,产生该文件。 Onchange:选项状态改变后,产生该事件。 4、Button按钮 功能:实施对Button按钮的控制。 属性: Name:设定提交信息时的信息名称,对应文档中button的Name。 Value:用以设定出现在窗口中对应HTML文档中Value的信息。 方法: click()该方法类似于一个按下的按钮。 事件: onclick当单击button按钮时,产生该事件。 例 :
5、checkbox检查框 功能:实施对一个具有复选框中元素的控制。 属性: name:设定提交信息时的信息名称。 Value:用以设定出现在窗口中对应HTML文档中Value的信息。 Checked:该属性指明框的状态true/false. defauitchecked:默认状态 方法: click()该方法使得框的某一个项被选中。 事件: onclick:当框的选被选中时,产生该事件。 6、radio无线按钮 功能:实施对一个具单选功能的无线按钮控制。 属性: name:设定提交信息时的信息名称,对应HTML文档中的radio的name相同 value:用以设定出现在窗口中对应HTML文档中Value的信息,对应HTML文档中的radio的name。 length:单选按钮中的按钮数目。 defalechecked:默认按钮。 checked:指明选中还是没有选中。 index:选中的按钮的位置。 方法: chick():选定一个按钮。 事件: onclick:单击按钮时,产生该事件。 7、hidden:隐藏 功能:实施对一个具有不显示文字并能输入字符的区域元素的控制。 属性: name:设定提交信息时的信息名称,对应HTML文档的hidden中的Name。 Value:用以设定出现在窗口中对应HTML文档中Value的信息,对应HTML文档hidden中的value。 defaleitvalue:默认值 8、Password口令 功能:实施对具有口令输入的元素的控制。 属性: Name:设定提交信息时的信息名称,对应HTML文档中password中的name。 Value:用以设定出现在窗口中对应HTML文档中Value的信息,对应HTML文档中password中的Value。 defaultvalu:默认值 方法 select():加亮输入口令域。 blur():使这丢失passward输入焦点。 focus():获得password输入焦点。 9、submit提交元素 功能:实施对一个具有提交功能按钮的控制。 属性: name:设定提交信息时的信息名称,对应HTML文档中submit。 Value:用以设定出现在窗口中对应HTML文档中Value的信息,对应HTML文档中value。 方法 click()相当于按下submit按钮。 事件: onclick()当按下该按钮时,产生该事件。 三、范例 下面我们演示通过点击一个按钮(red)来改变窗口颜色,点击“调用动态按钮文档”调用一个动态按钮文档。 test8_1.htm
图1 动态按钮程序。 test8_2.htm
图2 本讲介绍了使用javascript脚本实现Web页面信息交互的方法。其中主要介绍了窗体中的基本元素的主要功能和使用。 |
JavaScript教程--从入门到精通(八)
最新推荐文章于 2024-06-19 11:13:18 发布