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

打印页面