JQ表单选择器和CSS3表单选择器　　　　　　　　　　JQ表单选择器和CSS3表单选择器

　　JQ表单选择器

　　　　为了使用户能够更加灵活地操作表单，jQuery中加入了表单选择器，利用这个选择器能极其方便的获取到表单的某个或者某类型的元素。表单选择器的介绍如图：

　　　　　　　　 JQ表单选择器和CSS3表单选择器
　　　　　　　　　　JQ表单选择器和CSS3表单选择器

　　　　我们要着重强调的是:input, :submit, :reset, :button, :hidden选择器。因为有一些细节需要我们特别注意（并不能顾名思义）。

　　　　测试HTML代码：

 1 　　<input type="text" name="text" value="">
 2     <input type="radio" name="radio" value="">
 3     <input type="checkbox" name="checkbox" value="">
 4     <input type="hidden" name="hidden" value="">
 5     <input type="text" name="textHidden" hidden>
 6     <input type="text" name="textVisility" style="visibility: hidden">
 7     <input type="text" name="textDisplay" style="display: none">
 8     <input type="submit" name="submit" value="submit">
 9     <input type="button" name="button" value="button">
10     <input type="reset" name="reset" value="reset">
11     <button type="button">buttonBtn</button>
12     <textarea>textarea</textarea>
13     <select name="section">
14         <option value="one">one</option>
15         <option value="two">two</option>
16         <option value="three">three</option>
17         <option value="four">four</option>
18     </select>
19     <button type="submit">submitBtn</button>
20

　　　　首先是:input 选择器选取所有的<input>, <textarea>, <select>, <button>元素。JQ代码:

1 $(':input').css('border', '1px solid red'); 测试效果如图：

　　

　　　　结果：所有的<input>, <textarea>, <select>, <button>元素都被添加边框。

　　　　接着测试:submit选择器, JQ代码： $(':submit').css('border', '1px solid red'); 测试效果如图：

　　　　

　　　　　结果：不管是<input>,还是<button>元素，type值等于"submit"，就会被添加边框。

　　　　　接着测试:reset选择器， JQ代码： $(':reset').css('border', '1px solid red'); 测试效果图：

　　　　

　　　　　结果：不管是<input>,还是<button>元素，type值等于"reset"，就会被添加边框。

　　　　　接着测试:button选择器, JQ代码： $(':button').css('backgroundColor', 'orange'); 测试效果图：

　　　　

　　　　　结果：我们发现只有<button>元素以及是<input>且type值等于"button"的元素才被添加背景色为橙色。

　　　　　最后测试的是:hidden 选择器， JQ代码： $(':hidden').css('backgroundColor' 'green'); 测试效果图：

　　　　　

　　　　　结果：只有<input>且type值是"hidden", 具有HTML5属性 hidden的， display: none的元素才会被添加背景色为绿色，注意visibility: hidden的元素并不会被设置背景色。JQ有一个:visible选择器，可以扩展下。地址

　　CSS3表单选择器

　　　　CSS3新增的表单选择器有三个 :enabled 选择每个启用的 <input> 元素。, :disabled 选择每个禁用的 <input> 元素, :checked 选择每个被选中的<input> 元素。特别注意：这三个表单选择器只针对<input>元素，而且:checked选择器只有欧朋浏览器支持。具体的移步W3C底部。

JQ表单选择器和CSS3表单选择器 JQ表单选择器和CSS3表单选择器