<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.1.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function(){
后代選擇器 空格
var $span = $("p span");
find方法:是jq對象的方法,必須有參數(shù),否則該方法無法返回對應的后代標簽
var $span = $('p').find('span').css('background-color','red');
console.log($span)
})
子代選擇器 >
var $div1 = $(#div1>div);
console.log($div1);
.children()方法
沒有參數(shù),則獲取到的是父元素下的所有的一級子標簽
有參數(shù),則獲取到的是該參數(shù)下的對應的一級子標簽
var $div1 = $(#div1).children();
console.log($div1);
next選擇器(兄弟選擇器) +
選中指定標簽后的另一個兄弟標簽,如果該標簽之后緊跟的并不是選擇器所要的標簽,則返回空
var $div1 = $('#div3+div')
console.log(#div3)
.next() 方法選擇某個標簽后緊鄰的另一個標簽(該方法參數(shù)可以為空)
為空時,選中的是緊跟在它后邊的標簽
不為空,當標簽后跟有指定的標簽,則返回指定的標簽,當標簽后沒有指定的標簽,則返回空)
var $div1 = $('#div3').next()
console.log($div1);
.nextAll() 選擇器 ~
如果指定標簽后跟有并不是所想要的標簽,則會把這些標簽排除,只獲取想要的標簽
var $div1 = $('#div4~div')
console.log($div1);
.nextAll方法
沒有參數(shù),則把當前指定標簽后的所有兄弟標簽獲取到
有參數(shù),則獲取到參數(shù)指定的兄弟標簽,排除其他標簽
var $div1 = $('#div4').nextAll();
console.log($div1);
.prev() 方法
沒有參數(shù),選中的是指定標簽的上一個標簽
有參數(shù),指定標簽的上一個標簽不是參數(shù)所要的標簽,則返回空,否則就返回這個標簽
var $div1 = $('#div5').prev('div');
console.log($div1);
.prevAll() 方法
沒有參數(shù),則獲取到的是從指定標簽開始一直到文檔開頭位置的 兄弟節(jié)點
有參數(shù),則獲取到的是參數(shù)指定的兄弟節(jié)點
var $div1 = $('#div6').prev();
console.log($div1);
.sibling() 方法
沒有參數(shù),則獲取到的是與指定標簽同級的兄弟標簽
有參數(shù),則獲取指定標簽的所有兄弟標簽
var $div1 = $('#div3').siblings();
console.log($div1);
</script>
</head>
<body>
<!--1-->
<p>一只烏<span>烏鴉</span>渴了,到處找水喝</p><a href="" id="">育知下是如何,請聽下回分解</a>
<!--2-->
<div id="div1">
<div class="div2">
<div class="div2"></div>
</div>
<div class="div3"></div>
</div>
<!--3-->
<div id="div3"></div>
<div></div>
<div></div>
<a href=""></a>
<!--4-->
<div id="div4"></div>
<a href=""></a>
<div></div>
<div></div>
<a href=""></a>
<div></div>
<!--5-->
<div></div>
<a href=""></a>
<div id="div5"></div>
<!--6-->
<div></div>
<div></div>
<div></div>
<a href=""></a>
<div id="div6"></div>
</body>
</html>