欢迎光临
我的个人博客网站

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") }) 
赞(0) 打赏
未经允许不得转载:张拓的天空 » jQuery其他关系查找方法
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