发表于: 2020-03-11 23:02:24

1 1789


今天完成的事情: 今天学习了jQ的的遍历后代和同胞
明天计划的事情:继续学习jQ后续的内容
遇到的问题:操作不太熟练还是需要大量的实际练习
收获:遍历后代能够向下遍历 DOM 树,以查找元素的后代。

children() 方法

children() 方法返回被选元素的所有直接子元素。

该方法只会向下一级对 DOM 树进行遍历。

例如

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <style>
    .descendants * {
      displayblock;
      border2px solid lightgrey;
      colorlightgrey;
      padding5px;
      margin15px;
    }
  </style>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
  </script>
  <script>
    $(document).ready(function () {
      $("div").children().css({ "color": "red""border": "2px solid red" });
    });
  </script>
</head>

<body>

  <div class="descendants" style="width:500px;">div (当前元素)
    <p>p (儿子元素)
      <span>span (孙子元素)</span>
    </p>
    <p>p (儿子元素)
      <span>span (孙子元素)</span>
    </p>
  </div>

</body>

</html>

运行结果

捕捉到了子元素

也可以返回类名为 "1" 的所有 <p> 元素,并且它们是 <div> 的直接子元素:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <style>
    .descendants * {
      displayblock;
      border2px solid lightgrey;
      colorlightgrey;
      padding5px;
      margin15px;
    }
  </style>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
  </script>
  <script>
    $(document).ready(function () {
      $("div").children("p.1").css({ "color": "red""border": "2px solid red" });
    });
  </script>
</head>

<body>
  
  <div class="descendants" style="width:500px;">div (当前元素)
    <p class="1">p (儿子元素)
      <span>span (孙子元素)</span>
    </p>
    <p class="2">p (儿子元素)
      <span>span (孙子元素)</span>
    </p>
  </div>
  
</body>

</html>

运行结果


只捕捉类目为1的元素

find() 方法返回被选元素的后代元素,一路向下直到最后一个后代。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <style>
    .descendants * {
      displayblock;
      border2px solid lightgrey;
      colorlightgrey;
      padding5px;
      margin15px;
    }
  </style>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
  </script>
  <script>
    $(document).ready(function () {
      $("div").find("span").css({ "color": "red""border": "2px solid red" });
    });
  </script>
</head>

<body>

  <div class="descendants" style="width:500px;">div (当前元素)
    <p>p (儿子元素)
      <span>span (孙子元素)</span>
    </p>
    <p>p (儿子元素)
      <span>span (孙子元素)</span>
    </p>
  </div>

</body>

</html>

运行结果

返回 <div> 的所有后代:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <style>
    .descendants * {
      displayblock;
      border2px solid lightgrey;
      colorlightgrey;
      padding5px;
      margin15px;
    }
  </style>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
  </script>
  <script>
    $(document).ready(function () {
      $("div").find("*").css({ "color": "red""border": "2px solid red" });
    });
  </script>
</head>

<body>

  <div class="descendants" style="width:500px;">div (当前元素)
    <p>p (儿子元素)
      <span>span (孙子元素)</span>
    </p>
    <p>p (儿子元素)
      <span>span (孙子元素)</span>
    </p>
  </div>

</body>

</html>

运行结果

捕捉所有后代

在 DOM 树中遍历元素的同胞元素

siblings() 方法返回被选元素的所有同胞元素。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <style>
    .siblings * {
      displayblock;
      border2px solid lightgrey;
      colorlightgrey;
      padding5px;
      margin15px;
    }
  </style>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
  </script>
  <script>
    $(document).ready(function () {
      $("h2").siblings().css({ "color": "red""border": "2px solid red" });
    });
  </script>
</head>

<body class="siblings">

  <div>div (父元素)
    <p>p</p>
    <span>span</span>
    <h2>h2</h2>
    <h3>h3</h3>
    <p>p</p>
  </div>

</body>

</html>

运行结果

返回所有的H2的同胞元素

使用可选参数来过滤对同胞元素的搜索。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <style>
    .siblings * {
      displayblock;
      border2px solid lightgrey;
      colorlightgrey;
      padding5px;
      margin15px;
    }
  </style>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
  </script>
  <script>
    $(document).ready(function () {
      $("h2").siblings("p").css({ "color": "red""border": "2px solid red" });
    });
  </script>
</head>

<body class="siblings">

  <div>div (父元素)
    <p>p</p>
    <span>span</span>
    <h2>h2</h2>
    <h3>h3</h3>
    <p>p</p>
  </div>

</body>

</html>

运行结果

返回了属于 <h2> 的同胞元素的所有 <p> 元素

next() 方法返回被选元素的下一个同胞元素。

该方法只返回一个元素。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <style>
    .siblings * {
      displayblock;
      border2px solid lightgrey;
      colorlightgrey;
      padding5px;
      margin15px;
    }
  </style>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
  </script>
  <script>
    $(document).ready(function () {
      $("h2").next().css({ "color": "red""border": "2px solid red" });
    });
  </script>
</head>

<body class="siblings">

  <div>div (父元素)
    <p>p</p>
    <span>span</span>
    <h2>h2</h2>
    <h3>h3</h3>
    <p>p</p>
  </div>

</body>

</html>

运行结果

返回 <h2> 的下一个同胞元素

nextAll() 方法返回被选元素的所有跟随的同胞元素。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <style>
    .siblings * {
      displayblock;
      border2px solid lightgrey;
      colorlightgrey;
      padding5px;
      margin15px;
    }
  </style>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
  </script>
  <script>
    $(document).ready(function () {
      $("h2").nextAll().css({ "color": "red""border": "2px solid red" });
    });
  </script>
</head>

<body class="siblings">

  <div>div (父元素)
    <p>p</p>
    <span>span</span>
    <h2>h2</h2>
    <h3>h3</h3>
    <p>p</p>
  </div>

</body>

</html>

运行结果

返回了H3的跟随元素

nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <style>
    .siblings * {
      displayblock;
      border2px solid lightgrey;
      colorlightgrey;
      padding5px;
      margin15px;
    }
  </style>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
  </script>
  <script>
    $(document).ready(function () {
      $("h2").nextUntil("h6").css({ "color": "red""border": "2px solid red" });
    });
  </script>
</head>

<body class="siblings">

  <div>div (父元素)
    <p>p</p>
    <span>span</span>
    <h2>h2</h2>
    <h3>h3</h3>
    <h4>h4</h4>
    <h5>h5</h5>
    <h6>h6</h6>
    <p>p</p>
  </div>

</body>

</html>

运行结果

返回了H2至H6之间的所有同胞元素

prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似,只不过方向相反而已:它们返回的是前面的同胞元素(在 DOM 树中沿着同胞之前元素遍历,而不是之后元素遍历)。

剩下的明天再继续进行


返回列表 返回列表
评论

    分享到