Jquery学习笔记：通过层次关系获取jquery对象

前面一篇文章，我们介绍了如何通过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、小结

通过层次关系的指定和约束，将各种关系组合在一起，来获取元素，功能非常强大。几乎可以满足各种场景的需求。