T O P

[资源分享]     jQuery其他关系查找方法

  • By - 楼主

  • 2021-03-29 00:00:01
  • 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")
    })
    

    本帖子中包含资源

    您需要 登录 才可以下载,没有帐号?立即注册