14 JQuery - 遍历

1 祖先元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.ancestors *
{ 
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
}
</style>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#parent").click(function(){
    $("span").parent().css({"color":"red","border":"2px solid red"});
  });
  $("#parents").click(function(){
      $("span").parents().css({"color":"blue","border":"2px solid blue"});
  });
  $("#parentsul").click(function(){
      $("span").parents("ul").css({"color":"gold","border":"2px solid gold"});
  });

  
});
</script>
</head>
<body>
    <button id="parent">操作父元素</button><br>
    <button id="parentsul">操作指定祖先元素</button><br>
    <button id="parents">操作所有祖先元素</button><br>
<div class="ancestors">div (曾祖祖父元素)
  <div style="width:500px;">div (曾祖父元素)
    <ul>ul (祖父元素)  
      <li>li (父元素)
        <span>span</span>
      </li>
    </ul>   
  </div>
</div>

</body>
</html>

 

2 子孙元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.descendants *
{ 
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
}
</style>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#child").click(function(){
$("div").children().css({"color":"red","border":"2px solid red"});
  });
$("#childp").click(function(){
  $("div").children("p.child1").css({"color":"blue","border":"2px solid blue"});
  });
$("#childspan").click(function(){
      $("div").find("span").css({"color":"gold","border":"2px solid gold"});
  });
    $("#childs").click(function(){
  $("div").find("*").css({"color":"green","border":"2px solid green"});
  });

});
</script>
</head>
<body>
    <button id="child">操作所有子元素</button><br>
    <button id="childp">操作指定子元素</button><br>
    <button id="childspan">操作指定子元素2</button><br>
    <button id="childs">操作所有子孙元素</button><br>
<div class="descendants" style="width:500px;">div (当前元素) 
  <p class="child1">p (儿子元素)
    <span>span (孙子元素)</span>     
  </p>
  <p class="child2">p (儿子元素)
    <span>span (孙子元素)</span>
  </p> 
</div>

</body>
</html>

 

3 同胞元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.siblings *
{ 
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
}
</style>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#s1").click(function(){
    $("h2").siblings().css({"color":"red","border":"2px solid red"});
  });
$("#s2").click(function(){
    $("h2").siblings("p").css({"color":"gold","border":"2px solid gold"});
  });
$("#s3").click(function(){
    $("h2").next().css({"color":"green","border":"2px solid green"});
  });
$("#s4").click(function(){
    $("h2").nextAll().css({"color":"pink","border":"2px solid pink"});
  });
});
</script>
</head>
<body >
    <button id="s1">同胞</button><br>
    <button id="s2">指定同胞</button><br>
    <button id="s3">紧挨着的同胞</button><br>
    <button id="s4">所有跟随的同胞元素</button><br>
<div class="siblings">div (父元素)
  <p>p1</p>
  <span>span</span>
  <h2>h2</h2>
  <h3>h3</h3>
  <p>p2</p>
</div>

</body>
</html>

 

4 过滤元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#f1").click(function(){
  $("div p").first().css("background-color","red");
  });
$("#f2").click(function(){
  $("div p").last().css("background-color","yellow");
  });
$("#f3").click(function(){
    $("p").eq(0).css("background-color","green");
  });
$("#f4").click(function(){
   $("p").filter(".lizi").css("background-color","pink");
  });
$("#f5").click(function(){
   $("p").not(".lizi").css("background-color","pink");
  });

});
</script>
</head>
<body>
    <button id="f1">first div p</button><br>
    <button id="f2">last div p</button><br>
    <button id="f3">p index=0</button><br>
    <button id="f4">指定class的元素</button><br>
    <button id="f5">未指定class的元素</button><br>
<h1>欢迎访问我的主页</h1>
<div>
    <p>这是 div 中的一个段落。</p>
</div>

<div>
    <p>这是另外一个 div 中的一个段落。</p>
</div>

<p class="lizi">这是一个段落。</p>

</body>
</html>

 

posted @ 2021-04-04 11:53  栗子测试开发  阅读(57)  评论(0)    收藏  举报