前面一篇文章，我们介绍了如何通过web标签的id , css样式值来获取jquery对象。
但这只是基本方法，不能满足所有场景的需求。
本文介绍通过dom元素之间的层次关系获取元素。具体是将各种标识符（id, css样式，html标签名）组合在一起来获取jquery对象。
1、匹配后代元素
$("#myid a") //获取标识为myid下所有的 html标签为a的子元素（注意不仅是myid下的孩子节点，还包括孙子，更下层的所有满足关系的节点）
$("#ctypeId li a span") //可以支持多层的层次关系
$("body .container .success") //支持各种标识符的组合
注意：组合中的每种标识 一定是从祖先 到后代的层次关系
2、匹配子元素
父子和后台的区别是，父子是父节点和第一层子节点的关系，孙子节点等更下一层的关系就不算了。
举例，htnl代码如下：
<div id="mydiv">
<div>
<div>xx</div>
</div>
<div></div>
</div>
js代码如下：
var obj = $("#mydiv div");
alert(obj.length); //值为3，包含#mydiv下的所有层次div
obj = $("#mydiv>div");
alert(obj.length); //值为2，只包含#mydiv下的第一层次的div
说明：这种方式一样支持超过2层的关联关系的查找。
3、匹配之后的紧相领元素
这是匹配最靠近下一个的兄弟节点。举例如下：
<div id="mydiv"></div>
<p>hello1</p>
<p>hello2</p>
<div>div1</div>
<div>div2</div>
js代码
var obj = $("#mydiv + p");
alert(obj.length); //1
alert(obj.html()); //hello1
注意 $("#mydiv + div")将获取不到元素，因为#mydiv的最接近的元素的标签不是div。这可以用来检查邻近的兄弟节点是否是设想的节点。
因为已经限制了必须是紧领的下一个兄弟节点，可以不限制兄弟节点的标识，直接获取到。
所以 通过 $("#mydiv+") 就可以获取到紧邻的兄弟节点。
还可以通过方法调用 $("#mydiv").next() 来获取到同样的节点。
说明：$("#mydiv+div+div") 表示匹配第2个相邻的兄弟节点（但要求标签必须是div）
而 $("#mydiv++") 则无条件指定返回第2个相邻的元素，除非不存在第2个兄弟节点
4、匹配之后的所有兄弟元素
<div>
<div id="mydiv"></div>
<p class="xxx">hello1</p>
<p>hello2</p>
<div >div1</div>
</div>
js代码：
var obj = $("#mydiv~"); //获取#mydiv后的所有兄弟节点
alert(obj.length); //3
obj = $("#mydiv~p"); //获取#mydiv后的所有标签为p的兄弟节点
alert(obj.length); //2
obj = $("#mydiv~div"); //获取#mydiv后的所有标签为div的兄弟节点
alert(obj.length); //1
同样可以通过调用方法达到相同的目的
$("#mydiv").nextAll() 等同于 $("#mydiv~")
$("#mydiv").nextAll("p") 等同于 $("#mydiv~p")
$("#mydiv").nextAll("div") 等同于 $("#mydiv~div")
5、小结
通过层次关系的指定和约束，将各种关系组合在一起，来获取元素，功能非常强大。几乎可以满足各种场景的需求。