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 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>演示文档</title> 6 <script src="jquery-3.1.1.min.js"></script> 7 </head> 8 <body> 9 <form action="#"> 10 <p>用户名：<input type="text" name="username"></p> 11 <p>密 码：<input type="password" name="password"></p> 12 <p>爱 好：<br> 13 <input type="radio" name="rad" value="A">新闻<br> 14 <input type="radio" name="rad" value="B">小说<br> 15 <input type="radio" name="rad" value="C">音乐<br> 16 </p> 17 <p>上传头像：<input type="file"></p> 18 <p> 19 <input type="reset" value="重置"> 20 <input type="submit" value="提交"> 21 <input type="button" value="按钮1"> 22 <button type="button">按钮2</button> 23 </p> 24 </form> 25 <script> 26 $(':input').css('background','#ccc') 27 $(':button').css('background','green') 28 $(':submit').css('background','blue') 29 $(':text').css('background','#fcc') 30 $(':password').css('background','#fcc') 31 $(':radio').hide(3000) 32 $(':radio').show(3000) 33 $(':file').css('background','orange') 34 </script> 35 </body> 36 </html>
10-12代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>演示文档</title> 6 <script src="jquery-3.1.1.min.js"></script> 7 </head> 8 <body> 9 <form action="#"> 10 <p>用户名：<input type="text" name="username"></p> 11 <p>密 码：<input type="password" name="password"></p> 12 <p>爱 好：<br> 13 <input type="radio" name="rad" value="A" checked="">新闻 14 <input type="radio" name="rad" value="B">小说 15 <input type="radio" name="rad" value="C">音乐 16 <input type="button" class="btn1" value="隐藏单选框"> 17 </p> 18 <p> 19 <input type="reset" value="重置" disabled=""> 20 <input type="submit" value="提交"> 21 </p> 22 <select onchange="selVal()" > 23 <option value="列表项1">列表项1</option> 24 <option value="列表项2">列表项2</option> 25 <option value="列表项3">列表项3</option> 26 </select> 27 </form> 28 <script> 29 $(':enabled').css('background','#ccc') 30 $(':disabled').css('background','green') 31 $('.btn1').click(function(){ 32 $(':checked').hide() 33 }) 34 35 function selVal(){ 36 var str=$(':selected').val() 37 alert(str) 38 } 39 </script> 40 </body> 41 </html>