jQuery之筛选方法

1. 父parent、子children、find

 <div class="yeye">
         <div class="father">
             <div class="son">儿子</div>
         </div>
     </div>
 
     <div class="nav">
         <p>我是屁</p>
         <div>
             <p>我是p</p>
         </div>
     </div>
     <script>
         // 注意一下都是方法 带括号
         $(function() {
             // 1. 父  parent()  返回的是 最近一级的父级元素 亲爸爸
             console.log($(".son").parent());
             // 2. 子
             // (1) 亲儿子 children()  类似子代选择器  ul>li
             // $(".nav").children("p").css("color", "red");
             // (2) 可以选里面所有的孩子 包括儿子和孙子  find() 类似于后代选择器
             $(".nav").find("p").css("color", "red");
             // 3. 兄
         });
     </script>

二、兄弟siblings、判断是否有类名

        <ol>
         <li>我是ol 的li</li>
         <li>我是ol 的li</li>
         <li class="item">我是ol 的li</li>
         <li>我是ol 的li</li>
         <li>我是ol 的li</li>
         <li>我是ol 的li</li>
     </ol>
     <ul>
         <li>我是ol 的li</li>
         <li>我是ol 的li</li>
         <li>我是ol 的li</li>
         <li>我是ol 的li</li>
         <li>我是ol 的li</li>
         <li>我是ol 的li</li>
     </ul>
     <div class="current">俺有current</div>
     <div>俺木有current</div>
     <script>
         // 注意一下都是方法 带括号
         $(function() {
             // 1. 兄弟元素siblings 除了自身元素之外的所有亲兄弟
             $("ol .item").siblings("li").css("color", "red");
             // 2. 第n个元素
             var index = 2;
             // (1) 我们可以利用选择器的方式选择
             // $("ul li:eq(2)").css("color", "blue");
             // $("ul li:eq("+index+")").css("color", "blue");
             // (2) 我们可以利用选择方法的方式选择 更推荐这种写法
             // $("ul li").eq(2).css("color", "blue");
             // $("ul li").eq(index).css("color", "blue");
             // 3. 判断是否有某个类名
             console.log($("div:first").hasClass("current"));
             console.log($("div:last").hasClass("current"));
 
         });
     </script>