1. 父parent、子children、find
1 <div class="yeye"> 2 <div class="father"> 3 <div class="son">儿子</div> 4 </div> 5 </div> 6 7 <div class="nav"> 8 <p>我是屁</p> 9 <div> 10 <p>我是p</p> 11 </div> 12 </div> 13 <script> 14 // 注意一下都是方法 带括号 15 $(function() { 16 // 1. 父 parent() 返回的是 最近一级的父级元素 亲爸爸 17 console.log($(".son").parent()); 18 // 2. 子 19 // (1) 亲儿子 children() 类似子代选择器 ul>li 20 // $(".nav").children("p").css("color", "red"); 21 // (2) 可以选里面所有的孩子 包括儿子和孙子 find() 类似于后代选择器 22 $(".nav").find("p").css("color", "red"); 23 // 3. 兄 24 }); 25 </script>
二、兄弟siblings、判断是否有类名
1 <ol> 2 <li>我是ol 的li</li> 3 <li>我是ol 的li</li> 4 <li class="item">我是ol 的li</li> 5 <li>我是ol 的li</li> 6 <li>我是ol 的li</li> 7 <li>我是ol 的li</li> 8 </ol> 9 <ul> 10 <li>我是ol 的li</li> 11 <li>我是ol 的li</li> 12 <li>我是ol 的li</li> 13 <li>我是ol 的li</li> 14 <li>我是ol 的li</li> 15 <li>我是ol 的li</li> 16 </ul> 17 <div class="current">俺有current</div> 18 <div>俺木有current</div> 19 <script> 20 // 注意一下都是方法 带括号 21 $(function() { 22 // 1. 兄弟元素siblings 除了自身元素之外的所有亲兄弟 23 $("ol .item").siblings("li").css("color", "red"); 24 // 2. 第n个元素 25 var index = 2; 26 // (1) 我们可以利用选择器的方式选择 27 // $("ul li:eq(2)").css("color", "blue"); 28 // $("ul li:eq("+index+")").css("color", "blue"); 29 // (2) 我们可以利用选择方法的方式选择 更推荐这种写法 30 // $("ul li").eq(2).css("color", "blue"); 31 // $("ul li").eq(index).css("color", "blue"); 32 // 3. 判断是否有某个类名 33 console.log($("div:first").hasClass("current")); 34 console.log($("div:last").hasClass("current")); 35 36 37 }); 38 </script>