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在内的祖先级 // $(this).css("background-color","red") // .parents().css("background-color","skyblue") // parents()传参数，可以筛选去掉不是div的元素 $(this).css("background-color", "red") .parents("div").css("background-color", "skyblue")})
经验首页