jQuery的表单元素选择器解析大全 - 苏飞论坛

在这里，总结了下jQuery的表单元素选择器，都有哪些表单元素选择器，表单元素选择器的具体使用方法，并通过具体的实例，介绍各个表单元素选择器的具体使用方法。

jQuery的表单元素选择器列表如下：

[C#] 纯文本查看 复制代码

1. :input  匹配所有 input, textarea, select 和 button 元素

2. :text  匹配所有的单行文本框

3. :password  匹配所有密码框

4. :radio  匹配所有单选按钮

5. :checkbox  匹配所有复选框

6. :submit  匹配所有提交按钮(只匹配 type="submit" 的input或者button)

7. :image  匹配所有图像域

8. :reset  匹配所有重置按钮

9. :button  匹配所有按钮

10 :file  匹配所有文件域

下面会根据具体的实例，进行各个 jQuery的表单元素选择器的详解

1. :input

匹配所有 input, textarea, select 和 button 元素，即页面是所有的表单元素中，获取所有的 input框，textarea文本输入框，select下拉框，button按钮

jQuery代码如下：

[JavaScript] 纯文本查看 复制代码

$(":input")

输出代码如下：

[JavaScript] 纯文本查看 复制代码

[ 

    <input type="button" value="Input Button"/>,

    <input type="checkbox" />,



    <input type="file" />,

    <input type="hidden" />,

    <input type="image" />,



    <input type="password" />,

    <input type="radio" />,

    <input type="reset" />,



    <input type="submit" />,

    <input type="text" />,

    <select><option>Option</option></select>,



    <textarea></textarea>,

    <button>Button</button>,

 ]

备注：

从以上代码可以看出， :input 选择器，获取的是所有的 input 元素，不管type 为text文本输入框，还是image 图像内容， password 密码输入框........ 均可以获取到

2. :text

匹配所有的单行文本框

jQuery代码：

[JavaScript] 纯文本查看 复制代码

$(":text")

输出代码：

[JavaScript] 纯文本查看 复制代码

[ <input type="text" /> ]

备注：

从以上内容可以看出， ：text 选择器，获取的仅仅是 type=text的input元素 即页面上通常使用的 input输入框

3. :password

匹配所有密码框

jQuery代码：

[JavaScript] 纯文本查看 复制代码

$(":password")

输出结果：

[JavaScript] 纯文本查看 复制代码

[ <input type="password" /> ]

备注：

从以上输出内容可以看出 :password 获取的是所有的，type=password的 input元素 即我们页面上常用的密码输入框 通常会用在登陆，注册，修改密码等地方

4. :radio

匹配所有单选按钮

jQuery代码：

[JavaScript] 纯文本查看 复制代码

$(":radio")

输出结果：

[JavaScript] 纯文本查看 复制代码

[ <input type="radio" /> ]

备注：

从输出内容可以看到，:radio 获取的是说有的 type=”radio“的单元按钮

5. :checkbox

匹配所有复选框

jQuery代码：

[JavaScript] 纯文本查看 复制代码

$(":checkbox")

输出结果：

[JavaScript] 纯文本查看 复制代码

[ <input type="checkbox" /> ]

备注：从输出内容可以看到， :checkbox 获取的是说有的 type=”checkbox“的复选框

6. :submit

匹配所有提交按钮(只匹配 type="submit" 的input或者button)，如果button 没有标注type 的话，默认为 type=”submit“

jQuery代码：

[JavaScript] 纯文本查看 复制代码

$(":submit")

输出结果：

[JavaScript] 纯文本查看 复制代码

[ <input type="submit" />, <button></button> ]

备注：从输出内容可以看到，:submit 获取的是说有的页面的提交按钮 button 或者type=”submit“的input元素
另需谨记，button 在默认不设置type的情况下，默认type为submit，所以很多情况下，不设置type的button也会成为筛选结果

7. :image

匹配所有图像域

jQuery代码：

[JavaScript] 纯文本查看 复制代码

$(":image")

输出结果：

[JavaScript] 纯文本查看 复制代码

[ <input type="image" /> ]

8. :reset

匹配所有重置按钮
jQuery代码：

[JavaScript] 纯文本查看 复制代码

$(":reset")

输出结果：

[JavaScript] 纯文本查看 复制代码

[ <input type="reset" /> ]

9. :button

匹配所有按钮
jQuery代码：

[JavaScript] 纯文本查看 复制代码

$(":button")

输出结果：

[JavaScript] 纯文本查看 复制代码

[ <input type="button" />,<button></button> ]

10 :file

匹配所有文件域

jQuery代码：

[JavaScript] 纯文本查看 复制代码

$(":file")

输出结果：

[C#] 纯文本查看 复制代码

[ <input type="file" /> ]

附件

html代码如下：

[HTML] 纯文本查看 复制代码

<form>

  <input type="text" />

  <input type="checkbox" />

  <input type="radio" />

  <input type="image" />

  <input type="file" />

  <input type="submit" />

  <input type="reset" />

  <input type="password" />

  <input type="button" />

  <select><option/></select>

  <textarea></textarea>

  <button></button>

</form>