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>