筛选器查找标签children、sibiling、eq()

最新推荐文章于 2022-04-21 12:03:00 发布

weixin_30752699

最新推荐文章于 2022-04-21 12:03:00 发布

阅读量474

点赞数

原文链接：http://www.cnblogs.com/wfl9310/p/9204857.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<div>hello</div>
<p id="p1" alex="tom">ppp</p>
<a href="">click</a>
<div class="outer">outer
    <div class="inner">inner</div>
</div>

<div class="outer">outer
    <div class="inner">inner
    <p>tom</p></div>
    <p>jerry</p>
</div>
<p>sadf</p>

<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ul>
<input type="text">
<!--选择标签+标签操作（css）+事件处理

-->
<script src="jquery-3.3.1.min.js"></script>

    <script>
        //$("li:eq(2)").css("color","red");筛选器
        //$("li").eq(2).css("color","red");与筛选器做对比

        //查找筛选器，根据已知标签查找需要操作的标签
        //$(".outer").children("p").css("color","red");//outer下的p标签.很精准
        //$(".outer").eq(0).next().css("color","red"); //范围处理,往下
        //$("li").eq(2).prevUntil("li:eq(0)").css("color","red");//从2开始往上找，到0为止，不包含0和2
        $(".outer").siblings().css("color","red");//兄弟标签，我的理解是同一级
    </script>
</body>
</html>