jQuery其餘關係查找方法

時間 2021-04-01

標籤 javascript css java jquery this spa code 對象字符串欄目 JQuery 简体版

原文原文鏈接

jQuery其餘關係查找方法

find()後代元素:傳遞一個規定的選擇器做爲參數,查找範圍是jQuery對象的全部後代

* 兄弟元素

  緊鄰的兄弟元素方法:

  * next()下一個兄弟
  * prev()前一個兄弟

  多選方法

  * nextAll()後面全部兄弟
  * preAll()前面全部兄弟

<style>
   *{
     margin: 0;
     padding: 0;
    }
   .box{
      border: 1px solid #000;
      background-color: white;
      width: 500px;
      height: 50px;
      margin-left: 4px;
      margin-top: 4px;
   }
  p{
     width: 50px;
     height: 50px;
     background-color: rgb(185, 185, 185);
     float: left;
     margin-right: 8px;
   }
  
  span{
       float: left;
       width: 50px;
       height: 50px;
       margin-right: 8px;
       background-color: pink;
     }
</style>
   
  <body>
      <div class="box">
          <p></p>
          <p></p>
          <p></p>
          <span></span>
          <span></span>
          <span></span>
      </div>
      <div class="box">
          <p></p>
          <p></p>
          <p></p>
          <span></span>
          <span></span>
          <span></span>
      </div>
      <div class="box">
          <p></p>
          <p></p>
          <p></p>
          <span></span>
          <span></span>
          <span></span>
      </div>
  
  
<script src="../jq/jquery-1.12.4.min.js"></script>
<script>
  var $box = $(".box")
  var $p = $("p")
          
  //實現點擊一個子級標籤，讓它本身變成紅色，使它的前面的兄弟變紫色，後面的兄弟變橘色
  var $child = $box.children();
  $child.click(function(){
     $(this).css("background-color","red")
     .prevAll().css("background-color","purple")
    $(this).css("background-color","red")
     .nextAll().css("background-color","orange")
  
  </script>
</body>

經過傳遞參數能夠進行二次選擇，參數是字符串格式的選擇器，在前面或後面兄弟中選中符合選擇器規定的部分。javascript

parents()祖先級css

經過該方法獲得的是指定對象的包含body在內的全部祖先級元素組成的jQuery對象java

經過傳參進行二次選擇，參數位置是字符串格式的選擇器jquery
代碼示例：this

//實現點擊一個子級標籤，本身變紅色，使它的祖先級變成藍色
 // parents（） 查找包含body在內的祖先級
 // $(this).css("background-color","red")
 // .parents().css("background-color","skyblue")       
                   
// parents()傳參數，能夠篩選去掉不是div的元素
 $(this).css("background-color", "red")
  .parents("div").css("background-color", "skyblue")
})