除了表單偽類選擇器,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選擇器來的。