第一百六十八節，jQuery，表單選取器

標籤：check   ted   學習   映像   htm   div   表單   操作方法   選中   

jQuery，表單選取器

 

學習要點：

　　1.常規選取器

　　2.表單選取器

　　3.表單過濾器

 

表單作為 HTML 中一種特殊的元素，操作方法較為多樣性和特殊性，開發人員不但可以 使用之前的常規選取器或過濾器，也可以使用 jQuery 為表單專門提供的選取器和過濾器來 準確的定位表單元素。

 

一．常規選取器

我們可以使用 id、類(class)和元素名來擷取表單欄位，如果是表單元素，都必須含有 name 屬性，還可以結合屬性選取器來精確定位。

$(‘input‘).val(); //元素名定位，預設擷取第一個$(‘input‘).eq(1).val(); //同上，擷取第二個$(‘input[type=password]‘).val(); //選擇 type 為 password 的欄位$(‘input[name=user]‘).val(); //選擇 name 為 user 的欄位

那麼對於 id 和類(class)用法比較類似，也可以結合屬性選取器來精確的定位，在這裡我 們不在重複。對於表單中的其他元素名比如：textarea、select 和 button 等，原理一樣，不在 重複。

 

二．表單選取器

雖然可以使用常規選取器來對錶單的元素進行定位，但有時還是不能滿足開發人員靈活多 變的需求。所以，jQuery 為表單提供了專用的選取器。

:input 選取所有 input、textarea、select 和 button 元素 集合元素

:text 選擇所有單行文字框，即 type=text 集合元素

:password 選擇所有密碼框，即 type=password 集合元素

:radio 選擇所有單選框，即 type=radio 集合元素

:checkbox 選擇所有複選框，即 type=checkbox 集合元素

:submit 選取所有提交按鈕，即 type=submit 集合元素

:reset 選取所有重設按鈕，即 type=reset 集合元素

:image 選取所有映像按鈕，即 type=image 集合元素

:button 選擇所有普通按鈕，即 button 元素 集合元素

:file 選擇所有檔案按鈕，即 type=file 集合元素

:hidden 選擇所有不可見欄位，即 type=hidden 集合元素

 

$(‘:input‘).size(); //擷取所有表單欄位元素$(‘:text).size(); //擷取單行文字框元素$(‘:password‘).size(); //擷取密碼欄元素$(‘:radio).size(); //擷取單選框元素$(‘:checkbox).size(); //擷取複選框元素$(‘:submit).size(); //擷取提交按鈕元素$(‘:reset).size(); //擷取重設按鈕元素$(‘:image).size(); //擷取圖片按鈕元素$(‘:file).size(); //擷取檔案按鈕元素$(‘:button).size(); //擷取普通按鈕元素$(‘:hidden).size(); //擷取隱藏欄位元素

注意：這些選取器都是返回元素集合，如果想擷取某一個指定的元素，最好結合一下屬 性選取器。比如：

$(‘:text[name=user]).size(); //擷取單行文字框 name=user 的元素

 

三．表單過濾器

jQuery 提供了四種表單過濾器，分別在是否可以用、是否選定來進行表單欄位的篩選過 濾。

:enabled 選取所有可用元素 集合元素

:disabled 選取所有不可用元素 集合元素

:checked 選取所有被選中的元素，單選和複選欄位 集合元素

:selected 選取所有被選中的元素，下拉式清單 集合元素

$(‘:enabled‘).size(); //擷取可用元素$(‘:disabled).size(); //擷取不可用元素$(‘:checked).size(); //擷取單選、複選框中被選中的元素$(‘:selected).size(); //擷取下拉式清單中被選中的元素

 

第一百六十八節，jQuery，表單選取器