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>
|