本文接上篇聊聊表单对象属性过滤选择器。
八.表单对象属性过滤选择器
表单对象属性过滤选择器通过表单中的某对象属性特征获取该类元素,如 enabled、disabled、checked、selected 属性。其详细的说明如表所示
示例代码:
<head>
<title> 使用 jQuery 表单对象属性过滤选择器 </title> <script language="javascript" type="text/javascript" src="Jscript/jquery-1.8.2.min.js"></script> <style type="text/css"> body { font-size: 12px; text-align: center } div { display: none } select { height: 65px } .clsIpt { width: 100px; padding: 3px } .GetFocus { border: solid 1px #666; background-color: #eee } </style> <script type="text/javascript"> $(function () { // 增加表单中所有属性为可用的元素类别 $("#divA").show(3000); $("#form1 input:enabled").addClass("GetFocus"); }) $(function () { // 增加表单中所有属性为不可用的元素类别 $("#divA").show(3000); $("#form1 input:disabled").addClass("GetFocus"); }) $(function () { // 增加表单中所有被选中的元素类别 $("#divB").show(3000); $("#form1 input:checked").addClass("GetFocus"); }) $(function () { // 显示表单中所有被选中 option 的元素内容 $("#divC").show(3000); $("#Span2").html(" 选中项是:" + $("select option:selected").text()); }) </script> </head> <body> <form id="form1" style="width:241px"> <div id="divA"> <input type="text" value=" 可用文本框 " class="clsIpt" /> <input type="text" disabled="disabled" value=" 不可用文本框 " class="clsIpt" /> </div> <div id="divB"> <input type="checkbox" checked="checked" value="1" /> 选中 <input type="checkbox" value="0" /> 未选中 </div> <div id="divC"> <select multiple="multiple"> <option value="0">Item 0</option> <option value="1" selected="selected"> Item 1 </option> <option value="2">Item 2</option> <option value="3" selected="selected"> Item 3 </option> </select> <span id="Span2"></span> </div> </form> </body>
好了,本篇文章就介绍到这儿,欢迎大家留言交流;喜欢或有帮助到您的话,点个赞或推荐支持一下!