异常教程

jQuery.contains()方法（千字长文）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

前言

在现代网页开发中，jQuery 作为简化 DOM 操作的利器，提供了大量实用方法。其中，jQuery.contains() 方法常被开发者低估，但它在元素层级关系判断、内容检测等场景中发挥着重要作用。本文将从基础概念到实战应用，逐步解析这一方法的原理与用法，并通过案例帮助读者掌握其核心价值。

一、方法概述：什么是 jQuery.contains()？

jQuery.contains() 是一个用于判断元素包含关系的方法。它接受两个参数：一个父级元素（container）和一个子级元素（contained），返回一个布尔值（true 或 false），表示父元素是否直接或间接包含子元素。

形象比喻：
可以将 DOM 结构想象为一棵家族树，jQuery.contains() 就像问“张爷爷是否是李小明的祖先”。若李小明是张爷爷的孙子，方法返回 true；若两人无血缘关系，则返回 false。

二、语法详解与参数说明

语法结构

jQuery.contains( container, contained )
  • container：需要被检测的父级元素（可以是 DOM 元素或 jQuery 对象）。
  • contained：需要检测是否被父级包含的子级元素（同样接受 DOM 元素或 jQuery 对象）。

关键特性

  1. 层级关系：仅需父级直接或间接包含子级即可返回 true，无需父子直接相连。
  2. 类型限制：若参数非 DOM 元素或 jQuery 对象，方法会隐式转换为 DOM 元素，但可能引发意外结果。
  3. 忽略文本节点：若 contained 是文本节点（如纯文字），方法返回 false。

三、基础用法示例

检测元素是否被包含

<div id="parent">
  <p id="child">Hello</p>
</div>

// 检查 #child 是否在 #parent 内
const result = jQuery.contains( document.getElementById("parent"), $("#child")[0] );
console.log(result); // 输出：true

注意：

  • 第二个参数需传递 DOM 元素，因此通过 $("#child")[0] 获取原始元素。
  • 若父级元素不存在，方法返回 false。

四、进阶用法与实际场景

场景 1：动态判断元素归属

在单页应用中，常需判断用户点击的元素是否属于某个容器。例如：

$(document).on("click", function(event) {
  const target = event.target;
  const modal = $("#myModal")[0];
  
  // 若点击区域不在模态框内，关闭模态框
  if (!jQuery.contains(modal, target)) {
    $("#myModal").hide();
  }
});

作用：当用户点击模态框外区域时，触发关闭逻辑，实现“点击外部关闭”的交互效果。

场景 2：文本内容检测

通过结合 :contains 选择器，可间接实现文本内容的检测。例如：

function checkTextExistence(text, parentElement) {
  const hasText = jQuery(parentElement).find(":contains(" + text + ")").length > 0;
  return hasText;
}

// 使用示例
const parent = document.getElementById("content");
const result = checkTextExistence("Hello", parent);
console.log(result); // 若内容包含 "Hello"，返回 true

原理：

  • :contains() 选择器会查找所有包含指定文本的后代元素。
  • 结合 jQuery.contains() 可更精准地控制检测范围。

五、与原生 JavaScript 的对比

对比原生 Node.contains()

原生 JavaScript 的 Node.contains() 方法功能与 jQuery.contains() 完全一致，但语法略有差异：

// jQuery 写法
jQuery.contains(parentNode, childNode);

// 原生 JS 写法
parentNode.contains(childNode);

选择建议：

  • 若项目已使用 jQuery，推荐直接调用 jQuery.contains()，代码更简洁。
  • 在纯原生开发场景，使用 Node.contains() 更高效。

六、常见问题与解决方案

问题 1：参数传递错误导致结果异常

案例：

// 错误写法：第二个参数传递 jQuery 对象而非 DOM 元素
const result = jQuery.contains($("#parent"), $("#child")); // 返回 false

修正方法：

const result = jQuery.contains($("#parent")[0], $("#child")[0]); // 返回 true

问题 2：忽略文本节点的特殊性

案例：

const textNode = document.createTextNode("Hello");
jQuery.contains(document.body, textNode); // 返回 false

解决方案：
若需检测文本内容，应结合 :contains 选择器或直接操作元素节点。

七、性能优化与最佳实践

性能考量

jQuery.contains() 本身性能较高，但若在循环或高频事件中使用，建议：

  1. 缓存父级元素引用，避免重复查询。
  2. 对于简单场景，优先使用原生 Node.contains()。

最佳实践建议

场景推荐写法
检测元素层级关系jQuery.contains(parent, child)
检测文本存在性结合 :contains 选择器
处理动态生成的元素在元素渲染完成后立即执行检测

八、总结

通过本文的讲解，我们深入理解了 jQuery.contains() 方法的核心逻辑、使用场景及常见问题。这一方法不仅简化了 DOM 层级关系的判断，还为文本检测等复杂需求提供了灵活的解决方案。对于开发者而言，掌握该方法能显著提升代码的健壮性和可维护性。

延伸学习建议：

  • 探索 jQuery 的其他 DOM 操作方法（如 closest()、find()）。
  • 研究原生 JavaScript 的 Node 接口，理解底层实现逻辑。

希望本文能成为你掌握 jQuery.contains() 方法的实用指南！

最新发布

查看更多文章