<!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对象的方法，必须有参数，否则该方法无法返回对应的后代标签
var $span = $('p').find('span').css('background-color','red');
console.log($span)
})
子代选择器 >
var $div1 = $(#div1>div);
console.log($div1);
.children()方法
没有参数，则获取到的是父元素下的所有的一级子标签
有参数，则获取到的是该参数下的对应的一级子标签
var $div1 = $(#div1).children();
console.log($div1);
next选择器(兄弟选择器) +
选中指定标签后的另一个兄弟标签，如果该标签之后紧跟的并不是选择器所要的标签，则返回空
var $div1 = $('#div3+div')
console.log(#div3)
.next() 方法选择某个标签后紧邻的另一个标签(该方法参数可以为空)
为空时，选中的是紧跟在它后边的标签
不为空，当标签后跟有指定的标签，则返回指定的标签，当标签后没有指定的标签，则返回空)
var $div1 = $('#div3').next()
console.log($div1);
.nextAll() 选择器 ~
如果指定标签后跟有并不是所想要的标签，则会把这些标签排除，只获取想要的标签
var $div1 = $('#div4~div')
console.log($div1);
.nextAll方法
没有参数,则把当前指定标签后的所有兄弟标签获取到
有参数，则获取到参数指定的兄弟标签，排除其他标签
var $div1 = $('#div4').nextAll();
console.log($div1);
.prev() 方法
没有参数，选中的是指定标签的上一个标签
有参数，指定标签的上一个标签不是参数所要的标签，则返回空，否则就返回这个标签
var $div1 = $('#div5').prev('div');
console.log($div1);
.prevAll() 方法
没有参数，则获取到的是从指定标签开始一直到文档开头位置的 兄弟节点
有参数，则获取到的是参数指定的兄弟节点
var $div1 = $('#div6').prev();
console.log($div1);
.sibling() 方法
没有参数，则获取到的是与指定标签同级的兄弟标签
有参数，则获取指定标签的所有兄弟标签
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>
