find()与children(),parent()与parents()理解与运用

正如标题，这篇文章本人对于find()与children(),parent()与parents()的个人理解，因为我个人觉得网上大多对于这4个元素的讲述大多偏理论化，以下是我这4个方法的理解以及运用。

其实，在我个人看到，一般情况下进行子元素的查找最常用的都是这两个find()与children(),而进行父级查找基本都是用parent()与parents()

那下面我先讲find()与children()这两个的区别：简单来说，children()只能寻找目标标签的下一级（儿子辈），而find()是寻找目标标签的所有下级（所有后代）。下面是利用W3school编辑器进行例子演示：

结果为:

代码分析：我们可以看到最外层div包含了span,p,div,p这4个子元素（后代）,如上图所示使用chidren寻找class='sele

cted'的子元素并使它们的字体颜色变为蓝色，那么是Hello Again和And Again。如果我们修改一下代码，请看：

结果为:

代码分析：上面代码是寻找class='apple'的标签的class='selected'的子元素，从结果可以看出：

Hello Again和And Again并没有变成蓝色，这是因为children()只能寻找下一级的元素标签，上面代码中，

<div class='apple'>只有一个子元素是<div>，所以使用children()是不能找到我们想要找的class='selected'的子元

素（即Hello Again和And Again）

那么这种情况下就要使用find()这一个方法，同样的代码，只要把上面的children()改为find就可以达到我们想要的

结果：

结果为:

那parent()与parents()这两个的区别：简单来说，parent()只能寻找目标标签的上一级（父辈），而parents()是寻找

目标标签的所有上级。同样的我们类推一下就知道parents()和parent()这两个元素使用方法了，笔者在这里就不再给

大家演示了。

在文章最后呢，笔者分享一个过滤的小技巧，笔者个人认为也是非常好用的，就是当使用到parents()和find()这两方法

时，我们通过都会用nth:child,:first等等一些选择器过滤我们想要的结果，但我个人常用的这一种方法跟上文提到的不

一样，比如说：我要选择value='3'的input框，那我会使用find("input[value='3']")、parents("input[value='3']"),如果

是要选value='2',类型为checkbox的input框，那我可以这样写：

find("input[value='2'][type='checkbox']")、parents("input[value='2'][type='checkbox']").

相信大家都能看出来怎么个用法了，笔者在这里就不详细说明了，这种方法不单单只能用在这里，我们可以类推到很多

地方。实用性呢还是让各位去实战体现，笔者在这里只是分享我个人的经验，仅供参考。