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>