JavaScript总结(七)
JavaScript表单编程
表单是Web上与用户进行交互的主要界面。则我们需要掌握如何访问用户输入的表单数据,校验用户输入的正确性显得至关重要。
♞ 对Form元素进行脚本编写
✍ 获取表单的应用
➣ 使用DOM树中定位一个元素的方法——getElementById()方法,并将表单的ID作为方法的参数;
var objForm = document.getElementById("form");
➣ 使用文档的表单集合,并且通过表单在forms集合中的位置或者通过其name属性;
var objForm = document.forms[0]; //不用下标就是获得表单集合
var objForm = document.forms["name"];//得到名为name的表单
✍ 获取表单的字段
每个表单字段都包含在表单的elements集合中,我们可以通过使用表单元素的name属性或者它在集合的位置,访问集合中的不同字段;
➣ 通过它在集合的位置访问集合中字段;
var temp=oform.elements[0]; //得到表单第一个字段。
➣ 使用表单元素的name属性访问集合中字段;
对该方法传入name属性的字符串;
var temp=oform.elements["text"]; //得到名为text1的字段。
每个表单字段称为表单本事的一个属性,可以直接通过其名称访;
var temp=oform.textbox1; //得到名为textbox1的字段。
如果名称中间有空格,可以用中括号代替;
var temp=oform["text box 1"]; //得到名为text box 1的字段。
✍ 表单字段元素对象
➣ form表单字段元素对象的方法
方法 |
描述 |
blur() |
让表单字段元素失去焦点,当前焦点移到后台 |
focus() |
让表单字段元素获得焦点 |
click() |
模仿用户鼠标单击该元素的过程 |
setCapture() |
在某个表单字段元素对象上捕获当前网页文档上的鼠标事件 |
releaseCapture() |
取消某个表单字段元素对象对当前网页文档鼠标事件的捕获设置 |
add() |
为列表框(select)增加一个选择项(option) |
➣ form表单字段元素对象的属性
属性 |
描述 |
defaultValue |
设置或返回表单字段元素的默认值(初始值) |
disabled |
设置或返回文本输入框的disabled状态;该属性用于指示一个表单控件是否可用,一个disable控件不允许用户输入 |
form |
返回表单字段元素所属于form表单对象 |
readOnly |
设置或返回文本输入框的readonly状态 |
title |
设置或返回表单字段元素title属性 |
value |
设置或返回表单字段元素的当前取值 |
checked |
设置或返回单选按钮、复选按钮的选中状态 |
➣ form表单字段元素对象的事件
事件 |
描述 |
onChange |
当焦点离开文本输入框且文本输入框中的值改变时,或者改变列表框的选择结果后,产生该事件 |
onSelect |
当单行或多行文本输入框中的文字被选择加亮后,产生该事件 |
onFocus |
当表单字段获得焦点时,产生该事件 |
onBlur |
当表单字段元素失去焦点时,产生该事件 |
✍ 表单的提交和重置
➣ 使用一个提交按钮或者模拟提交按钮的图形来提交/重置表单
<input type="submit" value="Submit"/> //submit按钮提交表单
<input type="image" value="submit.gif"/> //image按钮提交表单
<button type="submit">Submit</button> //submit按钮提交表单
<input type="reset" value="Reset"/> //reset按钮重置表单
<button type="reset">Reset</button> //reset按钮重置表单
➣ 使用submit()方法或者reset()方法提交/重置表单
得到表单引用后,直接调用submit()方法或者reset()方法
oForm.submit(); //oForm表单提交
oForm.reset(); //oForm表单重置
♞ 对文本框元素进行脚本编写
✍ 获取/更改文本框的值
对于标签<input/>和<textarea/>都支持同样的属性value,以获取文本框中的文本;使用value属性返回String类型的文本内容;
✍ 选择文本
两种类型的文本框都支持select()方法,该方法用于选择文本框中的所有文本。为使该方法起作用,文本框必须获得焦点。为确保文本框获得焦点,我们必须在调用select()方法之前,调用另外一个方法focus();
✍ 文本框事件
两种文本框都支持blur、focus、change和select事件。
➣ change事件——在用户改变文本框的值之后,当文本框失去焦点时触发该事件。
(PS:通过设置value属性改变文本框的值时,不触发该事件)
➣ select事件——在一个或者多个字符被选中时触发事件;不管是手动选中还是使用select()方法。
➣ blur事件——当文本框失去焦点时触发事件;
(PS:blur事件和change事件都是在文本框失去焦点后触发,但是change事件是在文本框的值被改变的情况下才会触发,如果没有改变时只触发blur事件;改变时则先触发change事件,随后再执行blur事件);
➣ focus事件——当文本框获得焦点时触发事件;
♞ 对列表框和组合框进行脚本编写
✍ 访问选项
HTML DOM将select元素中的每一项定义到一个options集合中,该集合中列出select控件中的所有option元素。
属性 |
描述 |
id |
设置或返回选项的 id。 |
index |
返回下拉列表中某个选项的索引位置。 |
label |
设置或返回选项的标记 (仅用于选项组)。 |
selected |
设置或返回 selected 属性的值。 |
text |
设置或返回某个选项的纯文本值。 |
value |
设置或返回被送往服务器的值。 |
✍ 添加选项
很多时候,列表框或者组合的选项数据,是来自于后台数据服务器或者其它数据文件,那么我们就不能在XHTML中指定选项,必须使用JavaScript编码动态地将数据项添加到select元素中,按照以下步骤将选项动态添加到select元素中:
Ⅰ 定义一个带三个参数的方法,这三个参数分别是要添加选项的列表值、要添加的选项的名称以及要添加的选项的值;
Ⅱ 使用DOM方法创建一个option元素,然后创建一个文本节点分配给选项的名称;
Ⅲ 设置option元素的value属性;
Ⅳ 通过appendChild()方法,将新选项添加到select元素中;
ListUtil.add = function(oList, sName, sValue){
var option = document.creatElement("option");
option.appendChild(document.creatTextNode(sName));
if(arguments.length == 3){
option.setAttribute("value",sValue);
}
oList.appendChild(potion);
}
✍ 删除选项
删除选项的方法有两种,一种是使用DOM提供的功能,一种是使用HTML DOM提供的功能
➣ BOM:使用options集合,将要移除的选项设置为null;
oList.options[0] = null;
➣ HTML DOM:使用select元素的remove()方法,将要删除的选项的索引传递给remove()方法;
oList.remove(0);
✍ 移动选项
使用DOM的appendChild()方法,可以从第一个列表框中把元素移动选项到第二个列表框中。如果我们传递一个文档中的一个元素到appendChild()方法,该元素就会从它的父元素中移除,并且放在指定位置。
♞ 对复选框和单选框进行脚本编写
属性/方法 |
描述 |
checked |
布尔值,指示控件状态 |
defaultChecked |
布尔值,指示页面加载时控件是否被选中 |
click() |
模仿按钮点击,改变控件状态,对应的事件onclick |
JavaScript总结(七)的更多相关文章
- JavaScript中七种数据类型·中·一
Standing on Shoulders of Giants; 说到JavaScript里的类型很容易就让人想起 42和"42",分别是string型和number型,但是他们可 ...
- JavaScript中七种函数调用方式及对应 this 的含义
this 在 JavaScript 开发中占有相当重要的地位,不过很多人对this这个东西都感觉到琢磨不透.要真正理解JavaScript的函数机制,就非常有必要搞清楚this到底是怎么回事. 函数调 ...
- JavaScript的七种数据类型
我知道这个话题网上说法非常多,甚至还有分出什么"Array,Function"之类的阿猫阿狗的类型.今天来整理这个话题的时候,先贴一张MDN官方的说法: 这个分法是对的,也是目前来 ...
- JavaScript 用七种方式教你判断一个变量是否为数组类型
JavaScript 如何判断一个变量是否为数组类型 引言 正文 方法一 方法二 方法三 方法四 方法五 方法六 方法七 结束语 引言 我们如何判断一个变量是否为数组类型呢? 今天来给大家介绍七种方式 ...
- JavaScript 基础(七) 箭头函数 generator Date JSON
ES6 标准新增了一种新的函数: Arrow Function(箭头函数). x => x *x 上面的箭头相当于: function (x){ return x*x; } 箭头函数相当于匿名函 ...
- JavaScript案例七:简单生成表格
JavaScript简单生成表格,巩固基础知识点... <!DOCTYPE html> <html> <head> <title>JavaScript简 ...
- 2014年辛星完全解读Javascript第七节 数组和对象
由于Javascript是脚本语言,因此,使用起来非常方便,数组的使用也是比较简单的,下面我们就主要介绍一下Javascript中数组的介绍,以及上一节中没有完成的对象的介绍. *********** ...
- 学习 JavaScript (七) 内存问题
内存问题是 JavaScript 比较底层的东西,依葫芦画瓢学会了怎么使用变量,但是对于内存的概念依然模糊,今天让我们一起来了解一下内存在这门语言是怎么样的存在. 内存在不同类型的数值面前表现有很大的 ...
- 前端笔记之JavaScript(七)深入函数&DOM那点事
一.函数补充 1.1 arguments类数组对象 arguments 是一个对应于传递给函数的参数的类数组对象. 在函数中,使用特殊对象 arguments,开发者无需明确指出参数名,就能访问它们. ...
- JavaScript(七)
类型转换 1.直接转换 parseInt() 与 parseFloat() alert('12'+7); //弹出127 alert( parseInt('12') + 7 ); //弹出19 ale ...
随机推荐
- 【转】数据分析与处理之二(Leveldb 实现原理)
郑重声明:本篇博客是自己学习 Leveldb 实现原理时参考了郎格科技系列博客整理的,原文地址:http://www.samecity.com/blog/Index.asp?SortID=12,只是为 ...
- springMVC入门-08
这一讲介绍用户登录实现以及两种异常处理controller控制器的方法,最后提一下在springMVC中对静态资源访问的实现方法. 用户登录需要一个登录页面login.jsp,对应代码如下所示: &l ...
- Ubuntu做Tomcat服务:insserv: warning: script 'tomcat' missing LSB tags and overrides
https://blog.csdn.net/hanchao5272/article/details/79819460 转载自:https://blog.bbzhh.com/index.php/arch ...
- ActiveMq--消息队列
ActiveMQ官网下载地址:http://activemq.apache.org/download.html ActiveMQ的目录: bin存放的是脚本文件 conf存放的是基本配置文件 data ...
- makedown 软件
windows上的新手使用makedownpad 很适合的 下载之后你需要激活makedownpad MarkdownPad 2 Pro 注册码(邮箱+许可密钥) 邮箱 Soar360@live.co ...
- Linux 安装 pycharm
1.Windows系统下载http://www.jetbrains.com/pycharm/download/#section=linux2.解压到挂载文件夹 mount -t cifs -o use ...
- Mosquitto安装调试实录
1. 安装 以Centos 7.x为例,先安装依赖项(笔者使用阿里云资源,部分依赖项可能未列出): yum install gcc-c++ yum install openssl-devel yum ...
- Hybris阶段总结(2)hybris架构
年前总结一下这两个星期在SAP实习学到的一些东西 先上图: 从底往上总结,之后会有个小例子来解释一下 1.Persistence layer 就是作为hybris所连接的数据库这一层,其中hybr ...
- 'Table is Marked as crashed and should be repaired Error'.Mysql表损坏解决方案
问题表现:由于服务器崩溃导致表损坏无法打开或者能打开但是无法写入数据(提示主键重复但实际没有该主键且该主键值在最大值范围内). 本文提供两种检查修复方式:mysqlcheck 和 myisamchk ...
- RTCM32转码至RTCM23,再次测试,一些收获
RTCM32是2013年发布的,RTCM23是2001年发布,两者相隔十多年,某些软件已经不支持RTCM32的解码.故在此对RTCM32的编码进行转换,使用2018年4月9日天宝接收机数据.编码格式为 ...