jQuery 过滤携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第27天，点击查看活动详情我们字

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第27天，点击查看活动详情

我们字段jquery过滤包括类名过滤，下标过滤，判断过滤和反向过滤。那么他们到达是什么意思，有什么用呢？下面进行一个简单介绍

类名过滤

我们知道在 jQuery 中使用 hasClass 方法可以用来判断指定元素是否包含该类名的元素。

其使用格式为：

$().hasClass("类名");

hasclass返回值是boolean类型，当我们指定元素包含该类名，返回true，反之false

下面进行一个简单的实验：

在文件，定义三个 div 元素，当我们点击三个元素中的其中一个时，会触发 click 事件。
使用 $("div").hasClass("div2") 来判断 div 元素中是否包含 class 名为 div2 的元素。
使用 if 语句判断，如果没有该元素，则给该元素添加背景颜色；如果有，弹出警告框。

。。。
    <style>
      div {
        float: left;
        margin-right: 10px;
        width: 50px;
        height: 50px;
        border: 1px solid;
      }
      .div2 {
        background-color: #b6c9f0;
      }
    </style>
    <script>
      $(function () {
        $("div").click(function () {
          var value = $(this).hasClass("div2");
          if (!value) {
            $(this).addClass("div2");
          } else {
            alert("该元素已应用 div2 样式");
          }
        });
      });
    </script>
  </head>
  <body>
    <div></div>
    <div></div>
    <div></div>
  </body>

最后，会看到以下实验效果。

图片描述

下标过滤

在 jQuery 中使用 eq 方法可以实现下标过滤。

其语法格式为：

$().eq(n);

n 是一个整数，取值为元素的下标值。

我们使用 for 循环来遍历 li 元素。
通过 for(var i=0; i<3; i++) 我们可以遍历列表的前三项。
使用 eq(i).css("color","#77acf1") 给列表前三项的字设置颜色。

js代码如下

<script> 
$(function () { 
$("body").click(function () {
// 列表中下标值为 0-2 的元素会改变字体颜色 
var $li = $("li"); 
for (var i = 0; i < 3; i++) {
$li.eq(i).css("color", "#77acf1"); 
} 
}); 
}); 
</script>

结果如下

图片描述

判断过滤

在 jQuery 中可以使用 is 方法来判断指定元素中是否有符合条件的存在。

其使用格式为：

$().is(selector);

is 方法返回的也是布尔类型的值，符合条件返回 true，反之 false。

前面我们学过类名过滤，可以判断是否存在该类名的元素，is 方法也可以实现。不过除了这一功能，我们的 is 方法拥有更多魔法，它还可以判断一个元素当前是否处于某个状态。

当点击「元素当前状态」按钮，触发 click 事件。
在函数内部通过 $("div").is(":animated") 判断当前 div 元素是否处于动画状态。
如果是，在 p 元素中写入“元素处于动画状态”；如果不是，在 p 元素中写入“元素不处于动画状态”。

接着，在 index3.html 文件中写入以下内容。

    <style>
      div {
        width: 50px;
        height: 50px;
        background-color: #a7c5eb;
        margin-top: 20px;
      }
      p {
        color: #c7ffdb;
      }
    </style>
    <script src="jquery-3.6.0.min.js"></script>
    <script>
      $(function () {
        $("div")
          .delay(10000)
          .animate({ width: "100px" }, 2000)
          .animate({ height: "100px" }, 2000)
          .animate({ left: "+=200px" });
        $("#btn").click(function () {
          var value = $("div").is(":animated");
          if (value) {
            $("p").text("元素处于动画状态");
          } else {
            $("p").text("元素不处于动画状态");
          }
        });
      });
    </script>
  </head>
  <body>
    <button id="btn">元素当前状态</button>
    <div></div>
    <p></p>
  </body>
</html>

图片描述

反向过滤

在 jQuery 中使用 not 方法可以选择不符合条件的元素。

其使用格式为：

$().not(selector|function)

它的参数有两种，当为选择器时，我们会通过选择器来过滤不符合条件的元素；当为函数时，我们会通过函数来过滤不符合条件的元素。

代码和类名过滤类似，js是：

<script> 
$(function () { 
$("div").click(function () { 
$(this).not(".div2").css("background", "#ffc478"); 
});
}); 
</script>

图片描述

可以看出，除了 not 方法中类名为 div2 的选择器，其他选择器都能够显示背景颜色。