第一百五十二章 遍历(二)

仿佛理解了这个意思,那么我们如何去操作一个元素呢?

如果没有元素被选中,那也就没有什么可以操作的;如果只有一个元素被选中,那么直接操作就可以了,我们前面也都是这样做的;如果有多个元素被选中,仅仅对它们进行一些设置的话,一就是直接操作就可以了……

嘿,这些以前好像已经说过了,我们现在要说的是另外的情况呀。比如我想获取每个元素中的文字,如果不只有一个元素,那就不能直接去操作了。我们应该对其中的每一个元素单独进行一次获取。

哦,合集像是数组,数组遍历我们学过了,反正有序号,有长度,可以的,但是取出来的数组项是元素,没包装的,我们不会操作……所以,快点讲重点啊喂!

元素没有被包装,那我就包装一下呀:

const el = $('a')[0];const text = $(el).text();console.log(text);

其实可以直接写成一句,但是我尽量展开了,方便大家理解。首先取出这个合集中的一个元素放进常量 el 中。第二句对于 el 这个元素进行包装,并通过 text() 方法获取其中的文字。注意,这时候 $(el) 这里没有引号,因为 el 是常量,而不是字符串(选择器)。

哦,原来就是包装一下就好了,解释之后再看上面的代码,忽然觉得它们变得面目清秀起来,这也不难理解嘛~

但是如果我真的把它们写成一句的话:

console.log( $( $('a')[0] ).text() );

还是完全一样的意思,只是不那么容易阅读了。如果不考虑重复使用的话,因为省掉了几个变量,也许第二种写法在性能上会更好一点(然而这种细微的差别谁在乎呢……

到这里我们就明白了呢,当我们选中了多个元素,我们可以对这个合集进行遍历;通过遍历,获取其中的每一个元素;然后将这个元素进行包装,以便使用我们熟悉的 jQuery 提供的方法进行操作。这样下来大部分问题就都迎刃而解了。

道理就是这样,而我们都是讲道理的人,所以要把这一切说的清清楚楚的,也要搞得明明白白的。(废话还真的是多呢……

希望大家能够停下来,再仔细的阅读一下这两章,然后从各个角度去实际操作测试一下,试着去理解这其中的关系。前面我们一直在讲 jQuery 具有哪些方法,我们该如何去用。那都是最表面的东西,就仿佛我们知道如何使用冰箱,但并不一定知道冰箱制冷的原理。而这两章,我们就有那么一点点去探究它如何工作的意味了。确实这仍旧是很皮毛的东西,但这其中却折射出了一些作者的思维方式。

这里讲的其实是一些学习方法,通过观察高手如何去思考,来开拓自己的视野。而理解作者如何去思考,也有助于你更好的把握这个工具。仅就当前的内容来看,仿佛并不能够带来什么实际的提升,但它也许会为我们将来面对某些情况时,带来更多变通的可能性。

目前我们没有学习原生 js 操作元素的方法,但是那并不难。所谓一通百通,我们沿着任何一条路线,先把这条路走通一遍,再去学习其他方法,都会变得很顺理成章,水到渠成。而如果我们现在会使用原生的方法,那你会发现上面合集中的元素,虽然无法直接用 jQuery 的方法操作,却可以用原生方法操作。这其中又有许多趣味可以品读。

啊,我这样啰里吧嗦的一定很令人生厌吧,何况这种遍历的方法用起来也挺麻烦的。幸好程序员都是懒惰的,所以,jQuery 提供了大量简单的遍历方法可供使用。

那为什么还要有这一课呢?什么是原生的,什么是 JQ 提供的,现在要开始分清楚了。要不然以后学习会混乱的哦。

原文链接:https://www.ek58.com/archives/3831,转载请注明出处。

0

评论0

请先

没有账号? 注册  忘记密码?