* 兄弟元素 紧邻的兄弟元素方法: * 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") })