表单选择器

表单作为HTML中一种特殊的元素，操作方法较为多样性和特殊性，开发者不但可以使用之前的常规选择器或过滤器，也可以使用jQuery为表单专门提供的选择器和过滤器来
准确的定位表单元素。

常规选择器

我们可以使用id、类(class)和元素名来获取表单字段，如果是表单元素，都必须含有name属性，还可以结合属性选择器来精确定位。

如html代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>表单选择器</title>
    <script type="text/javascript" src="jquery-1.12.3.js"></script>
    <script type="text/javascript" src="demo.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
    <form>
        <input type="text" name="user" value="123" />
        <input type="password" name="pass" value="456" />
    </form>
</body>
</html>

jQuery代码如下：

alert($("input").size()); //2
alert($("input").val()); //元素名定位，默认获取第一个
alert($("input").eq(1).val()); //这种写法语义不清晰
alert($("input[type=password]").val()); //语义清晰了一点，选择type为password的字段
alert($("input[name=pass]").val()); //选择name为pass的字段

那么对于id和类(class)，用法比较类似，也可以结合属性选择器来精确的定位，在这里我们不再重复。对于表单中的其他元素名比如：textarea、select和button等，原理一样，不再重复。

表单选择器

虽然可以使用常规选择器来对表单的元素进行定位，但有时还是不能满足开发者灵活多变的需求。所以jQuery为表单提供了专用的选择器。

表单选择器

方法名	描述	返回
:input	选取所有input、textarea、select和button元素	集合元素
:text	选择所有单行文本框，即type=text	集合元素
:password	选择所有密码框，即type=password	集合元素
:radio	选择所有单选框，即type=radio	集合元素
:checkbox	选择所有复选框，即type=checkbox	集合元素
:submit	选取所有提交按钮，即type=submit	集合元素
:reset	选取所有重置按钮，即type=reset	集合元素
:image	选取所有图像按钮，即type=image	集合元素
:button	选择所有普通按钮，即button元素	集合元素
:file	选择所有文件按钮，即type=file	集合元素
:hidden	选择所有不可见字段，即type=hidden	集合元素

有如下html代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>表单选择器</title>
    <script type="text/javascript" src="jquery-1.12.3.js"></script>
    <script type="text/javascript" src="demo.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
    <form>
        <input type="text" name="user" value="123" />
        <input type="password" name="pass" value="456" />
        <input type="radio" name="sex" value="男" checked="checked" />男
        <input type="radio" name="sex" value="女" />女
        <textarea></textarea>
        <select name="city" multiple>
            <option>1</option>
            <option>2</option>
            <option>3</option>
        </select>
        <button></button>
    </form>
</body>
</html>

jQuery代码：

alert($("input").size()); //4
alert($(":text").size()); //1

注意：这些选择器都是返回元素集合，如果想获取某一个指定的元素，最好结合一下属性选择器。比如：

alert($(":input[name=city]").size()); //1
alert($(":password[name=pass]").size()); //1

alert($(":radio[name=sex]").last().val()); //女   等价于alert($(":radio[name=sex]").eq(1).val());
alert($("form :hidden").size()); //返回0，因为文档没有隐藏元素，注意要加空格

注意一点：对于下拉框<select>

<select name="city">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

则默认选中第1条。若加一个属性multiple

<select name="city" multiple>
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

表单过滤器

jQuery提供了四种表单过滤器，分别在是否可以用、是否选定来进行表单字段的筛选过滤。

表单过滤器

方法名	描述	返回
:enabled	选取所有可用元素	集合元素
:disabled	选取所有不可用元素	集合元素
:checked	选取所有被选中的元素，单选和复选字段	集合元素
:selected	选取所有被选中的元素，下拉列表	集合元素

html代码同上不变，jQuery代码如下：

alert($("form :enabled").size()); //获取可用元素的数量
alert($("form :disabled").size()); //获取不可用元素的数量

alert($("form :checked").size()); //获取单选、复选框中被选中的元素数量
alert($("form :selected").size()); //获取下拉列表中被选中的元素数量
alert($("form :selected").get(0)); //undefined/[object HTMLOptionElement]

posted @ 2016-04-23 20:57 叶十一少阅读(1056) 评论(0) 编辑收藏举报

刷新页面返回顶部

叶十一少

表单选择器

公告