• :绿叶现版本暂时不再更新维护,全新版本已经在开发中,新系列图书(暂时8本,后面再续)也将于12月后陆续出版,敬请期待~

3.8 表单属性伪类选择器

除了表单伪类选择器,jQuery为了更加方便开发者快速选择表单元素进行操作,还提供了一系列的表单属性伪类选择器。表单属性伪类选择器,就是根据表单元素的标签属性来选取某一类表单元素。

在jQuery中,表单属性伪类选择器如下:

jQuery表单属性伪类选择器
选择器 说明
:checked 选择所有被选中的表单元素,一般用于radio和checkbox
option:selected 选择所有被选中的option元素
:enabled 选择所有可用元素,一般用于input、select和textarea
:disabled 选择所有不可用元素,一般用于input、select和textarea
:read-only 选择所有只读元素,一般用于input和textarea
:focus 选择获得焦点的元素,常用于input和textarea

举例:

 
<!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选择器来的。

:本站所有教程均为原创,大部分已经与人民邮电出版社合作出版,禁止转载和抄袭,否则绿叶学习网和人民邮电出版社必将追究法律责任,附录:互联网著作权保护法。【法律顾问:张俊律师】

小伙伴们也可以加一下QQ群,在“群文件”中可以获取更多学习资源和配套资源,以及跟其他小伙伴交流,站长也在群内。

(1)QQ群:593173594(暗号:lvye

(2)绿叶学习网常见问题解答

回到顶部