JavaScript总结

Posted dawn-tangzedong

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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总结的主要内容,如果未能解决你的问题,请参考以下文章

几个关于js数组方法reduce的经典片段

30秒就能看懂的JavaScript 代码片段

常用Javascript代码片段集锦

几个关于js数组方法reduce的经典片段

48个值得掌握的JavaScript代码片段(上)

如何将此 JavaScript 代码片段翻译成 Parenscript?