2-12 jQuery选择器之表单元素选择器
本节编程练习不计算学习进度，请电脑登录imooc.com操作

jQuery选择器之表单元素选择器

无论是提交还是传递数据，表单元素在动态交互页面的作用是非常重要的。jQuery中专门加入了表单选择器，从而能够极其方便地获取到某个类型的表单元素

表单选择器的具体方法描述：

注意事项：

除了input筛选选择器，几乎每个表单类别筛选器都对应一个input元素的type值。大部分表单类别筛选器可以使用属性筛选器替换。比如 $(':password') == $('[type=password]')

任务

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

$(':input')

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

$('input:text')

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

$('input:password')

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

$('input:radio')

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

$('input:checkbox')

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

$('input:submit')

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

$('input:image')

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

$('input:button')

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

$('input:file')
index.htmlimooc.css 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  5.     <title></title>
  6.     <link rel="stylesheet" href="imooc.css" type="text/css">
  7.     <style> 
  8.         input{
  9.             display: block;
  10.             margin: 10px;
  11.             padding:10px;
  12.         }
  13.     </style>
  14.     <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
  15. </head>
  16.  
  17. <body>
  18.     <h2>子元素筛选选择器</h2>
  19.     <h3>input、text、password、radio、checkbox</h3>
  20.     <h3>submit、image、reset、button、file</h3>
  21.     <div class="left first-div">
  22.         <form>
  23.             <input type="text" value="text类型"/>
  24.             <input type="password" value="password"/>
  25.             <input type="radio"/> 
  26.             <input type="checkbox"/>
  27.             <input type="submit" />
  28.             <input type="image" />
  29.             <input type="reset" />
  30.             <input type="button" value="Button" />
  31.             <input type="file" />
  32.         </form>
  33.     </div>
  34.  
  35.     <script type="text/javascript">
  36.         //查找所有 input, textarea, select 和 button 元素
  37.         //:input 选择器基本上选择所有表单控件
  38.         ?.css("border", "1px groove red"); 
  39.     </script>
  40.  
  41.     <script type="text/javascript">
  42.         //匹配所有input元素中类型为text的input元素
  43.         ?.css("background", "#A2CD5A");
  44.     </script>
  45.  
  46.     <script type="text/javascript">
  47.         //匹配所有input元素中类型为password的input元素
  48.         ?.css("background", "yellow");
  49.     </script>
  50.  
  51.     <script type="text/javascript">
  52.         //匹配所有input元素中的单选按钮,并选中
  53.         ?.attr('checked','true');
  54.     </script>
  55.  
  56.     <script type="text/javascript">
  57.         //匹配所有input元素中的复选按钮,并选中
  58.         ?.attr('checked','true'); 
  59.     </script>
  60.  
  61.     <script type="text/javascript">
  62.         //匹配所有input元素中的提交的按钮,修改背景颜色
  63.         ?.css("background", "#C6E2FF");
  64.     </script>
  65.  
  66.     <script type="text/javascript">
  67.         //匹配所有input元素中的图像类型的元素,修改背景颜色
  68.         ?.css("background", "#F4A460");
  69.     </script>
  70.  
  71.     <script type="text/javascript">
  72.         //匹配所有input元素中类型为按钮的元素
  73.         ?.css("background", "red");
  74.     </script>
  75.  
  76.     <script type="text/javascript">
  77.         //匹配所有input元素中类型为file的元素
  78.         ?.css("background", "#CD1076");
  79.     </script>
  80.  
  81. </body>
  82.  
  83. </html>
  1. input{
  2.             display: block;
  3.             margin: 10px;
  4.             padding:10px;
  5.         }
下一节