[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]'
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"); }
表单对象属性选择器
:enabled
:enabled选择器选择可用的表单元素
:disabled
:disabled选择器选择不可用的表单元素
reset.onclick = function(){history.go();}
btn1.onclick = function(){$('form :enabled').css("background", "red");}
btn2.onclick = function(){ $(':disabled').css("background", "#A2CD5A");}
:checked
:checked选择器选择被选中的元素(单选框、复选框)
reset.onclick = function(){history.go();}
btn1.onclick = function(){$(':checked').removeAttr('checked')}
:selected
:selected选择器选择被选中的
reset.onclick = function(){history.go();}
btn1.onclick = function(){$(':selected').removeAttr('selected')}
好文链接
发表评论