jquery中children()与find()用法区别详解

1.children()是一个筛选器，顾名思义就是筛选子元素，筛选那些符合条件的子元素。

完整的格式如下：.children(expr)

其中children是筛选器的名称，expr是表达式，所有选择器中的表达式都可以用在这，比如按标签名”div”,按类名”.class”,按序号”:first”等等，如果表达式为空，那么返回的是所有的孩子，返回的结果仍为jQuery对象。

jquery取索引使用eq函数。

eq() 选择器选取带有指定 index 值的元素。

index 值从 0 开始，所有第一个元素的 index 值是 0（不是 1）。

经常与其他元素/选择器一起使用，来选择指定的组中特定序号的元素。

例子：

$(‘#test’).children().eq(1).css({‘display’:’inline-block’});

将id为test的元素的第二个子元素样式设置为’display’:’inline-block’。

另一种写法

$(“:eq(index)”)如：$(“p:eq(1)”)

 

2.find() 搜索所有段落中的后代 span 元素，并将其颜色设置为红色：

例子：

$(“p”).find(“span”).css(‘color’,’red’);

定义和用法

find() 方法获得当前元素集合中每个元素的后代，通过选择器、jQuery 对象或元素来筛选。

语法

.find(selector)

find() 方法第一个明显特征是，其接受的选择器表达式与我们向 $() 函数传递的表达式的类型相同。将通过测试这些元素是否匹配该表达式来对元素进行过滤。

请思考下面这个简单的嵌套列表：

<ul class=”level-1″>

<li class=”item-i”>I</li>

<li class=”item-ii”>II

<ul class=”level-2″>

<li class=”item-a”>A</li>

<li class=”item-b”>B

<ul class=”level-3″>

<li class=”item-1″>1</li>

<li class=”item-2″>2</li>

<li class=”item-3″>3</li>

</ul>

</li>

<li class=”item-c”>C</li>

</ul>

</li>

<li class=”item-iii”>III</li>

</ul>

我们将从列表 II 开始来查找其中的列表项：

$(‘li.item-ii’).find(‘li’).css(‘background-color’, ‘red’);

.item-ii下的所有li的背景色全变成红色

 

通过以上的解释，可以总结如下：

1：children及find方法都用是用来获得element的子elements的，两者都不会返回 text node，就像大多数的jQuery方法一样。

2：children方法获得的仅仅是元素一下级的子元素

3：find方法获得所有下级元素

4：children方法的参数selector 是可选的（optionally），用来过滤子元素，但find方法的参数selector方法是必选的。