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 >
<p></p>
<p></p>
<p></p>
<span></span>
<span></span>
<span></span>
</div>
<div >
<p></p>
<p></p>
<p></p>
<span></span>
<span></span>
<span></span>
</div>
<div >
<p></p>
<p></p>
<p></p>
<span></span>
<span></span>
<span></span>
</div>
<script src="https://www.cnblogs.com/dreamtown/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")
})
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/270859.html
標籤：jQuery
上一篇：jQuery常用事件方法——mouseenter、mouseleave、hover方法
下一篇：jQuery關系查找方法