节点遍历

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>