节点遍历
next 获取同级节点的下一个节点 ,可使用过滤器、下同
nextAll 获取之后的所有同级元素
siblings 获取所有同级元素
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title>节点遍历</title>
5 <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
6 <script type="text/javascript">
7 $(function () {
8 //为每个单元格添加事件
9 $("td").click(function () {//单击后 显示文本提示
10 var tips = $("#tips");
11 var THIS = $(this);
12 var text = "现在是" + THIS.text();
13 //next中参数可以使用选择器、选择只要指定的元素、如果不指定则就是下一个元素
14 if (THIS.next("td").text() == "")
15 text += ",下一节没有课程了";
16 else
17 text += ",下一节是" + THIS.next("td").text();
18 tips.text(text);
19 }).mouseout(function () { //鼠标离开后、字体颜色恢复
20 $(this).css("background-color", "white").next("td").css("background-color", "white");
21 }).mouseenter(function () { //高亮显示当前课程和下节课程
22 $(this).css("background-color", "red").next("td").css("background-color", "green");
23 });
24
25 //这里td1的同级元素只有后面两个、周二、周三的课程看起来也是同级元素、但是他们的不是同一个tr里的、即所处容器不同
26 //同样nextAll也可以使用过滤器、不使用则返回所有同级元素
27 $("#nextAll").click(function () {
28 alert($("#td1").nextAll("td").text());
29 });
30
31 //siblings方法、也可以使用过滤器
32 $("#siblings span").mouseenter(function () {
33 $(this).css("background-color", "red")/*将自己设为高亮*/.siblings().css("background-color", "white");//将兄弟元素恢复原来背景色
34 });
35 });
36 </script>
37 </head>
38 <body>
39 <table border="1" id="tb1">
40 <tr>
41 <th></th>
42 <th>第一节</th>
43 <th>第二节</th>
44 <th>第三节</th>
45 </tr>
46 <tr>
47 <th>周一</th>
48 <td id="td1">语文</td>
49 <td>数学</td>
50 <td>英语</td>
51 </tr>
52 <tr>
53 <th>周二</th>
54 <td>物理</td>
55 <td>化学</td>
56 <td>哲学</td>
57 </tr>
58 <tr>
59 <th>周三</th>
60 <td>外语</td>
61 <td>高数</td>
62 <td>文学</td>
63 </tr>
64 </table>
65
66 <span id="tips"></span>
67 <br />
68 <input id="nextAll" type="button" value="nextAll()" />
69
70 <hr />
71 <!-- siblings 例子 -->
72 <div id="siblings">
73 选择你的职业：<br />
74 <span><input type="radio" name="major" value="教师1" />教师1<br /></span>
75 <span><input type="radio" name="major" value="教师2" />教师2<br /></span>
76 <span><input type="radio" name="major" value="教师3" />教师3<br /></span>
77 <span><input type="radio" name="major" value="教师4" />教师4<br /></span>
78 <span><input type="radio" name="major" value="教师5" />教师5<br /></span>
79 <span><input type="radio" name="major" value="教师6" />教师6<br /></span>
80 </div>
81 </body>
82 </html>