在jQuery中，获取除了第一个和最后一个的元素，可通过两种常用方法实现，一是使用:not()选择器结合:first和:last，如$('.item:not(:first):not(:last)')，直接排除首尾元素；二是利用slice()方法，如$('.item').slice(1, -1)，从第二个元素开始选取至倒数第二个元素，前者选择器直观，适合明确排除特定位置元素；后者基于索引操作，灵活性更高，适用于动态列表或需结合索引处理的场景，两种方法均能高效筛选目标元素，可根据实际需求选择使用。
jQuery 获取除首尾元素的实用方法与代码示例
在网页开发中,我们经常需要操作特定范围的元素，比如跳过列表的第一个和最后一个元素，仅对中间的元素进行样式调整、事件绑定或数据操作，jQuery 作为轻量级的 JavaScript 库，提供了多种便捷的方法来实现这一需求，本文将详细介绍几种常用的 jQuery 技巧，帮助开发者高效获取除首尾元素的目标集合，提升前端开发效率。
为什么需要获取除首尾元素？
在实际场景中,排除首尾元素的需求非常普遍，合理的处理能够显著提升用户体验和页面美观度。
- 导航栏设计：在水平导航菜单中，第一个和最后一个链接通常不需要左右边距，而中间的链接需要统一间距，以确保视觉平衡。
- 卡片布局：在卡片式布局中，首尾卡片往往需要圆角样式，而中间卡片则应去掉圆角，避免与相邻卡片重叠产生视觉冲突。
- 数据表格：在数据表格中，表头和表尾可能需要特殊的样式或固定定位，而中间的数据行则可能需要悬停效果或交互事件。
- 轮播组件：在轮播图中，首尾元素可能需要特殊的过渡效果或无限循环处理，中间元素则采用标准动画。
掌握 jQuery 中获取除首尾元素的方法，能让我们更灵活地处理这些布局和交互细节，创建更加专业和用户友好的网页界面。
核心方法详解
not() 选择器结合 first 和 last 伪类
not() 是 jQuery 中用于排除匹配元素的选择器，而 first 和 last 分别表示匹配集合中的第一个和最后一个元素，通过将两者结合，可以轻松排除首尾元素。
语法：
$('selector').not(':first, :last')
或者分步排除：
$('selector').not(':first').not(':last') // 效果相同，但可读性更好
示例：
假设有一个无序列表,我们需要获取除首尾 <li> 外的所有元素：
<ul id="list"> <li>第一个元素（首）</li> <li>中间元素1</li> <li>中间元素2</li> <li>中间元素3</li> <li>最后一个元素（尾）</li> </ul>
jQuery 代码：
$(document).ready(function(){
// 排除首尾元素，添加背景色
$('#list li').not(':first, :last').css('background-color', '#f0f8ff');
});
效果：中间的 3 个 <li> 元素背景色变为浅蓝色，首尾元素保持默认样式。
优点：代码简洁直观，易于理解，适合大多数简单场景。
注意事项：当元素集合为空或仅有一个元素时，此方法不会报错，但也不会执行任何操作。
slice() 方法截取数组
slice() 是 jQuery 对象提供的方法，用于从匹配的元素集合中提取一个子集，类似于 JavaScript 数组的 slice() 方法，通过指定起始和结束索引，可以精确截取除首尾外的元素。
语法：
$('selector').slice(1, -1)
参数说明：
- 参数
1：表示从第二个元素开始（索引从 0 开始）； - 参数
-1：表示倒数第一个元素之前结束（即不包含最后一个元素）。
示例：
使用同样的列表结构,用 slice() 实现相同效果：
$(document).ready(function(){
// 截取从第2个到倒数第2个元素，添加边框
$('#list li').slice(1, -1).css('border', '1px solid #87ceeb');
});
效果：中间的 3 个 <li> 元素添加蓝色边框，首尾元素无边框。
优点：性能较好，特别是在处理大量元素时，slice() 方法比 not() 更高效。
进阶用法：slice() 方法还支持其他参数组合，
// 获取前三个元素
$('selector').slice(0, 3)
// 获取从第三个元素开始的所有元素
$('selector').slice(2)
gt() 和 lt() 选择器组合
gt(index) 匹配大于指定索引的元素，lt(index) 匹配小于指定索引的元素，通过组合两者，可以排除首尾元素。
语法：
$('selector').lt($('selector').length - 1).gt(0)
参数说明：
$('selector').length - 1：获取最后一个元素的索引（总长度-1）；0：表示排除第一个元素（索引为0的元素）。
示例：
$(document).ready(function(){
// 使用 gt() 和 lt() 组合选择中间元素
$('#list li').lt($('#list li').length - 1).gt(0).css('font-weight', 'bold');
});
效果：中间的 3 个 <li> 元素字体加粗，首尾元素保持默认样式。
优点：语法灵活，可以与其他选择器组合使用，实现更复杂的元素选择逻辑。
注意事项：当元素数量较少时，此方法可能不如前两种直观，但在某些特定场景下非常有用。
filter() 方法自定义过滤
除了上述方法,我们还可以使用 filter() 方法结合自定义函数来实现更灵活的元素过滤。
语法：
$('selector').filter(function(index) {
return index > 0 && index < $('selector').length - 1;
})
示例：
$(document).ready(function(){
// 使用 filter() 方法自定义过滤条件
$('#list li').filter(function(index) {
return index > 0 && index < $('#list li').length - 1;
}).addClass('middle-item');
});
效果：为中间的 3 个 <li> 元素添加 middle-item 类，便于后续样式操作。
优点：逻辑清晰，可读性强，适合需要复杂过滤条件的场景。
性能比较与最佳实践
不同的方法在性能上有所差异,特别是在处理大量元素时：
slice()方法：性能最佳，直接基于索引操作，时间复杂度为 O(1)。not()方法：性能良好，但需要遍历整个集合来排除元素。gt()和lt()组合：性能中等，需要分别执行两次选择操作。filter()方法：性能相对较低，因为需要为每个元素执行自定义函数。
最佳实践建议：
- 对于简单场景,优先使用
slice()方法，性能最优。 - 当需要排除多个特定元素时,
not()方法更为灵活。 - 在需要复杂过滤逻辑时,考虑使用
filter()方法。 - 避免在循环中频繁调用选择器,尽量缓存 jQuery 对象。
实际应用案例
响应式导航菜单
<nav class="main-nav"> <a href="#" class="nav-item">首页</a> <a href="#" class="nav-item">产品</a> <a href="#" class="nav-item">服务</a> <a href="#" class="nav-item">关于我们</a> <a href="#" class="nav-item">联系方式</a> </nav>
$(document).ready(function(){
// 为中间的导航项添加分隔
