jQuery表单选择器
无论是提交还是传递数据，表单元素在动态交互页面的作用是非常重要的。jQuery专门加入了表单选择器，从而能够极其方便地获取到某个类型的表单元素
表单元素选择器
:input
:input选择器选择input、textarea、select和button元素
:text
:text选择器选择所有的单行文本框
:password
:password选择器选择所有的密码框
:radio
:radio选择器选择所有的单选框
:checkbox
:checkbox选择器选择所有的多选框
:submit
:submit选择器选择所有的提交按钮
:image
:image选择器选择所有的图像按钮
:reset
:reset选择器选择所有的重置按钮
:button
:button选择器选择所有的按钮
:file
:file选择器选择所有的文件上传域
[注意]大部分表单类别筛选器可以使用属性筛选器替换
':password'可以写为'[type=password]'
<button id="btn1" style="color: red;">$(':input')</button>
<button id="btn2" style="color: #A2CD5A;">$(':text')</button>
<button id="btn3" style="color: yellow;">$(':password')</button>
<button id="btn4">$(':radio')</button>
<button id="btn5">$(':checkbox')</button>
<button id="btn6" style="color: #C6E2FF">$(':submit')</button>
<button id="btn7" style="color: #F4A460;">$(':image')</button>
<button id="btn8" style="color: green;">$(':button')</button>
<button id="btn9" style="color: #CD1076;">$(':file')</button>
<button id="btn10" style="color: pink;">$(':reset')</button>
<button id="reset">还原</button>
<form id="box">
<input type="text" value="text类型"/>
<input type="password" value="password"/>
<input type="radio"/>
<input type="checkbox"/>
<input type="submit" />
<input type="image" />
<input type="button" value="Button" />
<input type="file" />
<input type="reset" />
</form>
<script>
reset.onclick = function(){history.go();}
btn1.onclick = function(){$('#box :input').css("border", "1px groove red");}
btn2.onclick = function(){ $(':text').css("background", "#A2CD5A");}
btn3.onclick = function(){$(':password').css("background", "yellow");}
btn4.onclick = function(){$(':radio').attr('checked','true');}
btn5.onclick = function(){$(':checkbox').attr('checked','true');}
btn6.onclick = function(){$('#box :submit').css("background", "#C6E2FF"); }
btn7.onclick = function(){$(':image').css("background", "#F4A460"); }
btn8.onclick = function(){ $('#box :button').css("background", "green"); }
btn9.onclick = function(){$(':file').css("background", "#CD1076"); }
btn10.onclick = function(){$(':reset').css("background", "pink"); }
</script>表单对象属性选择器
:enabled
:enabled选择器选择可用的表单元素
:disabled
:disabled选择器选择不可用的表单元素
<button id="btn1" style="color: red;">$(':enabled')</button>
<button id="btn2" style="color: #A2CD5A;">$(':disabled')</button>
<button id="reset">还原</button>
<form>
<input type="text" />
<input type="text" disabled/>
<input type="text" />
</form>
<script src="jquery-3.1.0.js"></script>
<script>
reset.onclick = function(){history.go();}
btn1.onclick = function(){$('form :enabled').css("background", "red");}
btn2.onclick = function(){ $(':disabled').css("background", "#A2CD5A");}
</script>:checked
:checked选择器选择被选中的<input>元素(单选框、复选框)
<button id="btn1">$(':checked')</button>
<button id="reset">还原</button>
<form>
<input type="checkbox" checked>
<input type="checkbox">
<input type="radio" checked>
<input type="radio">
</form>
<script>
reset.onclick = function(){history.go();}
btn1.onclick = function(){$(':checked').removeAttr('checked')}
</script>:selected
:selected选择器选择被选中的<option>元素(下拉列表)
<button id="btn1">$(':selected')</button>
<button id="reset">还原</button>
<select multiple>
<option>1</option>
<option selected>2</option>
<option>3</option>
<option selected>4</option>
</select>
<script>
reset.onclick = function(){history.go();}
btn1.onclick = function(){$(':selected').removeAttr('selected')}
</script>