前面得出的结论是什么?我们得到的是一个元素的合集,它类似于数组,我们可以对它进行遍历,但是对于遍历出来的结果,我们需要进行包装之后才能再次应用 jQuery 的方法。
但是这很麻烦,而明显这又是一个极其频繁的操作。这样重复的事情,不如把它包装一下……
于是就有了 jQuery 里最基础的遍历方法 each()
,多好理解,就是每一个的意思。但是再认真的强调一下,要分清楚这个是 jQuery 里面独有的方法。在原生的 JS 中和类似的方法叫做 forEach
,还正好是用来遍历数组的,但是,我们并不能够用这个方法去遍历 jQuery 获得的元素合集。因为是类似数组,但不是完全等同于数组……反正就是没有这个方法。
要注意开始区分 jQuery 和原生了哦~
each()
方法十分简单,用起来和我们前面所学的还是一样。小括号里面的参数是一个函数。效果就是对于所获得的元素合集,中的每一个元素,执行后面小括号中的函数。
然后我们演示一下:
$('a').each(function(){console.log( $(this).text() )})
this
用来指代当前所遍历到的那个元素,所以它又是一个类似于变量或者常量的东东,反正不是字符串,所以不用加引号。记得这里指代的只是元素,所以还得包装一下,才能应用 jQuery 的方法。[1]
所以就是把遍历这个事情给简化了一下,该包装还得包装[2]。
事情是被简化了,但是有利也有弊,比如没有的序号,可能某些操作就不太方便控制。等等,序号么,是有的,只是刚才我们不需要,所以给省略了。
this
是 JS 中的一个关键字,说直白点,它就是个代词,当然这个单词本身也就是一个代词。而它用来指代什么,要看当前的语境,在我们上面的语境当中(后面的函数里面),它用来指代当前被遍历到的那个元素。我这个解释好像和前面有一些重复,我想说的是什么呢?它并不是传递给这个函数的参数,而只是一个代词。
关于代词,我们在这里不展开了。像这种概念,因为它比较复杂,要分很多情况去讲,倒不如我们把它先用起来,你对它的每一种情况都了解了,再返回去学习它的概念,反倒更加容易理解。
而对于这个函数,默认是会传递过来一个参数的(当然你可以不用它),这个参数就是当前元素的序号(在这个合集中的排序)。这时候我们只要设定一个形参,就可以拿到这个参数,然后去使用它:
$('a').each(function(index){console.log( index+': '+$(this).text() )})
动手试一下,观察它的效果,这很有趣。再用我们以前所学的遍历方法写一遍,对比一下它们都不同,看一看究竟哪里变得更加简便了。
>注释 1: 因为使用了 this
,所以这里不能使用箭头函数。不知道什么是箭头函数?没关系,因为我们也没讲。
>注释 2: 我得强调一下,包装这个说法是咱们之间的“黑话”,你懂我什么意思就行了,但别拿出去和别人说,他们不懂的。
暂无评论内容