jquery学习系列7(链式编程)

1 <html xmlns="http://www.w3.org/1999/xhtml">
2 <head>
3 <title></title>
4
5 <script language="javascript" src="js/jquery-1.5.js"></script>
6
7 <script language="javascript">
8 //点击当前div即当前div背景变为red,其他div背景变为blue
9 // $(function() {
10 // $("div").click(function() {
11 // $(this).css("background", "red").siblings("div").css("background", "blue");
12 // })
13 // //id=xx下的所有td内都弄成这个图片
14 // $("#xx td").html("<img src='empty.jpg' />");
15 // })
16 // $(function() {
17 // //移上去变亮移开变灰
18 // $("#xx td").html("<img src='empty.jpg' />").mouseover(function() {
19 // $(this).html("<img src='all.jpg' />");
20 // $(this).nextAll().html("<img src='empty.jpg' />");
21 // });
22 // })
23 $(function() {
24 //移上去把自己设成亮的再把它的兄弟(siblings)设成亮的,最后再把它设成灰的
25 $("#xx td").html("<img src='empty.jpg' />").mouseover(function() {
26 $(this).html("<img src='all.jpg' />");
27 $(this).siblings().html("<img src='all.jpg' />");
28 $(this).nextAll().html("<img src='empty.jpg' />");
29 });
30 })
31 </script>
32
33 </head>
34 <body>
35 <div>
36 aa</div>
37 <div>
38 bb</div>
39 <p>
40 pp</p>
41 <div>
42 cc</div>
43 <div>
44 dd</div>
45 <table id="xx">
46 <tr>
47 <td>
48 </td>
49 <td>
50 </td>
51 <td>
52 </td>
53 <td>
54 </td>
55 <td>
56 </td>
57 </tr>
58 </table>
59 </body>
60 </html>
posted @ 2011-05-06 15:03  aspneteye  阅读(370)  评论(0编辑  收藏  举报