jquery中获取祖父、父、子结点的方法1

在前端编程中，少不了使用jquery，在其中要结合DOM树来进行数据处理，那就离不开数据对结点的操作。

故在此总结一下对结点获取方法：

1、向上对父及祖父结点访问

parents（）与parent（）

（1）对祖父结点的获取

使用parents（[selecter]）方法；括号内部填写祖父结点的名字，便于确定从具体的哪一层结点开始找。

例如：$(this).parents(".img_href")，this表示当前结点，整体的意思是：从当前结点往上找，找到名为img_href的哪一层父结点。

（2）对父结点的获取

使用parent（）方法，返回被选元素的直接父元素（起点当前元素的直接父元素）。

获取的是上一层的内容，即仅由返回一层的内容。返回值为一个对象，包含很多内容，具体内容可以自己写一个例子来查看。使用方法如下：

var parent = $(".img_href").parent(); // 获取class为img_href的父节点，返回内容为对象。
console.log(parent); //打印返回的具体内容。一般用alert方法只会返回一个object的提示，用该方法可以在控制台看到很多内容。

（3）closest（selector）方法（起点为本身）

从当前元素开始，沿DOM树向上匹配，返回被选元素的第一个祖先元素。

遇到a嵌套a标签的情况下，获取最近的a标签，会有2个，即起点为自身的a，再向上获取一个a，然后停止。

2、向下获取子节点

（1）获取子节点

使用.children(selector)方法，单一层级

返回被选元素的所有直接子元素，不返回文本结点，可以直接使用contents()获取文本内容。

**** 不含selector则返回所有的子孙元素，含selector则返回对应selector下的所有子孙结点。

（2）find（）获取子结点

返回被选元素的后代元素，可以是子、孙、曾孙等，直至最后一层的后代。

【注】 children()与find()可以获取同样的数据，children里面不需要参数，find（）里面给定参数。

具体例子如下：

</ul>

调用方法：find

var child = $(".img_href").find("li");
console.log(child);

调用方法：children

var child = $(".img_href").children();
console.log(child);