首页 web前端 js教程 javascript对象

javascript对象

Oct 29, 2016 pm 01:35 PM
javascript js 对象

1、什么是表单对象  

表单(

)是Web页面中的基本元素。表单对象最主要的功能就是能够直接访问页面中的表单。利用表单对象,可以实现与用户的交互;不需要服务器的介入,就可以实现动态改变Web页面的行为。对于Web页面表单,通常使用document对象的forms数组可以很方便地访问不同的表单。例如,某HTML文件片段如下:  

  

  

  

  

  

  

  

  

  

document对象的forms数组有两个元素:forms[0]可以访问第一个表单,其中共有三个基本元素:而forms[1]对应表单form2,其中只有两个元素。  

除了用forms数组方式访问表单对象外,也可以直接用表单的名字进行访问。例如,对于上例,也可以用document.form1和document.form2分别访问两个表单。  

2、表单对象的方法  

表单对象的submit()方法用于实现表单信息的提交。例如,要提交页面中的一个名为form1的表单,可以使用下列语句:  

document.form1.submit();  

3、表单对象的属性  

属性描述  

Name 表单的名称  

action 提交表单后执行的程序  

target  

指定数据显示在哪个窗口(_blank,_parent,_self,_top) 或哪个框架(框架名称)中  

encoding 默认为text/html  

method “Get”或“Post”  

elements  

数组  

只读,表单中所有对象的索引,0,1,…  

由document.表单名.elements.length可知该表单共有多少个对象  

这里elements属性是一个数组,其中的元素对应于页面上表单内的各个控件。除了elements外,表单的其他几个属性均对应于HTML语法中

标记的属性。  

4、表单对象使用示例  

下面示例如果使用表单对象,效果及代码如下:  

<script> </script>

function display(){  

var str;  

// 使用表单名称访问表单对象的属性  

str="name="+document.form1.name+"\r";  

str=str+"action="+document.form1.action+"\r";  

str=str+"method="+document.form1.method+"\r";  

//访问表单对象的elements数组  

str=str+"elements:"+"\r";  

for(var i=0;i

str=str+ " "+document.form1.elements[i].type  

+"\t"+document.form1.elements[i].name  

+"\t"+document.form1.elements[i].value+"\r";  

}  

window.alert(str);  

return false;  

}  

function submitform(){  

//使用表单数组+下标访问表单对象  

document.forms[0].submit();  

}  

  

display()">  

  

  

  

  

  

  

注意:单击“提交”按钮会触发表单的onsubmit事件。如果onsubmit的事件处理过程返回false,则不进行表单数据的提交。但如果直接使用表单对象的submit()方法,则直接将数据提交出去。  

* 表单中的基本元素  

表单中的基本控件由按钮、单选按钮、复选按钮、提交按钮、重置按钮和文本框等组成。在JavaScript中要访问这些控件,可以使用以下两种方法实现:  

表单.元素名称 例如:document.form1.check  

表单.elements[下标] 例如:document.form1.elements[2]  

下面分别介绍表单中的各个基本控件。  

1、text对象  

text对象对应于页面中的text输入框控件。  

  

属性accessKey 设置或返回访问文本域的快捷键。  

使用 Alt + accessKey 为拥有指定快捷键的元素赋予焦点  

alt 设置或返回当浏览器不支持文本域时供显示的替代文本。  

defaultValue 设置或返回文本域的默认值。  

disabled 设置或返回文本域是否应被禁用。  

id 设置或返回文本域的 id。  

maxLength 设置或返回文本域中的最大字符数。  

name 设置或返回文本域的名称。  

readOnly 设置或返回文本域是否应是只读的。  

size 设置或返回文本域的尺寸。  

tabIndex 设置或返回文本域的 tab 键控制次序。  

type 返回文本域的表单元素类型。  

value 设置或返回文本域的 value 属性的值。  

方法blur( ) 将当前焦点移到后台  

select( ) 加亮文字,选取文本域中的内容。  

focus() 在文本域上设置焦点。  

主要事件onfocus,onblur,onselect,onchange  

text对象使用示例如下:  

  

  

  

<script> </script>

document.form1.text1.value="this is a javascirpt";  

document.form1.text1.select();  

alert(document.form1.text1.value);  

document.text1.blur();  

  

2、textarea对象  

textarea对象对应于页面中的textarea输入控件。  

  

属性name textarea输入框控件名称  

value textarea输入框控件中当前的文本  

defaultvalue textarea输入框控件的默认文本  

方法blur( ) 将当前焦点移到后台  

select( ) 加亮文字  

主要事件onfocus,onblur,onselect,onchange  

3、select对象  

select对象对应于网页中的下拉列表框。  

  

  

…………  

  

属性disabled 设置或返回是否应禁用下拉列表  

id 设置或返回下拉列表的 id。  

length 返回下拉列表中的选项数目。  

