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

时间:2023-03-08 16:54:00

在很多场景下,需要根据一个已知的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是否匹配到。