jQuery表單選擇器


表單作為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
}); 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM