除了表單偽類選擇器,jQuery為了更加方便開發者快速選擇表單元素進行操作,還提供了一系列的表單屬性偽類選擇器。表單屬性偽類選擇器,就是根據表單元素的標簽屬性來選取某一類表單元素。
在jQuery中,表單屬性偽類選擇器如下:
舉例:
在線測試<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript" src="jquery-1.12.0.min.js"></script> <script type="text/javascript"> $(function () { var a = $("input:checked").val(); alert(a); }) </script> </head> <body> <p>喜歡的水果: <label><input type="checkbox" value="蘋果"/>蘋果</label> <label><input type="checkbox" value="西瓜" checked="checked"/>西瓜</label> <label><input type="checkbox" value="蜜桃"/>蜜桃</label> <label><input type="checkbox" value="梨子"/>梨子</label> </p> </body> </html>
在浏覽器預覽效果如下:
分析:
$("input:checked").val()表示選擇“被選中”的單選框或復選框(因為只有單選框和復選框有checked屬性),並且獲取表單元素的value值。val()方法用於獲取表單元素的value值,我們在下一章的“jQuery內容操作”這一節會詳細講解。
對於其他表單屬性偽類選擇器用法跟:checked一樣,在此不再累贅說明。不過我們可以參考一下CSS3教程中“UI元素狀態偽類選擇器”這一章,因為jQuery這些選擇器就是參考CSS3選擇器來的。