jQuery [attribute^=value] 选择器

jQuery 中的[attribute^=value] 选择器用于选择属性值以特定值开头的元素。换句话说，它允许您根据属性值的开头部分来定位元素。

语法

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

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

参数

以下是上述语法的描述：

attribute: 指定要匹配的属性。
value: 属性值应该以该值开头。

示例 1

在下面的示例中，我们使用 jQuery [attribute^=value] 选择器来选择“href 属性”以“https://”开头的元素：

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("a[href^='https://']").css("background-color", "yellow");
        });
    </script>
</head>
<body>
    <a href="https://example.com">Secure Example</a><br>
    <a href="http://example.com">Non-Secure Example</a><br>
    <a href="https://openai.com">OpenAI</a><br>
    <a href="https://google.com">Google</a>
</body>
</html>

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

示例 2

在这里，我们选择所有 src 属性以“https://”开头的图像元素：

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("img[src^='https://']").css("border", "2px solid green");
        });
    </script>
</head>
<body>
    <img src="https://example.com/image1.jpg" alt="Image 1"><br>
    <img src="http://example.com/image2.jpg" alt="Image 2"><br>
    <img src="https://openai.com/logo.png" alt="Logo"><br>
    <img src="https://google.com/banner.jpg" alt="Banner">
</body>
</html>

执行上述程序后，选定的图像元素将以实心绿色突出显示。

jquery_ref_selectors.htm

打印页面