微信扫一扫打赏支持

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

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>

 

 

 

 

 

 

 

 

 

 
 
 
 
posted @ 2018-06-18 06:12  范仁义  阅读(551)  评论(0)  编辑  收藏  举报