表单属性伪类选择器,指的是根据表单元素的属性来选取的一种伪类选择器。在jQuery中,常见的表单属性伪类选择器如下表所示。
选择器 | 说明 |
---|---|
:checked | 选取所有被选中的表单元素,一般是单选框或复选框 |
:selected | 选取被选中的表单元素的选项,一般是下拉列表 |
:enabled | 选取所有可用的表单元素 |
:disabled | 选取所有不可用的表单元素 |
:read-only | 选取所有只读的表单元素 |
:focus | 选取所有获得焦点的表单元素 |
像上表这些表单属性伪类选择器,在实际开发中用得非常多,大家一定要重视。不过在这一节的学习中有个初步认识就可以了,至于在实际开发中怎么用,我们在后续章节会慢慢接触。
举例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function () {
var result = $("input:checked").val();
alert(result); //弹出被选中文本框的值
})
</script>
</head>
<body>
<p>喜欢的水果:
<label><input type="checkbox" value="苹果"/>苹果</label>
<label><input type="checkbox" value="西瓜" checked/>西瓜</label>
<label><input type="checkbox" value="蜜桃"/>蜜桃</label>
</p>
</body>
</html>
浏览器预览效果如图所示。
分析:
$(“input:checked”)表示选取“被选中”的单选框或复选框,实际上只有单选框和复选框才有checked这一个属性。val()方法用于获取表单元素的value属性值,这个我们在“5.3 内容操作”这一节中会详细介绍。
其他表单属性伪类选择器的用法跟:checked的用法一样,这里就不赘述了,小伙伴们可以自行测试一下。