010 使用jquery实现小需求练习-------对应选择器的练习

1.需求
　　点击所有的 p 节点, 能够弹出其对应的文本内容
　　使第一个 table 隔行变色
　　点击 button, 弹出 checkbox 被选中的个数
2.程序
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Insert title here</title>
 6 <script type="text/javascript" SRC="jquery-3.2.1.min.js"></script>
 7 <script type="text/javascript">
 8     $(function(){
 9         //点击所有的 p 节点, 能够弹出其对应的文本内容
10         $("p").click(function(){
11             alert($(this).text());
12         })
13         //使第一个 table 隔行变色
14         $("table:first tr:even").click(function(){
15             $(this).css("background","#fab");
16         });
17         //点击 button, 弹出 checkbox 被选中的个数
18         $("button").click(function(){
19             var len=$(":checkbox:checked").length;
20             alert(len);
21         })
22     })
23 
24 </script>
25 </head>
26 <body>
27     <p>段落1</p>
28     <p>段落2</p>
29     <p>段落3</p>
30     <table>
31         <tr>
32             <td>第一行</td>
33             <td>第一行</td>
34         </tr>
35         <tr>
36             <td>第一行</td>
37             <td>第一行</td>
38         </tr>
39         <tr>
40             <td>第一行</td>
41             <td>第一行</td>
42         </tr>
43         <tr>
44             <td>第一行</td>
45             <td>第一行</td>
46         </tr>
47         <tr>
48             <td>第一行</td>
49             <td>第一行</td>
50         </tr>
51         <tr>
52             <td>第一行</td>
53             <td>第一行</td>
54         </tr>
55     </table>
56     <br>
57     <hr>
58     <br>
59     <table>
60         <tr>
61             <td>第一行</td>
62             <td>第一行</td>
63         </tr>
64         <tr>
65             <td>第一行</td>
66             <td>第一行</td>
67         </tr>
68         <tr>
69             <td>第一行</td>
70             <td>第一行</td>
71         </tr>
72         <tr>
73             <td>第一行</td>
74             <td>第一行</td>
75         </tr>
76         <tr>
77             <td>第一行</td>
78             <td>第一行</td>
79         </tr>
80         <tr>
81             <td>第一行</td>
82             <td>第一行</td>
83         </tr>
84     </table>
85 
86     <input type="checkbox" name="test" />
87     <input type="checkbox" name="test" />
88     <input type="checkbox" name="test" />
89     <input type="checkbox" name="test" />
90     <input type="checkbox" name="test" />
91     <input type="checkbox" name="test" />
92     <button>您选中的个数</button>
93 </body>
94 </html>