第一百五十六章 孩子们

标题翻译成英文就是……那个说不会的,麻烦把你的小学毕业证拿粗来。

对,是 children。在 jQuery 里,我们用这个方法,查找子元素。这里要明确一下,查找的是直接子元素,并不是所有后代元素。

那么在哪里查找呢?当然是在前面的元素对象之中,如果给出的是一个元素的合集,就在合集中每一个元素之内进行查找。就是把它们每一个人的孩子都叫出来。

$('#miao').children()

像上面这样写,就是找出 #miao 的所有子元素。因为我们只是说要找他的孩子,并没有指定任何条件,所以所有的孩子都来了,扬着可爱的小脸等着叔叔发糖吃。

我们也可以在后面的小括号中给出一个选择器,用来对子元素进行筛选,比如:

$('#miao').children('a')

就是它子元素中所有的链接。

你会发现你这个方法,我们使用选择器完全可以做到,比如:

$('#miao > *')$('#miao > a')

这两种写法和上面的效果是一样的。那我们为什么还要有这样的方法呢?因为这样可以让我们在对合集进行遍历操作的时候,更加具有通用性。而不会因为合集中元素的复杂度,影响到每一步操作。

而且选择器是在整个文档中进行查找,而上述方法,则是先限定一个范围,再在其中进行查找,效率上可能会高一些。

那么再说一遍,children 方法是在所有的子元素之中进行查找,而不是所有的后代元素。那如果想在了所有的后代元素中进行查找,我们使用 find 方法。

从单词的本意上去理解,说叫孩子过来,如果不再附加条件,那么所有的孩子都过来就好了。但如果说在后代之中进行查找,就必须要说清楚,找什么样的。所以 find 后面小括号中必须给定搜索的条件,比如像上面一样给出一个选择器:

$('#miao').find('a')

这样我们就找出了这个元素之中所有的链接。

操作都很简单,也很讲道理。那我们来增加一点复杂度,对于查找,参数不止可以使用选择器,还可以像这样写:

$('#miao').find( $('a') )

依旧是在这个元素里查找,然后我们找什么呢?这里给的是一个 jQuery 对象,或者说是一个元素的合集,$('a')。如果只看这一部分,那么它选择了页面中所有的链接元素。不过现在它作为了搜索的条件。

搜索嘛,就是我们在指定的范围之内去找符合后面条件的元素。所以就是前面这个元素里面所有的后代元素中,被同时包含在后面这个合集中的元素,说直白了就是两者取交集。

既然可以接受的条件这么能随便,选择器也行,jQuery 对象也行,不如我们……让它变得更加宽泛一些:

const el = $('a')[0]$('#miao').find( el )

结合我们前面讲过的内容,想一想这次给出的条件又是怎样一个东西。反正查找呢,就是在符合前后两个条件的元素中找交集。

日常我们会使用选择器作为条件去进行查找就足够了,其他内容作为了解,见到了能看懂就很好。

未经允许不得转载-易看设计:易看设计 - 创意.极致.传达 » 第一百五十六章 孩子们

打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