Jquery学习笔记：利用find和children方法获取后代元素

在很多场景下，需要根据一个已知的jquery对象，去查找其满足条件的后代节点。

这时可以利用 find函数和children来处理。

find和children函数都可有一个参数，常见的是一个字符串，其值就是选择器，含义同利用 $()函数来获取元素。

两者的区别是children函数只获取其满足条件的第一层子节点，而find函数则获取所有下级子节点。

下面我们举例说明：

<div id="mydiv">
    <p id="pid"></p>
    <span class="aspan">hello</span>
    <div>
        <a id="aid"></a>
        <span class="aspan">test</span>
    </div>
</div>

js代码如下：
var obj = $("#mydiv");
//获取到obj元素下的 div标签下的样式为aspan下的元素
var child = obj.find("div .aspan");
alert(child.html());

children方法
obj.children() 获取obj的第一层所有子节点
obj.children("span") 获取obj的第一层所有标签为span子节点
obj.children("a") 返回为空，因为a标签不是obj的直接子节点，这时应该用find方法

通过children方法获得是一个jquery对象，利用 get(index)和 [index]取得的是dom对象，可以利用 first方法获取其中包含的第一个dom对象对应的jquery对象。

可以看出，使用这两个函数，核心就是其输入参数，即编写相应的选择器.

注意，利用find方法，如果条件不存在没有匹配的元素，则返回的并非是null或undefined，可以通过 length属性为0是否匹配到。