jQuery的表单元素选择器解析大全

范范

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>

范范

：input   是匹配所有的 页面表单元素   而其他的 表单元素选择器，匹配的则比较具体

站长苏飞

好贴子

范范

谢老大支持，努力ing