jQuery的:contains()选择器：基于文本内容精准定位元素-代码号

在DOM操作中，我们习惯了通过id、class或属性来选中元素。但有一种场景非常常见：你需要根据元素所包含的文本来进行筛选。比如，你想高亮所有包含“重要”关键词的段落，或者给所有标题中包含“教程”二字的元素加个样式。这时候，jQuery的:contains()选择器就派上了大用场。它是一个内容筛选选择器，能够让我们挣脱结构属性的束缚，直接对语义内容进行匹配。

核心语法与参数解析

:contains()的调用格式相当直观，它作为一个选择器过滤器使用，紧贴在主选择器后面。

$("选择器:contains(文本)")

这个选择器只接受一个参数，那就是你想要匹配的文本字符串。这个参数是必需的，如果不传或者留空，选择器将失去意义。

关于这个文本参数，有一个写法细节值得留意。官方文档中，直接写裸词是允许的，比如 $("p:contains(教程)")。但在开发中，我个人经验是，养成用引号把文本包起来的习惯会更好。写成 $("p:contains('教程')") 不仅在视觉上更清晰，还能在某些复杂的动态拼接字符串场景下，避免因文本中包含特殊字符或空格而引起的解析错误。这是一个低成本的好习惯。

必须牢记的核心特性：大小写敏感

:contains()选择器在匹配文本时是严格区分大小写的。这一点非常重要，也是新手容易踩坑的地方。如果你写 $("h3:contains(This)")，它就只能匹配到文本中包含且大写“T”开头的“This”的元素。页面中如果有一个<h3>内容为“this is a heading.”，它就不会被选中，因为首字母是小写的“t”。

为什么会这样？因为:contains()的底层匹配机制是纯字符串比对，它不会对文本做任何大小写转换处理。如果你需要不区分大小写的匹配能力，jQuery本身并没有直接提供一个“不区分大小写”的开关。在我的项目中，曾需要实现一个忽略大小写的文本筛选功能，我当时是通过filter()方法结合正则表达式来手动实现，代码大概是这样：

$("h3").filter(function() {
    return $(this).text().toLowerCase().indexOf("this") !== -1;
}).css("background-color", "yellow");

这个方法先将元素文本统一转换为小写，再将搜索词转为小写后进行比对，从而绕开了:contains()的严格大小写限制。这算是一个实用的变通技巧。

不仅仅是目标元素本身，还包括后代元素

另一个容易被忽视的特点是，:contains()的匹配范围包含元素的所有后代节点中的文本。这意味着，即使文本被包裹在<span>、<em>或者<strong>这样的内联标签里，它照样能被定位到。这个特性让它特别适合处理富文本内容。举个例子：

<p>这是一段包含<span>重点</span>内容的文字。</p>

当你使用 $("p:contains('重点')") 时，虽然“重点”两个字在<span>子元素里，但这个<p>标签依然会被成功选中。:contains()会检查整个元素的textContent，也就是所有子元素文本拼接后的合集。

代码实战：基础用法与组合应用

下面我们通过两个小示例，来直观感受:contains()的用法。第一个示例演示最基础的场景——根据文本筛选同类元素并改变其样式。

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
    <script>
        $(document).ready(function(){
            $("#b1").click(function(){
                // 选中所有包含"This"文本的h3元素，注意大写的T
                $("h3:contains('This')").css("background-color", "yellow");
            });
        });
    </script>
</head>

<body>
    <h4>jQuery :contains()选择器基础演示</h4>
    <p>第一段普通段落文字。</p>
    <h3>This is a heading.</h3>
    <p>第二段普通段落文字。</p>
    <h3>This is second heading.</h3>
    <p>第三段普通段落文字。</p>
    <h3>This is another heading.</h3>
    <h5>点击下方按钮，观察只有文本含"This"的h3标题会被高亮。</h5>
    <button id="b1">点击执行选择</button>
</body>
</html>

在这个案例中，页面有三个<h3>标题，它们都包含单词“This”。点击按钮后，三行标题的背景色都会变为黄颜色。请注意，如果你把页面中的“This”改成“this”，再点击按钮，就不会有任何反应了——这就是大小写敏感的直观体现。

第二个示例我们来点更实际的：假设你有一个学习编程的笔记列表，想快速标记出所有提到“jQuery”这个词的条目。

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
    <script>
        $(document).ready(function(){
            $("#markBtn").click(function(){
                // 给所有包含"jQuery"的列表项添加高亮样式
                $("li:contains('jQuery')").css({
                    "background-color": "#ffe0b2",
                    "border-left": "4px solid #e65100"
                });
            });
        });
    </script>
</head>
<body>
    <h3>学习编程笔记</h3>
    <ul>
        <li>JavaScript 闭包与作用域链的理解</li>
        <li>jQuery 选择器在前端开发中的应用</li>
        <li>CSS Flexbox 布局实战技巧</li>
        <li>用 jQuery 实现异步数据请求和DOM更新</li>
        <li>Python 列表推导式的各种用法</li>
    </ul>
    <button id="markBtn">标记所有jQuery相关条目</button>
</body>
</html>

点击按钮后，列表中第二行和第四行因为都包含了“jQuery”字样，会被添加上橙色背景和左侧粗边框。这在做内容管理系统的快速筛选功能时，是非常实用的技巧。

本节课程知识要点

在使用:contains()选择器时，请把以下几条刻在脑海里：

文本参数是大小写敏感的，这是最容易出错的地方。如果需要忽略大小写，请考虑结合filter()方法和字符串大小写转换来实现自定义匹配。
匹配范围覆盖整个后代元素树，不局限于直接文本节点。这一点在语义化标签嵌套复杂时非常有用。
参数建议始终用引号包裹，这是一个能减少潜在解析问题的书写习惯。
它可以与任何jQuery选择器无缝组合，比如类选择器、属性选择器、伪类选择器等，形成精准的筛选条件链。

:contains()的缺点也不该回避：对于大数据量的DOM结构，频繁使用这种内容筛选选择器可能会有性能压力，因为它需要遍历和比对文本内容。在数据量极大的表格或列表中，如果需要反复做类似操作，一个更好的思路可能是先在数据层面打好标记（比如添加特定的class或data属性），再用更快的属性选择器去定位。技术选型没有银弹，理解每个工具的边界，才能写出真正健壮的代码。

本文标签：

jQuery的:contains()选择器：基于文本内容精准定位元素

核心语法与参数解析

必须牢记的核心特性：大小写敏感

不仅仅是目标元素本身，还包括后代元素

代码实战：基础用法与组合应用

本节课程知识要点

感谢您的认可和支持