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

3.6 表单伪类选择器

操作表单,在前端开发中是很常见的操作。jQuery为方便我们操作表单元素提供了完善的伪类选择器。表单伪类选择器,指的是根据“表单类型”来选择的伪类选择器。使用表单伪类选择器,我们可以快速选取我们需要的表单元素,然后达到快速开发的目的,非常方便快捷。

在jQuery中,常用的表单伪类选择器如下:

jQuery表单伪类选择器
选择器 说明
:input 选择所有input元素
:button 选择所有普通按钮,即type="button"的input元素
:submit 选择所有提交按钮,即type="submit"的input元素
:reset 选择所有重置按钮,即type="reset"的input元素
:text 选择所有单行文本框
:textarea 选择所有多行文本框
:password 选择所有密码文本框
:radio 选择所有单选按钮
:checkbox 选择所有复选框
:image 选择所有图像域
:hidden 选择所有隐藏域
:file 选择所有文件域

举例:

 
<!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选择器的实例,就能够掌握其他表单伪类选择器了。

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

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

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

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

回到顶部