表單作為HTML中一種特殊的元素,操作方法較為多樣性和特殊性,開發者不但可以使用之前的常規選擇器或過濾器,也可以使用jQuery為表單專門提供的選擇器和過濾器來准確的定位表單元素。
一.常規選擇器
<body> <form> <input type="text" name="user" value="123" /> <input type="password" name="pass" value="456" /> </form> </body>
可以使用id、類(class)和元素名來獲取表單字段,如果是表單元素,都必須含有 name屬性,還可以結合屬性選擇器來精確定位。
$(function () { alert($('input').size()); //2個input alert($('input').val()); //元素名定位,默認獲取第一個value值:123 alert($('input[name=pass]').val()); //選擇name為user的字段獲取第二個value值:456 });
那么對於id和類(class)用法比較類似,也可以結合屬性選擇器來精確的定位,在這里我們不在重復。對於表單中的其他元素名比如:textarea、select和button等,原理一樣,不在重復。
二.表單選擇器
雖然可以使用常規選擇器來對表單的元素進行定位,但有時還是不能滿足開發者靈活多變的需求。所以,jQuery為表單提供了專用的選擇器。
<body> <form> <input type="text" name="user" value="123" /> <input type="password" name="pass" value="456" /> <input type="radio" name="sex" value="男" checked="checked" />男 <input type="radio" name="sex" value="女" />女 <textarea></textarea> <select name="city" multiple> <option>1</option> <option>2</option> <option>3</option> </select> <button></button> </form> </body>
1.表單選擇器
(1):input選取所有input、textarea、select和button元素-集合元素
查看所有表單元素里name=city的有幾個:
$(function () { alert($(':input[name=city]').size()); //1 });
(2):text選擇所有單行文本框,即type=text-集合元素
獲取單行文本框元素
$(function () { alert($(':text').size()); //1 });
(3):password選擇所有密碼框,即type=password-集合元素
獲取密碼欄元素
$(function () { alert($(':password[name=pass]').size()); });
(4):radio選擇所有單選框,即type=radio-集合元素
獲取單選框元素有幾個
$(function () { alert($(':radio').size()); //2 });
獲取單選框元素第二個元素的value值
$(function () { alert($(':radio[name=sex]').eq(1).val()); //女 });
獲取單選框元素第最后個元素的value值
$(function () { alert($(':radio[name=sex]').last().val()); //女 });
(5):checkbox選擇所有復選框,即type=checkbox-集合元素
獲取復選框元素有幾個
$(function () { alert($(':checkbox').size()); //0個 });
(6):submit選取所有提交按鈕,即type=submit-集合元素
獲取提交按鈕元素
$(function () { alert($(':submit').size()); //1個 });
(7):reset選取所有重置按鈕,即type=reset-集合元素
獲取重置按鈕元素
$(function () { alert($(':reset').size()); //0個 });
(8):image選取所有圖像按鈕,即type=image-集合元素
獲取圖片按鈕元素
$(function () { alert($(':image').size()); //0個 });
(9):button選擇所有普通按鈕,即button元素-集合元素
獲取文件按鈕元素
$(function () { alert($(':file').size()); //0個 });
(10):file選擇所有文件按鈕,即type=file-集合元素
獲取普通按鈕元素
$(function () { alert($(':button').size()); //1個 });
(11):hidden選擇所有不可見字段,即 type=hidden-集合元素
獲取form元素下隱藏字段元素
$(function () { alert($('form :hidden').size()); //0 });
注意:這些選擇器都是返回元素集合
三.表單過濾器
jQuery提供了四種表單過濾器,分別在是否可以用、是否選定來進行表單字段的篩選過濾。
(1):enabled 選取所有可用元素 集合元素
獲取可用元素
$(function () { alert($('form :enabled').size()); //10 });
(2):disabled 選取所有不可用元素 集合元素
選取所有不可用元素
$(function () { alert($('form :disabled').size()); //0 });
(3):checked選取所有被選中的元素,單選和復選字段 集合元素
獲取單選、復選框中被選中的元素
$(function () { alert($('form :checked').size()); //1 });
(4):selected選取所有被選中的元素,下拉列表集合元素
獲取下拉列表中被選中的元素
$(function () { alert($('form :selected').get(0)); //undefined alert($('form :selected').size()); //0 });
