jQuery [attribute|=value] 選擇器

jQuery 中的[attribute|=value] 選擇器用於選擇具有指定屬性的元素，其值等於 value 或以 value- 開頭，後跟一個連字元。

語法

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

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

引數

以下是上述語法的描述：

"attribute"：指定要選擇的屬性。
"|="：表示運算子，指示值應等於 value 或以 value 開頭。
"value"：要與屬性匹配的值或字首。

示例 1

在下面的示例中，我們使用 jQuery [attribute|=value] 選擇器選擇所有以 "en" 開頭的 lang 屬性的 <div> 元素：

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            var elements = $("[lang|=en]");
            elements.css("background-color", "yellow");
        });
    </script>
</head>
<body>
    <div lang="en">English Content</div>
    <div lang="en-us">American English Content</div>
    <div lang="fr">French Content</div>
</body>
</html>

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

示例 2

在這個例子中，我們選擇所有 title 屬性以 "Hello" 開頭的 <p> 元素：

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            // Select all elements with a title attribute starting with 'Hello'
            $("p[title|='Hello']").css("background-color", "yellow");
        });
    </script>
</head>
<body>
    <p title="Hello">Greetings!</p>
    <p title="hello">Welcome!</p>
    <p title="Hello World">Farewell!</p>
</body>
</html>

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

jquery_ref_selectors.htm

列印頁面