jQuery [attribute~=value] 选择器

在 jQuery 中，[attribute~=value] 用于选择属性值包含指定值（在空格分隔的列表中）的元素。

换句话说，它选择指定属性的值完全等于给定值或在空格分隔的列表中包含给定值的元素。

语法

以下是 jQuery 中 [attribute~=value] 选择器的语法：

$("[attribute~='value']")

参数

以下是上述语法的描述：

attribute: 将检查其值的属性。
value: 属性值中应包含的词语。该值必须是一个完整的词，而不是一个词的一部分。

示例 1

在下面的示例中，我们使用 jQuery [attribute~=value] 选择器来选择类属性中包含 "highlight" 类的所有元素：

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("[class~=highlight]").css("background-color", "yellow");
        });
    </script>
</head>
<body>
    <div class="highlight">This div will be highlighted.</div>
    <div class="nohighlight">This div will not be highlighted.</div>
    <div class="highlight another-class">This div will also be highlighted.</div>
</body>
</html>

执行上述程序后，选定的元素将以黄色背景突出显示。

示例 2

在这个示例中，我们选择包含 "feature" 的 data 属性的元素：

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("[data-tags~=feature]").css("border", "2px solid red");
        });
    </script>
</head>
<body>
    <div data-tags="feature new">This div has the 'feature' tag.</div>
    <div data-tags="old popular">This div does not have the 'feature' tag.</div>
    <div data-tags="feature popular">This div also has the 'feature' tag.</div>
</body>
</html>

执行上述程序后，选定的元素将应用一个实心的红色边框。

jquery_ref_selectors.htm

打印页面