jQuery | [属性^=值] 选择器

在jQuery中，[属性^=值]选择器用于选择具有指定属性值的元素，该属性值以指定的值开头。在这种选择器中，'^='表示以给定值开头的属性，方括号内的值表示属性的名称，而值则表示属性的值。

语法

$("[属性^=值]")

示例

HTML代码：

<div id="test">
    <img src="images/icon.png">
    <img src="images/logo.png">
    <img src="images/banner.png">
</div>

jQuery代码：

$(document).ready(function(){
  $("img[src^='images']").css("border", "1px solid red");
});

解释：在这个示例中，我们选择所有具有src属性并且src属性值以“images”开头的img元素。我们使用css()方法向这些元素添加一个红色边框。

输出

根据以上代码片段，所得到的输出会是以下HTML代码：

<div id="test">
    <img src="images/icon.png" style="border:1px solid red;">
    <img src="images/logo.png" style="border:1px solid red;">
    <img src="images/banner.png" style="border:1px solid red;">
</div>

我们可以看到，被匹配到的三个img元素都带有了一个红色的边框。

注意事项

• 属性值区分大小写。
• 此选择器只能选择具有属性的元素。
• 支持以空格分隔的多个属性选择器：$("[属性1^=值], [属性2^=值]")。
• 可以与其他选择器配合使用：$("img[src^='images']:first-child")。