js进阶 10-11 表单伪类选择器的作用

一、总结

一句话总结：能想到用伪类选择器来解决问题。如果能一次记住自然是最棒的。

1、表单伪类选择器分为哪两类？

表单元素和表单属性，表单元素例如input，表单属性例如disabled

2、表单属性伪类选择器有哪四种（重要）？

可用的，不可用的，下拉列表选择的，单选复选选中的（就是我一直弄的那个功能）

表单属性伪类选择器

：enabled选择所有可用input元素

：disabled所有禁用的input元素

：selected选择所有被选中的option元素

：checked选择所被选中的表单元素，一般用于radio和checkbox

3、表单标签伪类选择器的作用？

选择表单里面的任何类型的元素，也可以选择显示和隐藏

26 $(':input').css('background','#ccc')

27 $(':button').css('background','green')

4、表单标签伪类选择器有哪些？

所有的表单元素

二、表单伪类选择器的作用

1、相关知识

表单伪类选择器
- : Input选择所有input元素
- ：button选择所有type="button"的input元素
- ：submit选择所有type="submit"的input元素
- ：reset选择所有type="reset"的input元素
- ：text选择所有单选文本框
- ：textarea选择所有多行文本框
- ：password选择所有密码文本框
- ：radio选择所有单选按钮
- ：checkbox选择所有复选框
- ：image选择所有图像域
- ：hidden选择所有隐藏域
- ：file选择所有文件域

表单属性伪类选择器
- ：enabled选择所有可用input元素
- ：disabled所有禁用的input元素
- ：selected选择所有被选中的option元素
- ：checked选择所被选中的表单元素，一般用于radio和checkbox

2、代码

10-11代码

1  2  3  4     
      5     演示文档 6      7  8  9 
     
      10     
      用户名：
11     
      密  码：
12     
      爱  好：
13         新闻
14         小说
15         音乐
16     
17     
      上传头像：
18     
      19         20             21         22         23     
24 
     
25 35 36

10-12代码

1  2  3  4     
      5     演示文档 6      7  8  9 
     
      10     
      用户名：
11     
      密  码：
12     
      爱  好：
13         新闻14         小说15         音乐16         17     
18     
      19         20             21     
22     
      27 
     
     28 40 41