jQuery :contains() 选择器

jQuery 中的:contains() 选择器用于选择包含指定文本字符串的元素。要匹配的文本是区分大小写的，这意味着“Hello”和“hello”不被认为是相同的。它选择在其内容中的任何位置包含指定文本的元素，包括子元素。

语法

以下是 jQuery 中 :contains 选择器的语法：

$(":contains(text)")

参数

“text” 是要在元素中搜索的字符串。此字符串区分大小写。

示例 1

在下面的示例中，我们使用 :contains 选择器来突出显示包含单词“Tutorialspoint”的段落：

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("p:contains('Tutorialspoint')").css("background-color", "yellow");
        });
    </script>
</head>
<body>
    <p>Tutorialspoint.</p>
    <p>This one will not be highlighted.</p>
    <p>Tutorialspoint.</p>
</body>
</html>

执行上述程序后，所有包含“Tutorialspoint”单词的<p>元素都将以黄色背景突出显示。

示例 2

在此示例中，我们选择包含特定文本“item”的“列表项”：

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("li:contains('item')").css("background-color", "yellow");
        });
    </script>
</head>
<body>
    <ul>
        <li>This is the first item.</li>
        <li>Another list item.</li>
        <li>This will not change (background-color will not be added).</li>
        <li>Final item in the list.</li>
    </ul>
</body>
</html>

执行上述程序后，所有包含单词“item”的列表项都将以黄色背景突出显示。

示例 3

在此示例中，我们选择包含文本“Tutorialspoint”的<div>元素：

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("div:contains('Tutorialspoint')").css("font-weight", "bold");
        });
    </script>
</head>
<body>
    <div>I work in Tutorialspoint.</div>
    <div>This will not be bold.</div>
    <div>Tutorialspoint is in Hyderabad.</div>
</body>
</html>

执行上述程序后，包含文本“Tutorialspoint”的<div>元素将以黄色背景突出显示。

jquery_ref_selectors.htm

打印页面