欢迎访问宙启技术站
智能推送
最新文章

使用jquery怎么过滤元素

发布时间：2023-05-15 16:30:42

jQuery 是一个优秀的 JavaScript 库，它提供了大量的 API 用于方便地操作 DOM 元素。在 jQuery 中，过滤元素能够非常轻松地实现，可以帮助开发者将指定的元素集合中符合特定条件的元素筛选出来，从而快速定位所需要的元素。

本篇文章将会介绍常见的过滤元素方法，让读者了解如何使用 jQuery 进行元素过滤。

1.基本过滤方法

1.1 eq

“eq”方法用于选择指定索引的相应元素，将其作为新的 jQuery 对象返回。该方法从 0 开始索引。

$.eq(index);

示例：

<!DOCTYPE html>
<html>
 <head>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <meta charset=utf-8 />
  <title>eq方法的使用</title>
 </head>
 <body>
  <div>
   <p>这是      个p元素。</p>
   <p class="select">这是第二个p元素。</p>
   <p>这是第三个p元素。</p>
  </div>
  <script>
   $(document).ready(function() {
    $("p:eq(1)").css("color","red");
   });
  </script>
 </body>
</html>

上述代码匹配所有的 p 元素，并将索引为 1 的元素背景色设置为红色。

1.2 first

该方法用于选择 个元素，将其作为新的 jQuery 对象返回。

$.first();

示例：

<!DOCTYPE html>
<html>
 <head>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <meta charset=utf-8 />
  <title>first方法的使用</title>
 </head>
 <body>
  <div>
   <p>这是      个p元素。</p>
   <p class="select">这是第二个p元素。</p>
   <p>这是第三个p元素。</p>
  </div>
  <script>
   $(document).ready(function() {
    $("p:first").css("color","red");
   });
  </script>
 </body>
</html>

1.3 last

该方法选择最后一个元素。

$.last();

示例：

<!DOCTYPE html>
<html>
 <head>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <meta charset=utf-8 />
  <title>last方法的使用</title>
 </head>
 <body>
  <div>
   <p>这是      个p元素。</p>
   <p class="select">这是第二个p元素。</p>
   <p>这是第三个p元素。</p>
  </div>
  <script>
   $(document).ready(function() {
    $("p:last").css("color","red");
   });
  </script>
 </body>
</html>

1.4 even

该方法选择偶数个元素。

$.even();

示例：

<!DOCTYPE html>
<html>
 <head>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <meta charset=utf-8 />
  <title>even方法的使用</title>
 </head>
 <body>
  <div>
   <p>这是第1个p元素。</p>
   <p class="select">这是第2个p元素。</p>
   <p>这是第3个p元素。</p>
   <p class="select">这是第4个p元素。</p>
   <p>这是第5个p元素。</p>
  </div>
  <script>
   $(document).ready(function() {
    $('p:even').css('color', 'red');
   });
  </script>
 </body>
</html>

1.5 odd

该方法选择奇数个元素。

$.odd();

示例：

<!DOCTYPE html>
<html>
 <head>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <meta charset=utf-8 />
  <title>odd方法的使用</title>
 </head>
 <body>
  <div>
   <p>这是第1个p元素。</p>
   <p class="select">这是第2个p元素。</p>
   <p>这是第3个p元素。</p>
   <p class="select">这是第4个p元素。</p>
   <p>这是第5个p元素。</p>
  </div>
  <script>
   $(document).ready(function() {
    $('p:odd').css('color', 'red');
   });
  </script>
 </body>
</html>

2. 层级过滤方法

2.1 parent

选择当前元素的父元素。

$.parent();

示例：

<!DOCTYPE html>
<html>
 <head>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <meta charset=utf-8 />
  <title>parent方法的使用</title>
 </head>
 <body>
  <div>
   <p class="select">这是      个p元素。</p>
   <p>这是第二个p元素。</p>
  </div>
  <script>
   $(document).ready(function() {
    $('p').click(function() {
     $(this).parent().css('color', 'red');
    });
   });
  </script>
 </body>
</html>

点击 p 元素，选中的父元素文字颜色变为红色。

2.2 children

选择当前元素的子元素。

$.children();

示例：

<!DOCTYPE html>
<html>
 <head>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <meta charset=utf-8 />
  <title>children方法的使用</title>
 </head>
 <body>
  <div class="demo">
   <p class="select">这是      个p元素。</p>
   <p class="select">这是第二个p元素。</p>
  </div>
  <script>
   $(document).ready(function() {
    $('.demo').children().css('color', 'red');
   });
  </script>
 </body>
</html>

选中 class 为 demo 的 div 里面的所有元素，将它们的颜色变为红色。

2.3 siblings

选中当前元素的所有同级元素（不包括它本身）。

$.siblings();

示例：

<!DOCTYPE html>
<html>
 <head>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <meta charset=utf-8 />
  <title>siblings方法的使用</title>
 </head>
 <body>
  <div>
   <p class="select">这是      个p元素。</p>
   <p>这是第二个p元素。</p>
   <p class="select">这是第三个p元素。</p>
   <p>这是第四个p元素。</p>
  </div>
  <script>
   $(document).ready(function() {
    $('p.select').siblings().css('color', 'red');
   });
  </script>
 </body>
</html>

选中 class 为 select 的 p 元素的同级元素，并将它们的颜色变为红色。

3. 过滤选择器

除了基本过滤方法和层级过滤方法，jQuery 还提供了过滤选择器方法。

3.1 :animated

该选择器选中当前正在执行动画效果的元素。

$(':animated');

示例：

`html

<!DOCTYPE html>

<html>

<head>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<meta charset=utf-8 />

<title>:animated方法的使用</title>

<style>

(div {

position: relative;

width: 400px;

height: 400px;

border: 1px solid black;

}

.demo {

background-color: #6666FF;

width: 200px;

height: