在jQuery中，获取数组或类数组对象的首尾元素可通过便捷方法实现，对于jQuery对象，使用.first()方法可获取第一个元素，如$("div").first()；.last()方法则用于获取最后一个元素，如$("div").last()，若为普通JavaScript数组，可通过索引直接访问，第一个元素用arr[0]，最后一个元素用arr[arr.length-1]，jQuery的.first()和.last()方法简化了操作，尤其适用于DOM元素集合的首尾元素选取，提高了代码可读性和开发效率。
jQuery 获取数组首尾元素的实用方法详解
在Web开发领域，jQuery凭借其简洁优雅的语法和强大的DOM操作能力，已成为前端开发者不可或缺的工具库，当我们通过选择器获取元素集合（具有类数组特性的结构）时，经常需要提取第一个或最后一个元素进行特定操作，如样式调整、事件绑定或数据操作等，本文将深入探讨jQuery中获取元素集合首尾元素的各种方法,并通过丰富的实例帮助读者掌握这些技术的实际应用场景。
jQuery对象与类数组结构
首先需要明确一个重要概念：jQuery通过选择器（如$('div')、$('.item')）返回的是jQuery对象，它本质上是一个DOM元素的集合，具有类数组的特性（可通过索引访问，拥有length属性）。
var $items = $('.item'); // 假设页面有5个.item元素
console.log($items.length); // 输出: 5
console.log($items[0]); // 输出: 第一个.item的DOM元素
console.log($items[4]); // 输出: 第五个.item的DOM元素
值得注意的是，jQuery对象并非真正的JavaScript数组，因此不能直接使用数组原生方法（如arr.shift()、arr.pop()），jQuery为此提供了专门的方法来操作首尾元素,这些方法既安全又高效。
使用 first() 和 last() 方法获取首尾元素
jQuery为元素集合提供了first()和last()方法，它们分别返回新的jQuery对象，仅包含第一个或最后一个匹配的元素，这是获取首尾元素最推荐的方式,代码语义清晰且支持链式调用。
first() 方法：获取第一个元素
语法：$(selector).first()
功能：从当前jQuery对象中提取第一个元素,返回包含该元素的jQuery对象。
示例： 假设HTML结构如下：
<ul class="fruits"> <li>苹果</li> <li>香蕉</li> <li>橙子</li> <li>葡萄</li> <li>西瓜</li> </ul>
通过first()获取第一个li并修改样式：
$('.fruits li').first()
.css('color', 'red')
.css('font-weight', 'bold')
.addClass('highlight');
效果：第一个li元素（苹果）将显示为红色加粗，并添加了highlight类。
last() 方法：获取最后一个元素
语法：$(selector).last()
功能：从当前jQuery对象中提取最后一个元素,返回包含该元素的jQuery对象。
示例：
$('.fruits li').last()
.css('background-color', '#ffeb3b')
.css('border-radius', '5px');
效果：最后一个li元素（西瓜）将获得黄色背景和圆角边框。
使用索引访问法
除了first()和last()方法，我们还可以通过索引直接访问元素,jQuery对象支持类似数组的索引访问方式：
// 获取第一个元素
var $firstItem = $('.fruits li')[0];
// 注意：此时返回的是原生DOM元素，不是jQuery对象
// 获取最后一个元素
var $lastItem = $('.fruits li')[$('.fruits li').length - 1];
如果需要将其转换为jQuery对象,可以这样做：
var $firstJQuery = $($('.fruits li')[0]);
var $lastJQuery = $(($('.fruits li')[$('.fruits li').length - 1]));
注意事项：
- 直接索引访问返回的是原生DOM元素，不支持jQuery方法
- 转换为jQuery对象后才能使用jQuery方法
- 当集合为空时，索引访问会返回
undefined
实际应用场景
表单验证高亮
// 高亮显示第一个无效的表单字段
$('form input').each(function() {
if (!$(this).val()) {
$(this).addClass('error-field').focus();
return false; // 停止each循环
}
});
// 或者使用first()
$('form input').filter(function() {
return !$(this).val();
}).first().addClass('error-field').focus();
轮播图控制
// 轮播图：显示第一张图片
$('.carousel img').first().fadeIn();
// 轮播图：隐藏最后一张图片
$('.carousel img').last().hide();
表格行样式处理
// 表格奇偶行样式
$('table tr').first().addClass('header-row'); // 第一行作为表头
$('table tr:odd').not(':first').addClass('odd-row'); // 奇数行样式
$('table tr:even').not(':first').addClass('even-row'); // 偶数行样式
性能优化建议
-
缓存选择器结果：避免重复查询DOM
var $items = $('.fruits li'); $items.first().addClass('active'); $items.last().addClass('inactive'); -
使用更具体的选择器：减少不必要的元素匹配
// 不推荐 $('.fruits li').first(); // 推荐 $('.fruits li:first-child'); -
考虑使用原生方法：对于简单操作，原生方法可能更快
// 获取第一个元素 var firstElement = document.querySelector('.fruits li');
高级技巧
结合其他jQuery方法
// 获取第一个可见元素
$('.fruits li').filter(':visible').first().css('border', '2px solid green');
// 获取最后一个有特定类的元素
$('.fruits li').filter('.ripe').last().text('最后成熟的果实');
使用eq()方法
eq()方法可以通过索引获取特定位置的元素,比直接索引访问更安全：
// 获取第二个元素（索引为1）
$('.fruits li').eq(1).css('color', 'blue');
// 获取最后一个元素
$('.fruits li').eq(-1).css('font-size', '20px');
动态处理集合
// 动态添加元素后获取新的首尾元素
function addFruit(name) {
$('.fruits').append(`<li>${name}</li>`);
// 高亮最新添加的元素
$('.fruits li').last().fadeIn('slow');
// 移除旧的高亮
$('.fruits li').not(':last').removeClass('highlight');
}
浏览器兼容性
所有讨论的方法在jQuery支持的浏览器中都有良好的兼容性,包括：
- Chrome 4+
- Firefox 3.5+
- Safari 4+
- Opera 10.5+
- Internet Explorer 6+
jQuery提供了多种获取元素集合首尾元素的方法,每种方法都有其适用场景：
first()和last()：最推荐，语义清晰，支持链式调用- 索引访问：简单直接，但需要手动转换为jQuery对象
eq()方法：灵活，可以通过正索引或负索引获取元素
在实际开发中，应根据具体需求选择最合适的方法，对于大多数场景，first()和last()方法提供了最佳的可读性和维护性，注意性能优化和浏览器兼容性,可以让你的jQuery代码更加健壮高效。
