你的位置:首页 > Java教程

[Java教程]深入学习jQuery选择器系列第七篇——表单选择器


×
目录
[1]表单元素 [2]对象属性

前面的话

  无论是提交还是传递数据,表单元素在动态交互页面的作用是非常重要的。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>