操作表單,在前端開發中是很常見的操作。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 () {
$("input:checkbox").attr("checked","checked");
})
</script>
</head>
<body>
<p>喜歡的水果:
<label><input type="checkbox"/>蘋果</label>
<label><input type="checkbox"/>西瓜</label>
<label><input type="checkbox"/>蜜桃</label>
<label><input type="checkbox"/>梨子</label>
</p>
<p>性別:
<label><input type="radio" name="gendar"/>男</label>
<label><input type="radio" name="gendar"/>女</label>
</p>
</body>
</html>
在浏覽器預覽效果如下:
分析:
$("input:checkbox")表示選擇所有復選框元素,attr("checked","checked")表示設置復選框的checked屬性值為checked。關於attr()方法,我們會在下一章中“jQuery屬性操作”這一節詳細給大家介紹。
對於其他表單偽類選擇器來說,它們的用法跟:checkbox選擇器是一模一樣的。大家參考一下:checkbox選擇器的實例,就能夠掌握其他表單偽類選擇器了。