jQuery表单属性伪类选择器
时间：03-07来源：作者：点击数：
“表单属性”伪类选择器，指的是根据表单元素的属性来选取的一种伪类选择器。在 jQuery 中，常见的“表单属性”伪类选择器如表 2 所示。
| 选择器 | 说明 |
|---|---|
| :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>
程序执行效果如图 2 所示。
图 2：:checked 选择器的效果
$("input:checked")表示选取“被选中”的单选框或复选框，实际上只有单选框和复选框才有checked这一个属性。val() 方法用于获取表单元素的 value 属性值，这个我们之后中会详细介绍。
其他“表单属性”伪类选择器的用法和 :checked 的用法一样，这里就不赘述了，小伙伴们可以自行测试。
其他伪类选择器
除了之前介绍的伪类选择器，jQuery还为我们提供了其他用途的选择器，如表 3 所示。
| 选择器 | 说明 |
|---|---|
| :not(selector) |
选取除了某个选择器之外的所有元素 |
| :animated | 选取所有正在执行动画的元素 |
| :root | 选取页面根元素，即 html 元素 |
| :header | 选取 h1~h6 的标题元素 |
| :target | 选取锚点元素 |
| :lang(language) | 选取特走语言的元素 |
在实际开发中，一般情况下只会用到 :not(selector)、:animated 这两个，其他几乎用不上或者可以被其他选择器替代，所以只需要了解即可。
这一节我们先来了解 :not(selector) 选择器。而对于 :animated 选择器，之后我们再去学习。
举例：:not(selector)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function() {
$("li:not(#select)").css("color", "red");
})
</script>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li id="select">jQuery</li>
<li>Vue.js</li>
</ul>
</body>
</html>
程序执行效果如图 3 所示。
图 4：:not(selector) 选择器的效果
$("li:not(#select)") 表示选取除了 id="select" 之外的所有 li 元素。
方便获取更多学习、工作、生活信息请关注本站微信公众号
上一篇:jQuery选择器是什么
下一篇:jQuery表单伪类选择器
湘公网安备 43102202000103号