children():只考虑子元素而不考虑其他后代元素
1 <html xmlns="http://www.w3.org/1999/xhtml">
2 <head runat="server">
3 <title></title>
4 <script src="Scripts/jquery-1.11.2.js" type="text/javascript"></script>
5 <script type="text/javascript">
6
7 $(function () {
8
9 var $body = $("body").children();
10 var $p = $("p").children();
11 var $ul = $("ul").children();
12
13 alert($body.length); //2个元素
14 alert($p.length); //0个元素
15 alert($ul.length); //3个元素
16
17 for (var i = 0; i < $ul.length; i++) {
18
19 alert($ul[i].innerHTML);//
20 }
21
22 });
23 </script>
24 </head>
25 <body>
26 <p>
27 你喜欢的水果是?</p>
28 <ul>
29 <li>苹果</li>
30 <li>橘子</li>
31 <li>香蕉</li>
32 </ul>
33 </body>
34 </html>
next():后面紧邻的同辈元素
1 <html xmlns="http://www.w3.org/1999/xhtml">
2 <head runat="server">
3 <title></title>
4 <script src="Scripts/jquery-1.11.2.js" type="text/javascript"></script>
5 <script type="text/javascript">
6
7 $(function () {
8
9 var $p1 = $("p").next(); //next()方法 后面紧邻的同辈元素
10 var $p2 = $p1.children();
11
12 for (var i = 0; i < $p2.length; i++) {
13
14 alert($p2[i].innerHTML);
15 }
16
17 });
18 </script>
19 </head>
20 <body>
21 <p>
22 你喜欢的水果是?</p>
23 <ul>
24 <li>苹果</li>
25 <li>橘子</li>
26 <li>香蕉</li>
27 </ul>
28 </body>
29 </html>
prev():前面紧邻的同辈元素
1 <html xmlns="http://www.w3.org/1999/xhtml">
2 <head runat="server">
3 <title></title>
4 <script src="Scripts/jquery-1.11.2.js" type="text/javascript"></script>
5 <script type="text/javascript">
6
7 $(function () {
8
9 var $ul = $("ul").prev(); //前面紧邻的同辈元素
10 alert($ul.text());
11
12
13 });
14 </script>
15 </head>
16 <body>
17 <p>
18 你喜欢的水果是?</p>
19 <ul>
20 <li>苹果</li>
21 <li>橘子</li>
22 <li>香蕉</li>
23 </ul>
24 </body>
25 </html>
closest():取得最近的匹配元素,首先检查当前元素是否匹配,如果匹配则直接返回元素本身,如果不匹配则向上查找父元素
1 <html xmlns="http://www.w3.org/1999/xhtml">
2 <head runat="server">
3 <title></title>
4 <script src="Scripts/jquery-1.11.2.js" type="text/javascript"></script>
5 <script type="text/javascript">
6
7 $(function () {
8
9
10 $(document).bind("click", function (e) {
11 $(e.target).closest("li").css("color","green");
12 });
13
14
15 });
16 </script>
17 </head>
18 <body>
19 <p>
20 你喜欢的水果是?</p>
21 <ul>
22 <li>苹果</li>
23 <li>橘子</li>
24 <li>香蕉</li>
25 </ul>
26 </body>
27 </html>
siblings():前后所有的同辈元素
1 <html xmlns="http://www.w3.org/1999/xhtml">
2 <head runat="server">
3 <title></title>
4 <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
5 <script type="text/javascript">
6
7 $(function () {
8
9 $(".level1>a").click(function () {
10 $(this).addClass("current") //给当前元素添加"current"属性
11 .next().show() //下一个元素显示
12 .parent().siblings().children("a").removeClass("current")//父辈的同辈元素的子元素<a>移除"current"样式
13 .next().hide();//它们的下一个元素隐藏
14 return false;
15 });
16 });
17
18 </script>
19 </head>
20 <body>
21 <form id="form1" runat="server">
22 <div>
23 <ul class="menu">
24 <li class="level1"><a href="#none">衬衫</a>
25 <ul class="level2">
26 <li><a href="#none">短袖衬衫</a></li>
27 <li><a href="#none">长袖衬衫</a></li>
28 <li><a href="#none">短袖T恤</a></li>
29 <li><a href="#none">长袖T恤</a></li>
30 </ul>
31 </li>
32 <li class="level1"><a href="#none">卫衣</a>
33 <ul class="level2">
34 <li><a href="#none">开襟卫衣</a></li>
35 <li><a href="#none">套头卫衣</a></li>
36 <li><a href="#none">运动卫衣</a></li>
37 <li><a href="#none">童装卫衣</a></li>
38 </ul>
39 </li>
40 <li class="level1"><a href="#none">裤子</a>
41 <ul class="level2">
42 <li><a href="#none">短裤</a></li>
43 <li><a href="#none">休闲裤</a></li>
44 <li><a href="#none">牛仔裤</a></li>
45 <li><a href="#none">免烫卡其裤</a></li>
46 </ul>
47 </li>
48 </ul>
49 </div>
50 </form>
51 </body>
52 </html>
时间： 2024-11-14 12:39:55