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 class="img_href">

                      <li></li>

                      <li></li>

                      <li></li>

                </ul>  

              调用方法：find

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

              调用方法：children

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