2-13 jQuery选择器之表单对象属性筛选选择器
本节编程练习不计算学习进度，请电脑登录imooc.com操作

jQuery选择器之表单对象属性筛选选择器

除了表单元素选择器外，表单对象属性筛选选择器也是专门针对表单元素的选择器，可以附加在其他选择器的后面，主要功能是对所选择的表单元素进行筛选

表单筛选选择器的描述：

注意事项：

  1. 选择器适用于复选框和单选框，对于下拉框元素, 使用 :selected 选择器
  2. 在某些浏览器中，选择器:checked可能会错误选取到<option>元素，所以保险起见换用选择器input:checked，确保只会选取<input>元素

任务

在代码编辑器中第29行填写相应代码

 $('input:enabled')

在代码编辑器中第34行填写相应代码

$('input:disabled')

在代码编辑器中第56行填写相应代码

$('input:checked')

在代码编辑器中第62行填写相应代码

$('option:selected')
index.html 
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  6.     <title></title>
  7.     <link rel="stylesheet" href="imooc.css" type="text/css">
  8.     <style>
  9.     input {
  10.         display: block;
  11.         margin: 10px;
  12.         padding: 10px;
  13.     }
  14.     </style>
  15.     <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
  16. </head>
  17.  
  18. <body>
  19.     <h2>子元素筛选选择器</h2>
  20.     <h3>enabled、disabled</h3>
  21.     <form>
  22.         <input type="text" value="未设置disabled" />
  23.         <input type="text" value="设置disabled" disabled="disabled" />
  24.         <input type="text" value="未设置disabled" />
  25.     </form>
  26.  
  27.     <script type="text/javascript">
  28.         //查找所有input所有可用的（未被禁用的元素）input元素。
  29.         ?.css("border", "2px groove red");
  30.     </script>
  31.  
  32.     <script type="text/javascript">
  33.         //查找所有input所有不可用的（被禁用的元素）input元素。
  34.         ?.css("border", "2px groove blue");
  35.     </script>
  36.  
  37.     <h3>checked、selected</h3>
  38.     <form>
  39.         <input type="checkbox" checked="checked">
  40.         <input type="checkbox">
  41.         <input type="radio" checked>       
  42.         <input type="radio">
  43.  
  44.         <select name="garden" multiple="multiple">
  45.             <option>imooc</option>
  46.             <option selected="selected">慕课网</option>
  47.             <option>aaron</option>
  48.             <option selected="selected">博客园</option>
  49.           </select>
  50.  
  51.     </form>
  52.  
  53.     <script type="text/javascript">
  54.          //查找所有input所有勾选的元素(单选框,复选框)
  55.          //移除input的checked属性
  56.         ?.removeAttr('checked')
  57.     </script>
  58.  
  59.     <script type="text/javascript">
  60.          //查找所有option元素中,有selected属性被选中的选项
  61.          //移除option的selected属性
  62.         ?.removeAttr('selected')
  63.     </script>
  64.  
  65. </body>
  66.  
  67. </html>
下一节