5.遍历

5.遍历

所有遍历在 DOM 树中沿着同胞元素向后遍历

1. 获取父级及以上（祖先）

parent()	方法返回被选元素的直接父元素
parents()	方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素
parentsUntil()	方法返回介于两个给定元素之间的所有祖先元素

$("span").parentsUntil("div");

<body>
    <div class="child"></div>
    <script>
        var parent=$(".child").parent(); 
        console.log(parent);  //这里获得的是jquery对象  在parent加上[0]就是js的对象 就是(parent[0])
    </script>
</body>

2. 获取子级及以下（后代）

children()	方法返回被选元素的所有直接子元素
find()	方法返回被选元素的后代元素，一路向下直到最后一个后代

3. 获取同级元素（同胞）

siblings()	方法返回被选元素的所有同胞元素。
next()	方法返回被选元素的下一个同胞元素
nextAll()	方法返回被选元素后面的所有同胞元素
nextUntil()	方法返回介于两个给定参数之间的所有跟随的同胞元素
prev()	方法返回被选元素的上一个同胞元素
prevAll()	方法返回被选元素前面的所有同胞元素
prevUntil()	方法返回介于两个给定参数之间的所有跟随的同胞元素

$("h2").siblings();//返回被选元素的所有同胞元素
$("h2").siblings("p");//返回属于 <h2> 的同胞元素的所有 <p> 元素
$("h2").nextUntil("h6");//返回介于 <h2> 与 <h6> 元素之间的所有同胞元素
$("h6").prevUntil("h2");

4. 选择特定元素( 过滤 )

first()	方法返回被选元素的首个元素
last()	方法返回被选元素的最后一个元素
eq()	方法返回被选元素中带有指定索引号的元素
filter()	方法允许您规定一个标准。匹配的元素会被返回
not()	方法返回不匹配标准的所有元素

$("div p").first();//首个 <div> 元素内部的第一个 <p> 元素
$("div p").last();//选择最后一个 <div> 元素中的最后一个 <p> 元素
$("p").eq(1);//选取第二个 <p> 元素（索引号 1）
$("p").filter(".intro");//返回带有类名 "intro" 的所有 <p> 元素
$("p").not(".intro");//返回不带有类名 "intro" 的所有 <p> 元素

ex:

index() 获取对应的下标值
1-

    <style>
        .color{
            color: aquamarine;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script>
        $("li").click(function(){
            console.log($(this).index()) //获取对应的下标值
            $(this).addClass("color").siblings().removeClass("color")
        })
    </script>
</body>

2-tab切换
eq(); 传参

    <style>
        .show div{
            width: 100px;
            height: 100px;
            background-color: aquamarine;
        }
        .show div:nth-child(2){
            display: none;
        }
        .color{
            color: #f70000;
        }
    </style>
</head>
<body>
    <ul>
        <li>登录</li>
        <li>注册</li>
    </ul>
    <div class="show">
        <div>登录</div>
        <div> 注册</div>
    </div>
    <script>
        $("li").click(function(){
            $(this).addClass("color").siblings().removeClass("color")
            var index=$(this).index()
            console.log(index);
            $(".show div").eq(index).show().siblings().hide()
        })
    </script>
</body