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")
})
相关文章
相关标签/搜索