js进阶 9 js操作表单知识点总结

js进阶 9 js操作表单知识点总结

一、总结

一句话总结：熟记较常用的知识点，对于一些不太常用的知识点可以在使用的时候查阅相关资料，在使用和练习中去记忆。

1、表单中学到的元素的两个对象集合石什么？

elements和options

2、对象集合，所有的集合怎么使用？

[i]，数组访问方式，比如第i个，options[i]

3、表单中最最常见和常用的是那个属性？

length

4、表单text对象的三个重要方法是哪三个？

blur focus select

5、select对象的两个独特方法是哪两个？

add remove

6、select对象的两个重要的属性是什么？

checked 和 defaultChecked

二、js进阶 9 js操作表单知识点总结

表单专题表单相关的属性和方法

Form 对象集合

• elements[]包含表单中所有元素的数组

Form 对象属性

• action 设置或返回表单的action 属性
• length 返回表单中的元素数目
• id/name/target/method
• ......

Form 对象方法

• reset()把表单的所有输入元素重置为它们的默认值。
• Submit()提交表单。

Form 对象事件句柄

• onreset 在重置表单元素之前调用。
• onsubmit 在提交表单之前调用。

Text 对象属性

• accessKey 属性可设置或返回访问文本域的快捷键
• alt 设置或返回当浏览器不支持文本域时供显示的替代文本
• defaultValue 属性可设置或返回文本域的默认值
• disabled 设置或返回文本域是否应被禁用
• form 返回一个对包含文本域的表单对象的引用
• maxLength 设置或返回文本域中的最大字符数
• readOnly 设置或返回文本域是否应是只读的
• tabIndex 设置或返回文本域的tab键控制次序
• id/name/size/type/value......

Text 对象方法

• blur()从文本域上移开焦点
• Focus()在文本域上设置焦点
• Select()选取文本域中的内容。

多行文本框

Textarea 对象属性

• accessKey 属性可设置或返回访问文本域的快捷键。
• cols 设置或返回textarea 的宽度。
• rows 设置或返回textarea 的高度。
  
• defaultValue/tabIndex/form/id/name/size/type/value/readonly/

Textarea 对象方法

• blur()/focus()/select()

Select 下拉列表

Select 对象集合

• options[]返回包含下拉列表中的所有选项的一个数组

Select对象属性

• length返回下拉列表中的选项数目
• multiple 设置或返回是否选择多个项目。
• selectedIndex 设置或返回下拉列表中被选项目的索引号。
• size 设置或返回下拉列表中的可见行数。
• id/name/disabled/form/tabIndex

Select 对象方法

• add() 向下拉列表添加一个选项。
  

  语法：selectobject.add(option,before)

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

  语法: selectobject.remove(index)

• blur()/focus()
  

Option 对象的属性

• defaultSelected 返回 selected属性的默认值。
  
• index 返回下拉列表中某个选项的索引位置。
  
• Selected 设置或返回 selected 属性的值。
  
• text 设置或返回某个选项的纯文本值。
  
• disabled/form/id/value......
  

单选和复选框

通常使用input元素来创建单选和复选框，的属性和方法相同，两者属性和方法相同，具有input元素共有的其他属性和方法。

属性

• 属性：id/form/name/type/disabled.......
  
• Checked 设置或返回 checkbox 是否应被选中
  
• defaultChecked 返回 checked 属性的默认值。

方法

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

案例

表单相关案例练习001：访问表单的几种形式

• 访问表单的的方式1

  document.getElementsByTagName(‘form’)[0].style.background=’red’ ;

• 访问表单的的方式2

  document.forms[1].style.background=’orange’ ；

• 访问表单的的方式3

  document.forms[‘myform3’].style.background=’blue’ ;

• 访问表单的的方式4

  Myform4.style.background=’pink’;

练习002：遍历表单所有控件

• 通过表单的elements变量访问所有表单控件

练习003：访问表单的常用属性

• Form 对象的属性非常多，应该掌握常用的几种

练习004：修改Form的提交地址

• 通过Form 对象的属性修改它的提交地址
  同样的道理还可以动态的修改其他属性比如提交方法（get或post)，这里不再演示

练习006：通过name访问指定表单控件

• 案例要点：每个表单控件都有一个name属性，可以通过name属性访问该控件。

练习007：自动计算金额

• 案例要点1：复习上一节课的知识点，完成一个自动计算商品价格的小练习。

• 案例要点2：input元素的type为’hidden’代表一个 HTML 表单中的某个隐藏输入域。

练习008：禁止复制粘贴

• 1，onpaste 事件在用户向元素中粘贴文本时触发。

• 2，oncopy 事件在用户拷贝元素上的内容时触发。

练习009：回车键切换焦点

• 案例要点：在表单中经常会用到按回车键自动切换焦点的功能，该功能主要用到focus()事件已经键盘事件

练习010：自动选择文本

• 案例要点：某些时候我们希望用户可以很方便的对文本框中的内容进行编辑操作，这时候常会出现这样的功能，即用户单击文本框时候，文本框中的文字会自动被选中，该功能主要用到focus()方法

练习012：数组数据添加到下拉列表

• 使用二维数组和下拉菜单相结合，实现多级联动菜单

• 使用createElement的方法

练习013/14：多级联菜单

• 使用二维数组和下拉菜单相结合，实现多级联动菜单

练习015：下拉列表多选移除

• 案例要点：使用while循环语句，判断select元素的slectedIndex属性值不为-1，然后获取对应的索引值和文本，将其添加到另一个下拉列表中，并在当前select元素将其移出。