multiple 设置或返回是否选择多个项目。  

name 设置或返回下拉列表的名称。  

options  

数组  

返回包含下拉列表中的所有选项(option对象)的一个数组。  

其中option对象包括如下属性:  

text 该选项显示的文字  

value 该选项的value值  

selected 指明该选项是否别选中  

selectedIndex 当前选中项的下标  

size 设置或返回下拉列表中的可见行数。  

方法options.add() 向下拉列表添加一个选项。  

blur() 从下拉列表移开焦点。  

focus() 在下拉列表上设置焦点。  

remove() 从下拉列表中删除一个选项。  

主要事件onfocus,onblur,onchange  

4、button对象  

button对象对应于网页中的按钮控件。  

  

属性accessKey 设置或返回访问按钮的快捷键。  

alt 设置或返回当浏览器无法显示按钮时供显示的替代文本。  

disabled 设置或返回是否禁用按钮。  

id 设置或返回按钮的 id。  

name 设置或返回按钮的名称。  

tabIndex 设置或返回按钮的 tab 键控制次序。  

value 设置或返回在按钮上显示的文本。  

方法blur() 把焦点从元素上移开。  

click() 在该按钮上模拟一次鼠标单击。  

focus() 为该按钮赋予焦点。  

主要事件onclick  

5、checkbox对象  

checkbox对象对应于网页中的复选框。  

选项说明  

属性accessKey 设置或返回访问 checkbox 的快捷键。  

alt 设置或返回不支持 checkbox 时显示的替代文本。  

checked 设置或返回 checkbox 是否应被选中。  

defaultChecked 返回 checked 属性的默认值。  

disabled 设置或返回 checkbox 是否应被禁用。  

id 设置或返回 checkbox 的 id。  

name 设置或返回 checkbox 的名称。  

tabIndex 设置或返回 checkbox 的 tab 键控制次序。  

value 设置或返回 checkbox 的 value 属性的值  

方法blur() 从 checkbox 上移开焦点  

click() 模拟在 checkbox 中的一次鼠标点击。  

focus() 为 checkbox 赋予焦点。  

主要事件onclick  

6、radio对象  

radio对象对应于网页中的单选控件。当网页中具有多个相同名称的单选控件后,就形成了一个  

radio对象数组,其中每个单选控件即为一个radio对象。  

选项说明  

选项说明  

…………  

属性accessKey 设置或返回访问单选按钮的快捷键。  

alt 设置或返回在不支持单选按钮时显示的替代文本。  

checked 设置或返回单选按钮的状态。  

defaultChecked 返回单选按钮的默认状态。  

disabled 设置或返回是否禁用单选按钮。  

id 设置或返回单选按钮的 id。  

name 设置或返回单选按钮的名称。  

tabIndex 设置或返回单选按钮的 tab 键控制次序。  

value 设置或返回单选按钮的 value 属性的值。  

方法blur() 从单选按钮移开焦点。  

click() 在单选按钮上模拟一次鼠标点击。  

focus() 为单选按钮赋予焦点。  

主要事件onclick  

7、hidden对象  

hidden对象对应于网页中的隐藏域。  

  

属性alt 设置或返回当不支持隐藏输入域时显示的替代文本。  

id 设置或返回隐藏域的 id。  

name 设置或返回隐藏域的名称。  

value 设置或返回隐藏域的 value 属性的值。  

8、submit对象  

submit对象对应于网页中的submit按钮。  

  

属性accessKey 设置或返回访问提交按钮的快捷键。  

alt 设置或返回当浏览器不支持提交按钮时供显示的替代文本。  

disabled 设置或返回提交按钮是否应被禁用。  

id 设置或返回提交按钮的 id。  

name 设置或返回提交按钮的名称。  

tabIndex 设置或返回提交按钮的 tab 键控制次序。  

value 设置或返回在提交按钮上显示的文本。  

方法blur() 从提交按钮上移开焦点。  

click() 在提交按钮上模拟一次鼠标点击。  

focus() 为提交按钮赋予焦点。  

主要事件onclick  

9、password对象  

password对象对应于网页中的密码输入框。  

  

属性accessKey 设置或返回访问密码字段的快捷键。  

alt 设置或返回当不支持密码字段时显示的替代文字。  

defaultValue 设置或返回密码字段的默认值。  

disabled 设置或返回是否应被禁用密码字段。  

id 设置或返回密码字段的 id。  

maxLength 设置或返回密码字段中字符的最大数目。  

name 设置或返回密码字段的名称。  

readOnly 设置或返回密码字段是否应当是只读的。  

size 设置或返回密码字段的长度。  

tabIndex 设置或返回密码字段的 tab 键控制次序。  

value 设置或返回密码字段的 value 属性的值。  

方法blur() 从密码字段移开焦点。  

click() 为密码字段赋予焦点。  

