标题翻译成英文就是……那个说不会的,麻烦把你的小学毕业证拿粗来。
对,是 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 )
结合我们前面讲过的内容,想一想这次给出的条件又是怎样一个东西。反正查找呢,就是在符合前后两个条件的元素中找交集。
日常我们会使用选择器作为条件去进行查找就足够了,其他内容作为了解,见到了能看懂就很好。
暂无评论内容