jQuery [attribute*=value] 选择器

在 jQuery 中，[attribute*=value] 选择器用于选择其属性包含指定子字符串的元素。与属性值匹配的子字符串区分大小写。

语法

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

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

参数

以下是上述语法的描述：

attribute: 您要匹配的属性名称。
value: 应包含在属性值中的子字符串。

示例 1

在以下示例中，我们使用 jQuery [attribute*=value] 选择器来选择所有具有包含“highlight”的 class 属性的元素：

<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="highlighted">This div has 'highlight' in its class.</div>
    <div class="notHighlighted">This div does not have 'highlight' in its class.</div>
    <div class="highlightMe">This div also has 'highlight' in its class.</div>
</body>
</html>

选定的 <div> 元素将以黄色背景颜色突出显示。

示例 2

在此示例中，我们选择所有具有包含“example”的 data-info 属性的元素：

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("[data-info*=example]").css("border", "2px solid blue");
        });
    </script>
</head>
<body>
    <p data-info="exampleOne">This paragraph has 'example' in its data-info attribute.</p>
    <p data-info="noExample">This paragraph does not have 'example' in its data-info attribute.</p>
    <p data-info="exampleTwo">This paragraph also has 'example' in its data-info attribute.</p>
</body>
</html>

所有选定的元素都将以实心蓝色突出显示。

jquery_ref_selectors.htm

打印页面