jQuery过滤选择器详解

jQuery 过滤选择器详解

在使用 jQuery 时，我们可以使用选择器来选择一个或多个元素，但在实际应用中，我们常常需要更精细的选择，来更快捷准确地获取目标元素，这时候就需要用到 jQuery 提供的过滤选择器。

基本语法

过滤选择器基本语法如下：

$(":filter")

其中，filter 表示过滤器，可以是各种不同的字符串。

常用过滤选择器

下面简单介绍一些常用的过滤选择器。

:visible 和 :hidden

:visible 表示可见的元素，:hidden 表示隐藏的元素。如下所示：

<ul>
  <li>item1</li>
  <li style="display: none;">item2</li>
  <li>item3</li>
</ul>

<script>
  // 选取可见的 li 元素
  $("li:visible").css("background-color", "yellow");

  // 选取隐藏的 li 元素
  $("li:hidden").show();
</script>

:first 和 :last

:first 表示第一个元素，:last 表示最后一个元素。如下所示：

<ul>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
</ul>

<script>
  // 选取第一个 li 元素
  $("li:first").css("background-color", "pink");

  // 选取最后一个 li 元素
  $("li:last").css("background-color", "red");
</script>

:even 和 :odd

:even 表示偶数位置的元素（从 0 开始），:odd 表示奇数位置的元素（从 0 开始）。如下所示：

<ul>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
</ul>

<script>
  // 选取偶数位置的 li 元素
  $("li:even").css("background-color", "lightblue");

  // 选取奇数位置的 li 元素
  $("li:odd").css("background-color", "lightgreen");
</script>

:eq 和 :lt、:gt

:eq(n) 表示第 n 个元素，:lt(n) 表示小于 n 的元素，:gt(n) 表示大于 n 的元素。如下所示：

<ul>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
</ul>

<script>
  // 选取第 3 个 li 元素
  $("li:eq(2)").css("background-color", "purple");

  // 选取前 2 个 li 元素
  $("li:lt(2)").css("color", "red");

  // 选取第 3 个 li 元素之后的 li 元素
  $("li:gt(2)").css("color", "blue");
</script>

总结

本文介绍了 jQuery 过滤选择器的基本语法、常用过滤选择器及其用法。在实际开发中，灵活使用过滤选择器可以更快捷地选择目标元素，提高代码效率。