jQuery选择器之 .eq(), .get() , .first(), .last(), .slice()

jQuery 对象就像是数组,可以使用length属性获取jQuery对象中DOM元素的数量。可以使用数组语法根据索引获取指定位置的DOM元素,也可以使用jQuery对象内置方法根据索引获取指定位置的DOM元素。

1.使用数组语法

使用数组语法可以根据索引获取jQuery对象上指定位置的DOM元素,例如,下面的代码用来获取第一个li元素:

alert($('li')[0]);

jQuery还定义了.get()方法获取jQuery对象上指定位置的DOM元素,语法格式如下:

.get([index])

参数index是可选的,定义索引位置,从0开始计数,用来确定获取那个元素。

如果不带参数, .get()方法会返回所有的元素,并将元素包含在一个数组中:

alert($('li').get());

结果如下:

[HTMLLIElement, HTMLLIElement, ...]

注:不管是数组语法还是.get()方法,返回值都是DOM元素。可以使用属性outerHTML来获取元素的字符串表示:

alert($('li').get(-1).outerHTML);//负索引值表示从匹配的集合中的末尾开始计数

也可以使用返回的DOM元素构建新的jQuery对象,只需将该DOM元素作为选择器:

 

2.使用内置方法

(1).eq()方法

该方法获取jQuery对象中指定索引位置上的元素,并使用该元素构建一个新的jQuery对象。语法格式如下: .eq(index)

参数index定义索引位置,是一个整数。该参数的值可以为负值,为负值是表示从集合中的最后一个元素开始倒数。例:

alert($('li').eq(-1).html());

注意:返回值是一个jQuery对象,因此可以使用链式语法调用jQuery的另一个方法.html(),该方法用于获取一个jQuery对象中一个元素的HTML内容。

汇总:.get()方法的返回值是DOM元素,可以对结果使用DOM方法;而.eq()方法的返回值是jQuery对象,只能对结果使用jQuery对象的方法。

(2).first()方法和.last()方法

这两个方法分别获取jQuery对象中的第一个元素和最后一个元素,并使用获取的元素构建新的jQuery对象。例如:

 (3).slice()方法

该方法根据索引范围获取jQuery对象中的元素集合中的一个子集。语法格式如下:

.slice(start, [end])

参数start定义一个整数,表示索引起始位置,并且选中的元素包含该索引位置。如果该值为负值,则表示从结束索引向前的排序,此时,最后一个索引是  -1。

参数end可选,定义一个整数,表示索引终止位置,并且选中的元素不包含该索引位置。如果该值为负值,则表示从结束索引向前的排序,此时,最后一个索引是  -1.如果省略该参数,则默认值为length-1,即最大索引值。

注意,end索引所在的元素不会被选择。

可以在列表项目上使用如下语句进行过滤处理:

$('li').slice(1, 4).css('background-color', 'red');

结果是从第2个开始(包括第二个)到第5个li元素(不包括第五个)所组成的新的jQuery对象,然后使用.css()方法设置这些li元素的背景样式为红色。

 

文章摘自:《jQuery全能权威指南》,清华大学出版社,张亚飞,高红霞  著

发表评论