07JQuery笔记---------------------相对选择器的使用 

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head>
 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 4     <title></title>
 5     <script src="jquery-1.8.3.js"></script>
 6     <script type="text/javascript">
 7         $(function () {
 8             $('tr', $('#tb')).click(function () {
 9                 $('td', $(this).siblings('tr')).css('backgroundColor', '');
10                 $('td:even', $(this)).css('backgroundColor', 'red');
11                 $('td:odd', $(this)).css('backgroundColor', 'green');
12             });
13         });
14     </script>
15 </head>
16 <body>
17     <table border="1" style="cursor:pointer" id="tb">
18         <tr>
19             <td>张飞</td>
20             <td>赵云</td>
21             <td>关羽</td>
22             <td>马超</td>
23         </tr>
24         <tr>
25             <td>荀彧</td>
26             <td>荀攸</td>
27             <td>程咿</td>
28             <td>郭嘉</td>
29         </tr>
30         <tr>
31             <td>甘宁</td>
32             <td>程普</td>
33             <td>周泰</td>
34             <td>陆逊</td>
35         </tr>
36         <tr>
37             <td>陈宫</td>
38             <td>田丰</td>
39             <td>沮授</td>
40             <td>吕布</td>
41         </tr>
42     </table>
43 </body>
44 </html>

 

posted on 2016-01-12 11:27  努力的活着_在人间  阅读(305)  评论(0)    收藏  举报

导航