JavaScript页面信息交互

  本讲介绍了使用JavaScript脚本实现Web页面信息交互的方法。其中主要介绍了窗体中的基本元素的主要功能和使用。要实现动态交互,必须掌握有关窗体对象(Form)和框架对象(Frames)更为复杂的知识。

  一、窗体基础知识

  窗体对象可以使设计人员能用窗体中不同的元素与客户机用户相交互,而用不着在之前首先进行数据输入,就可以实现动态改变Web文档的行为。

  1、什么是窗体对象

  窗体(Form):它构成了Web页面的基本元素。通常一个Web页面有一个窗体或几个窗体,使用Forms[]数组来实现不同窗体的访问。

  在Forms[0]中共有三个基本元素,而Forms[1]中只有两个元素。www.82676666.com

  窗体对象最主要的功能就是能够直接访问HTML文档中的窗体,它封装了相关的HTML代码:

  Name ="表的名称"

  Target ="指定信息的提交窗口"

  action ="接收窗体程序对应的URL"

  Method =信息数据传送方式(get/post)

  enctype ="窗体编码方式"

  []>

  2、窗体对象的方法

  窗体对象的方法只有一个--submit()方法,该方法主要功用就是实现窗体信息的提交。如提交Mytest窗体,则使用下列格式:

  document.mytest.submit()

  3、窗体对象的属性

  窗体对象中的属性主要包括以下:elements name action target encoding method.

  除Elements外,其它几个均反映了窗体中标识中相应属性的状态,这通常是单个窗体标识;而elements常常是多个窗体元素值的数组,例:

  elements[0].Mytable.elements[1]

  4、访问窗体对象

  在JavaScript中访问窗体对象可由两种方法实现:www.hrbfc120.com

  (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元素值改变时,产生该文件。www.120hrb.com

  例:...

  ...

  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:选项状态改变后,产生该事件。www.hrbfkyy120.com

  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:单击按钮时,产生该事件。www.mlybyby.com

  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按钮。www.mlyrx120.com

  事件:

  onclick()当按下该按钮时,产生该事件。

时间: 2024-12-28 01:31:21

JavaScript页面信息交互的相关文章

关于父子页面的交互

转:http://www.cnblogs.com/zhaozhengling/archive/2012/12/04/2801697.html这两天做项目的时候需要实现一个功能,就是点击父页面上的一个超链接或是控件,然后弹出一个新的子页面.在子页面中作出相应的操作,然后将子页面的值传递到父页面,效果图如下: 根据网上的资料用js几句话就可以搞定,可是自己做起来之后发现却没那么简单,网上的说法是当点击这个超链接(此处为文本框)时触发一个事件, window.showModalDialog("要跳转的

flex4 flash与容器的信息交互

ExternalInterface类是flex4 flash与容器实心信息交互的类.官方定义:ExternalInterface 类是用来支持在 ActionScript 和 SWF 容器(例如,含有 JavaScript 的 HTML 页或使用 Flash Player 播放 SWF 文件的桌面应用程序)之间进行直接通信的应用程序编程接口. 通过 ExternalInterface 类,您可以在 Flash 运行时中使用 HTML 页面中的 JavaScript 调用 ActionScript

jQuery_review之使用$.getScript()以及$.getJSON来与服务端进行异步信息交互

jQuery还提供了两个非常实用的方法,分别是$.getScript()以及$.getJSON().这个两个方法非常之重要,假设我们现在要编写一个框架,如果能在后台控制前台表格的动作,我们应该怎么做?肯定是要在后台向前台发送一个JavaScript,从而让前台的JavaScript执行,当然有很多方法,比如创建一个Script的节点放在DOM树中,或者是在HTML中增加一个<script>节点,都是解决这个问题的方法.但是getScript也不失是解决这个问题的一个很好地方案. 此外,现在JS

文档型信息交互设计及相关技术实现

本文信息交互是指办公和经营管理活动中所产生的公众或定向业务信息,以及在信息共享过程中,以业务规则形式衍生出的评论.评价.回复.转发等业务信息延续. 信息交互设计目标 共享业务信息,并支持限定范围 共享的业务信息,可以通过评论.评价.回复.转发等方式进行业务信息延续和推广 把发布信息.延续信息功能设计为通用功能 以信息实例为基本文档单元,衍生信息为其子文档,存储在文档型数据库中(MongoDB) 信息展现形式灵活多样,以模板形式为用提供应用选择 发布信息支持带格式文档,统一采用MarkDown编辑

PHP学习笔记-PHP与Web页面的交互2

转载请标明出处: http://blog.csdn.net/hai_qing_xu_kong/article/details/51761308 本文出自:[顾林海的博客] 前言 在<PHP学习笔记-PHP与Web页面的交互1>笔记中讲解了form表单的一些属性,包括它的输入域标记.选择域标记和文字域标记的写法,接下来的内容就是讲如何获取表单数据以及PHP数据的传递,包括对各种控件值的获取. 插入表单 提交表单之前一定得有表单,当我们的表单创建完毕后可以将表单插入Web页中,代码如下: <

iOS中JavaScript和OC交互

在iOS开发中很多时候我们会和UIWebView打交道,目前国内的很多应用都采用了UIWebView的混合编程技术,最常见的是微信公众号的内容页面.前段时间在做微信公众平台相关的开发,发现很多应用场景都是利用HTML5和UIWebView来实现的. 机制 Objective-C语言调用JavaScript语言,是通过UIWebView的 - (NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;的方法来实现的.

Markdown文本编辑器在信息发布及信息交互功能上的使用(一)

Markdown是一种可以使用普通文本编辑器编写的标记语言,通过类似HTML的标记语法,它可以使普通文本内容具有一定的格式. MarkdownEditor 是一款基于浏览器的 Markdown 文本编辑器,功能非常简单实用. 在线地址:http://jbt.github.io/markdown-editor 资源地址:https://github.com/jbt/markdown-editor 此文本编辑器使用许可描述为"只要你喜欢,你可以随意复制.修改和使用他.(Feel free to ta

struts2 + jquery + json 简单的前后台信息交互

ajax 是一种客户端与服务器端异步请求的交互技术.相比同步请求,大大提高了信息交互的速度和效率.是当下非常实用和流行的技术. 这里简单的说明 struts2 + jquery + json 下的 信息传递. 1 . 首先创建一个 静态页面 ,然后在 脚本中 写一个 ajax 方法如下: $.ajax({ type : "get" , url : "ajax/ajax?time="+Math.random() , datatype : "json"

iOS中JavaScript和OC交互 --by 胡 xu

在iOS开发中很多时候我们会和UIWebView打交道,目前国内的很多应用都采用了UIWebView的混合编程技术,最常见的是微信公众号的内容页面.前段时间在做微信公众平台相关的开发,发现很多应用场景都是利用HTML5和UIWebView来实现的. 机制 Objective-C语言调用JavaScript语言,是通过UIWebView的 - (NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;的方法来实现的.