如果我们只是想取出这个合集中的第一个元素,当然可以这么写 $('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');
或者反过来说,我们现在这个元素对象,它在后面这个选择器所选择的元素中排第几?现在的参数是一个选择器。
那么大家动手去看一下实际的效果,想一想为什么会获得这样的序号。
暂无评论内容