focus() 选取密码字段中的文本。  

主要事件onfocus,onblur,onselect,onchange  

 

*History对象  

History 对象包含用户(在浏览器窗口中)访问过的 URL。  

History 对象是 window 对象的一部分,可通过 window.history 属性对其进行访问。  

History 对象属性  

属性描述  

length 返回浏览器历史列表中的 URL 数量。  

History 对象方法  

方法描述  

back() 加载 history 列表中的前一个 URL。  

forward() 加载 history 列表中的下一个 URL。  

go(number|URL) 加载 history 列表中的某个具体页面。  

-1表示前一个页面  


本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解锁Myrise中的所有内容
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

推荐:优秀JS开源人脸检测识别项目 推荐:优秀JS开源人脸检测识别项目 Apr 03, 2024 am 11:55 AM

人脸检测识别技术已经是一个比较成熟且应用广泛的技术。而目前最为广泛的互联网应用语言非JS莫属,在Web前端实现人脸检测识别相比后端的人脸识别有优势也有弱势。优势包括减少网络交互、实时识别,大大缩短了用户等待时间,提高了用户体验;弱势是:受到模型大小限制,其中准确率也有限。如何在web端使用js实现人脸检测呢?为了实现Web端人脸识别,需要熟悉相关的编程语言和技术,如JavaScript、HTML、CSS、WebRTC等。同时还需要掌握相关的计算机视觉和人工智能技术。值得注意的是,由于Web端的计

PHP与JS开发技巧:掌握绘制股票蜡烛图的方法 PHP与JS开发技巧:掌握绘制股票蜡烛图的方法 Dec 18, 2023 pm 03:39 PM

随着互联网金融的迅速发展,股票投资已经成为了越来越多人的选择。而在股票交易中,蜡烛图是一种常用的技术分析方法,它能够显示股票价格的变化趋势,帮助投资者做出更加精准的决策。本文将通过介绍PHP和JS的开发技巧,带领读者了解如何绘制股票蜡烛图,并提供具体的代码示例。一、了解股票蜡烛图在介绍如何绘制股票蜡烛图之前,我们首先需要了解一下什么是蜡烛图。蜡烛图是由日本人

如何将 MySQL 查询结果数组转换为对象? 如何将 MySQL 查询结果数组转换为对象? Apr 29, 2024 pm 01:09 PM

将MySQL查询结果数组转换为对象的方法如下:创建一个空对象数组。循环结果数组并为每一行创建一个新的对象。使用foreach循环将每一行的键值对赋给新对象的相应属性。将新对象添加到对象数组中。关闭数据库连接。

简易JavaScript教程:获取HTTP状态码的方法 简易JavaScript教程:获取HTTP状态码的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教程:如何获取HTTP状态码,需要具体代码示例前言:在Web开发中,经常会涉及到与服务器进行数据交互的场景。在与服务器进行通信时,我们经常需要获取返回的HTTP状态码来判断操作是否成功,根据不同的状态码来进行相应的处理。本篇文章将教你如何使用JavaScript获取HTTP状态码,并提供一些实用的代码示例。使用XMLHttpRequest

数组和对象在 PHP 中的区别是什么? 数组和对象在 PHP 中的区别是什么? Apr 29, 2024 pm 02:39 PM

PHP中,数组是有序序列,以索引访问元素;对象是具有属性和方法的实体,通过new关键字创建。数组访问通过索引,对象访问通过属性/方法。数组值传递,对象引用传递。

PHP中的Request对象是什么? PHP中的Request对象是什么? Feb 27, 2024 pm 09:06 PM

PHP中的Request对象是用于处理客户端发送到服务器的HTTP请求的对象。通过Request对象,我们可以获取客户端的请求信息,比如请求方法、请求头信息、请求参数等,从而实现对请求的处理和响应。在PHP中,可以使用$_REQUEST、$_GET、$_POST等全局变量来获取请求的信息,但是这些变量并不是对象,而是数组。为了更加灵活和方便地处理请求信息,可

js和vue的关系 js和vue的关系 Mar 11, 2024 pm 05:21 PM

js和vue的关系:1、JS作为Web开发基石;2、Vue.js作为前端框架的崛起;3、JS与Vue的互补关系;4、JS与Vue的实践应用。

如何在JavaScript中获取HTTP状态码的简单方法 如何在JavaScript中获取HTTP状态码的简单方法 Jan 05, 2024 pm 01:37 PM

JavaScript中的HTTP状态码获取方法简介:在进行前端开发中,我们常常需要处理与后端接口的交互,而HTTP状态码就是其中非常重要的一部分。了解和获取HTTP状态码有助于我们更好地处理接口返回的数据。本文将介绍使用JavaScript获取HTTP状态码的方法,并提供具体代码示例。一、什么是HTTP状态码HTTP状态码是指当浏览器向服务器发起请求时,服务

See all articles