菜鸟教程
教程 jquery tutorial

过滤选择器

jQuery 过滤选择器用于从匹配的元素集合中筛选特定元素，方便对符合条件的元素进行精确操作。

常用过滤选择器

  • :first — 选中第一个匹配元素
js 
  $("li:first");
  • :last — 选中最后一个匹配元素
js 
  $("li:last");
  • :eq(index) — 选中指定索引的元素（从 0 开始）
js 
  $("li:eq(2)");
  • :gt(index) — 选中索引大于指定值的元素
js 
  $("li:gt(1)");
  • :lt(index) — 选中索引小于指定值的元素
js 
  $("li:lt(3)");

示例代码

在线代码演示
源码 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
  $(document).ready(function () {
    // 第一个li字体加粗
    $("li:first").css("font-weight", "bold");
    // 最后一个li字体变红
    $("li:last").css("color", "red");
    // 第三个li背景色变黄
    $("li:eq(2)").css("background-color", "yellow");
    // 索引大于1的li文字变斜体
    $("li:gt(1)").css("font-style", "italic");
    // 索引小于3的li边框加粗
    $("li:lt(3)").css("border", "1px solid #000");
  });
</script>

<ul>
<li>列表项 1</li>
<li>列表项 2</li>
<li>列表项 3</li>
<li>列表项 4</li>
<li>列表项 5</li>
</ul>

相关内容