jQuery表单对象属性过滤选择器实例详解

本文实例讲述了jQuery表单对象属性过滤选择器。分享给大家供大家参考，具体如下：

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>2-11</title><script src="jquery-1.7.2.min.js" type="text/javascript"></script><script type="text/javascript">//<！[CDATA[$（document）.ready（function（）{//重置表单元素$（":reset"）.click（function（）{setTimeout（function（） {countChecked（）;$（"select"）.change（）;},0）;}）;//对表单内 可用input 赋值操作.$（"#btn1"）.click（function（）{$（"#form1 input:enabled"）.val（"这里变化了！"）;return false;}）//对表单内 不可用input 赋值操作.$（"#btn2"）.click（function（）{$（"#form1 input:disabled"）.val（"这里变化了！"）;return false;}）//使用:checked选择器，来操作多选框.$（":checkbox"）.click（countChecked）;function countChecked（） {var n = $（"input:checked"）.length;$（"div"）.eq（0）.html（"<strong>有"+n+" 个被选中！</strong>"）;}countChecked（）;//进入页面就调用.//使用:selected选择器，来操作下拉列表.$（"select"）.change（function （） {var str = "";$（"select :selected"）.each（function （） {str += $（this）.text（） + ",";}）;$（"div"）.eq（1）.html（"<strong>你选中的是："+str+"</strong>"）;}）.trigger（"change"）;// trigger（"change"） 在这里的意思是：// select加载后，马上执行onchange.// 也可以用.change（）代替.}）;//]]></script></head><body><h3> 表单对象属性过滤选择器.</h3><form id="form1" action="#"><button type="reset">重置所有表单元素</button><br /><br /><button id="btn1">对表单内 可用input 赋值操作.</button><button id="btn2">对表单内 不可用input 赋值操作.</button><br /><br />可用元素：<input name="add" value="可用文本框"/><br/>不可用元素：<input name="email" disabled="disabled" value="不可用文本框"/><br/>可用元素：<input name="che" value="可用文本框" /><br/>不可用元素：<input name="name" disabled="disabled" value="不可用文本框"/><br/><br/>多选框：<br/><input type="checkbox" name="newsletter" checked="checked" value="test1" />test1<input type="checkbox" name="newsletter" value="test2" />test2<input type="checkbox" name="newsletter" value="test3" />test3<input type="checkbox" name="newsletter" checked="checked" value="test4" />test4<input type="checkbox" name="newsletter" value="test5" />test5<div></div><br/><br/>下拉列表1：<br/><select name="test" multiple="multiple" style="height:100px"><option>浙江</option><option selected="selected">湖南</option><option>北京</option><option selected="selected">天津</option><option>广东</option><option>湖北</option></select><br/><br/>下拉列表2：<br/><select name="test2" ><option>浙江</option><option>湖南</option><option selected="selected">北京</option><option>天津</option><option>广州</option><option>湖北</option></select><br/><br/><div></div></form></body></html>

运行效果图如下：

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery表单操作总结》、《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery表格（table）操作技巧汇总》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。