jquery属性过滤选择器使用示例-前端开发

当我们使用 jQuery 选取元素时，可以使用属性选择器来选择具有指定属性的元素。属性过滤选择器是基于这种思路工作的。

当我们使用 jQuery 选取元素时，可以使用属性选择器来选择具有指定属性的元素。属性过滤选择器是基于这种思路工作的。

属性过滤选择器

属性过滤选择器使用属性名称和可选匹配规则来匹配一个或多个元素。下面是一些常用的属性过滤选择器：

[attribute]：选择具有指定属性的元素。
[attribute=value]：选择具有指定属性且属性值等于指定值的元素。
[attribute!=value]：选择具有指定属性但属性值不等于指定值的元素。
[attribute$=value]：选择具有指定属性且属性值以指定值结尾的元素。
[attribute^=value]：选择具有指定属性且属性值以指定值开头的元素。
[attribute*=value]：选择具有指定属性且属性值包含指定子字符串的元素。

使用示例

下面是两条使用示例：

示例一

假设有一个 HTML 文档，其中包含多个按钮和一个文本输入框，我们只想选择某个特定类别的按钮。这种情况下，可以使用属性选择器来选择具有指定属性值的元素。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>属性过滤选择器使用示例</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
  </head>
  <body>
    <button class="category1">按钮1</button>
    <button class="category2">按钮2</button>
    <button class="category1">按钮3</button>
    <button class="category2">按钮4</button>
    <input type="text" id="input">
    <script>
      $(function() {
        var category1Btns = $('button[class=category1]');
        console.log(category1Btns.length); // 输出 2
      });
    </script>
  </body>
</html>

在上面的代码中，我们使用了属性过滤选择器 [class=category1] 来选择具有 class 属性且属性值等于 category1 的按钮。此时，将输出 2，表明成功选择了两个元素。

示例二

假设我们想匹配所有 href 属性值以 http 开头的锚点，可以使用属性过滤选择器 [href^="http"]。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>属性过滤选择器使用示例</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
  </head>
  <body>
    <a href="http://www.google.com">Google</a>
    <a href="https://www.baidu.com">Baidu</a>
    <a href="ftp://www.example.com">Example</a>
    <script>
      $(function() {
        $('a[href^="http"]').css('color', 'red');
      });
    </script>
  </body>
</html>

在上面的代码中，我们使用 [href^="http"] 来选择所有 href 属性值以 http 开头的 a 标签，并将它们的颜色设为红色。

这就是使用属性过滤选择器的两个简单示例。使用这些选择器，我们可以通过 CSS 属性、元素属性、元素内容等多种方式选择元素，从而更加灵活地操作页面元素。