1. 程式人生 > >jquery表單選擇器

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選擇器選擇被選中的元素(單選框、複選框)

<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選擇器選擇被選中的元素(下拉列表)

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