第一百五十五章 第一个

如果我们只是想取出这个合集中的第一个元素,当然可以这么写 $('a')[0],但是我们前面说了无数次,这样取出来的元素不能直接应用 jQuery 方法,还需要再包装一下,这就比较麻烦。

程序员很懒,所以直接设定了一个简单的操作,$('a').first()。这样就取出了这个合辑中的第一个元素,而且是可以直接使用 jQuery 方法的。

console.log( $('a').first().text() )

就像这个样子,这个方法让我们省去了包装的这一步。而且我们看上面的代码,jQuery 的方法是支持串联的,这可以让我们大幅度的简化代码。但也不要为了简化,而去刻意的使用。我们应该把代码控制在自己可以理解,可以准确控制的复杂度内。最开始先要以能够搞明白为主,随着对代码的熟悉再逐渐简练。

然后,我们要明确一点:这里所说的第一个,是整个合集中的第一个。而合集中的元素并不一定是具有相同父元素的,这和 :first-child 就有了区别。

那么讲到第一个,就出现了顺序的问题,这个顺序是怎样形成的呢?其实就是 jQuery 在网页代码中进行查找,如果元素匹配,就被加入这个合集。而查找的顺序是由外向内,由上向下(代码中的上下,而不是元素的显示位置)。像这种,我们可以自己设计一个案例,来试验一下,看看效果,这样更加有助于理解。

相应的,有了取出第一个元素的方法,当然也有取出最后一个元素的方法。$('a').last()。这都没啥好说的,反正把方法和选择器中的伪类区分一下就行。

两端的问题解决了,那么中间的元素如何取出呢?应该说如何方便的取出呢?于是又一个 $('a').eq(12) 方法,来取出指定序号的元素,这个要给一个参数,就是说我们要取出的是第几个元素,其他的用法和上面是一样的。有一个细节的问题,就是序号是从 0 开始的。这也很容易理解,因为这个合集类似于一个数组,而数组的序号就是从 0 开始的。记不住也没有什么关系,用的时候稍微试一下就可以了。

甚至我们可以给它设置负数,表示从后向前数。因为 0 已经是第一个元素的序号了,所以 -1 对应最后一个元素,-2 是倒数第二个元素,以此类推。

这是一个很方便的方法,省去了我们写遍历并判断序号的繁琐。但是我们怎么知道一个元素在这个合辑中的序号呢?

这是一个有趣的问题,jQuery 也为我们提供了一个方便的方法,就是 index()。但是这个方法有着许多的用法,并不容易记住,我们只通过例子来讲两种最简单的用法:

<ul><li>喵</li><li>喵</li><li>喵</li></ul><ul><li>喵</li><li id="miao">喵</li><li>喵</li></ul>

首先我们有上面的这样一个结构,现在我们要找到其中最特殊的那只喵,它在 $('li') 合集中的序号。写法有两种:

const miao = $('#miao');const i = $('li').index(miao);

首先获取我们要查找的这个元素对象,然后我们在这个合集里去查找这个对象的索引值。注意现在的参数是一个元素对象,嗯,包装好的。

const i = $('#miao').index('li');

或者反过来说,我们现在这个元素对象,它在后面这个选择器所选择的元素中排第几?现在的参数是一个选择器。

那么大家动手去看一下实际的效果,想一想为什么会获得这样的序号。

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

打赏

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

支付宝扫一扫打赏

微信扫一扫打赏