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元素將其移出。