在 jQuery 中,过滤是指从匹配元素集合中筛选出满足特定条件的元素。jQuery 提供了一系列的过滤方法来实现这个目的。以下是一些常见的 jQuery 过滤方法:

1. :first 过滤器: 选择匹配元素集合中的第一个元素。
   $('li:first'); // 选择所有 <li> 元素中的第一个

2. :last 过滤器: 选择匹配元素集合中的最后一个元素。
   $('li:last'); // 选择所有 <li> 元素中的最后一个

3. :even 和 :odd 过滤器: 选择匹配元素集合中偶数或奇数位置的元素。
   $('li:even'); // 选择所有 <li> 元素中的偶数位置的元素
   $('li:odd');  // 选择所有 <li> 元素中的奇数位置的元素

4. :eq(index) 过滤器: 选择匹配元素集合中指定索引位置的元素。
   $('li:eq(2)'); // 选择所有 <li> 元素中索引为 2 的元素

5. :gt(index) 和 :lt(index) 过滤器: 选择匹配元素集合中索引大于或小于指定索引的元素。
   $('li:gt(2)'); // 选择所有 <li> 元素中索引大于 2 的元素
   $('li:lt(2)'); // 选择所有 <li> 元素中索引小于 2 的元素

6. :not(selector) 过滤器: 选择匹配元素集合中不符合指定选择器的元素。
   $('li:not(.special)'); // 选择所有 <li> 元素中不带有类名 .special 的元素

这里是一个完整的例子:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery 过滤</title>
  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
  <style>
    .special {
      color: red;
    }
  </style>
</head>
<body>

<ul>
  <li>Item 1</li>
  <li class="special">Item 2 (Special)</li>
  <li>Item 3</li>
  <li class="special">Item 4 (Special)</li>
  <li>Item 5</li>
</ul>

<script>
  // 选择第一个 <li> 元素
  var firstItem = $('li:first');
  console.log(firstItem);

  // 选择最后一个 <li> 元素
  var lastItem = $('li:last');
  console.log(lastItem);

  // 选择所有偶数位置的 <li> 元素
  var evenItems = $('li:even');
  console.log(evenItems);

  // 选择索引为 2 的 <li> 元素
  var thirdItem = $('li:eq(2)');
  console.log(thirdItem);

  // 选择所有索引大于 2 的 <li> 元素
  var greaterThanTwo = $('li:gt(2)');
  console.log(greaterThanTwo);

  // 选择所有不带有类名 .special 的 <li> 元素
  var notSpecial = $('li:not(.special)');
  console.log(notSpecial);
</script>

</body>
</html>

在这个例子中,通过使用不同的过滤方法,选择了列表中的不同元素。这些过滤方法可以根据具体的需求进行组合使用。




转载请注明出处:http://www.zyzy.cn/article/detail/12890/jQuery