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>

 通过传递参数可以进行二次选择,参数是字符串格式的选择器,在前面或后面兄弟中选中符合选择器规定的部分。

  • parents()祖先级

    通过该方法得到的是指定对象的包含body在内的所有祖先级元素组成的jQuery对象

    通过传参进行二次选择,参数位置是字符串格式的选择器

  • 代码示例:

 //实现点击一个子级标签,自己变红色,使它的祖先级变成蓝色
 // 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")
})
posted @ 2021-03-28 22:28  小白可别不举铁  阅读(7)  评论(0编辑  收藏