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

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

1、总结

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

 

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

elements和options

 

二、对象集合，全部的集合怎么使用？

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

 

三、表单中最最多见和经常使用的是那个属性？

length

 

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

blur focus select

 

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

add remove

 

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

checked 和 defaultChecked

 

 

 

2、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元素将其移出。