jQuery [attribute$=value] 選擇器

jQuery 中的[attribute$=value] 選擇器用於選擇屬性值以特定字串結尾的元素。

當我們需要根據屬性值結尾來定位元素時，此選擇器非常有用，例如副檔名、類名或 URL 結尾。

語法

以下是 jQuery 中 [attribute$=value] 選擇器的語法：

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

引數

以下是上述語法的描述：

attribute: 您要匹配的屬性名稱。
value: 您要在屬性值中匹配的結尾字串。區分大小寫。

示例 1

在以下示例中，我們使用 [attribute$=value] 選擇器來選擇所有以“.pdf”結尾的 href 屬性：

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("a[href$='.pdf']").css("background-color", "yellow");
        });
    </script>
</head>
<body>
    <a href="document.pdf">PDF Document</a><br>
    <a href="image.jpg">JPEG Image</a><br>
    <a href="report.pdf">PDF Report</a><br>
    <a href="profile.html">HTML Profile</a>
</body>
</html>

執行上述程式後，選定的元素將以黃色背景顏色突出顯示。

示例 2

在此示例中，我們選擇所有 href 屬性以“.png”結尾的元素：

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("img[src$='.png']").css("border", "2px solid blue");
        });
    </script>
</head>
<body>
    <img src="photo.png" alt="PNG Image"><br>
    <img src="photo.jpg" alt="JPEG Image"><br>
    <img src="icon.png" alt="PNG Icon"><br>
    <img src="avatar.gif" alt="GIF Avatar">
</body>
</html>

執行上述程式後，選定的元素將以實心藍色突出顯示。

jquery_ref_selectors.htm

列印頁面