jQuery is()方法：检测元素是否匹配指定条件-代码号

在 jQuery 的遍历过滤体系中，is() 是一个不返回元素、只返回布尔值的方法。它的职责是检测当前元素中是否存在至少一个元素满足给定的条件——可以是 CSS 选择器、DOM 元素、jQuery 对象，或者一个测试函数。有匹配就返回 true，没有则返回 false。

与 filter() 不同，is() 不创建新的 jQuery 对象，也不修改原有。它只是纯粹的条件判断工具，这一点让它特别适合用在 if 语句、事件回调中的逻辑分叉等场景。

为什么在事件委托和条件判断中我会优先选 is() 而不是其他方法？

在事件处理函数内部，this 指向触发事件的元素。当你需要判断这个元素是否属于某个特定类型、是否拥有某个类名、是否匹配某个选择器时，$(this).is(selector) 是最直接、最语义化的写法。与 $(this).hasClass() 相比，is() 还能同时判断标签类型、属性值甚至复杂的选择器组合，灵活性明显更高。

语法

$(selector).is(selectorElement, function(index, element))

参数说明：

selectorElement（必需）：用于匹配的参照物。可以是一个 CSS 选择器字符串、一个 DOM 元素对象，或一个 jQuery 对象。
function(index, element)（可选）：一个测试函数，会对中每个元素执行一次。函数返回 true 表示该元素匹配，一旦有任一元素匹配，is() 就整体返回 true。函数接收两个参数：index 是当前元素在中的索引，element 是当前 DOM 元素（在函数内也可以使用 this 引用同一元素）。

课程知识要点

返回布尔值：is() 只返回 true 或 false，不产生新的 jQuery 对象，不能链式调用其他 DOM 操作方法。
至少一个匹配即为 true：只要中有任意一个元素满足条件，is() 就返回 true，这与 filter() 等方法的“收集所有匹配项”逻辑不同。
适合事件回调：在点击、悬停等事件处理函数中，用 is() 快速判断触发元素的身份或状态是常见用法。
可接受函数参数：当判断逻辑较复杂时，传入测试函数可以让代码保持清晰，而不用在外部预先计算条件值。
与 hasClass() 的选择：hasClass() 只能检测类名，is() 可以检测类名、标签、属性、伪类选择器等任意选择器表达式，适用面更广。

示例一：在事件处理中判断触发元素的身份

这个例子模拟了一个常见的交互场景：页面上有三个可点击的标签，每个都有独特的 id。点击时通过 is() 判断用户点的是哪一个，然后给出不同的反馈样式。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>is() 判断元素身份 · 编程学习</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("span.tag-item").click(function () {
                // 通过 is() 判断被点击元素的 id
                if ($(this).is("#tag-html")) {
                    $(this).text("已选中：HTML")
                        .css({ "background-color": "#fff3cd", "font-size": "20px" });
                } else if ($(this).is("#tag-css")) {
                    $(this).text("已选中：CSS")
                        .css({ "background-color": "#ffe0b2", "font-size": "20px" });
                } else if ($(this).is("#tag-js")) {
                    $(this).text("已选中：JavaScript")
                        .css({ "background-color": "#b3e5fc", "font-size": "20px" });
                }
            });
        });
    </script>
    <style>
        span.tag-item {
            display: inline-block;
            padding: 8px 16px;
            margin: 6px;
            cursor: pointer;
            border: 1px solid #666;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <h3>jQuery is() 方法——识别被点击的元素</h3>
    <p>点击下面的标签查看效果：</p>
    <span id="tag-html" class="tag-item">HTML</span>
    <span id="tag-css" class="tag-item">CSS</span>
    <span id="tag-js" class="tag-item">JavaScript</span>
</body>
</html>

每个 span 初始都显示为“未选中”状态，点击后 is() 判断出它的身份，对应的文本和背景色随之变化。这种模式在选项卡、标签切换等组件中很常见。

示例二：检测元素之间的 DOM 层级关系

is() 也能用来判断元素与选择器之间的结构关系。下面的例子中，点击 span 元素时会检测它是否是 p 元素的直接子元素，如果是则弹出提示。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>is() 检测层级关系 · 编程学习</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("span").click(function () {
                // 先获取 p 的所有直接子元素，再用 is() 检测其中是否有 span
                if ($("p").children().is("span")) {
                    alert("检测结果：span 是 p 元素的直接子元素");
                }
            });
        });
    </script>
</head>
<body>
    <h3>jQuery is() 方法——检测 DOM 层级关系</h3>
    <p>点击下方红色边框内的文字：</p>
    <p style="border: 2px solid #d93025; padding: 12px;">
        <span>点我检测关系</span>
    </p>
</body>
</html>

这里 $("p").children() 获取了 p 的所有直接子元素（是一个 jQuery 对象），然后 is("span") 在这个里检查是否有匹配 span 的元素。只要能找到至少一个，就返回 true 并触发弹窗。

个人经验与实用建议

在开发中，is() 被我使用频次较高的场景是事件委托中的目标校验。当你用 $(document).on('click', '.list-item', handler) 做委托绑定，但 .list-item 内部还嵌套了其他可点击的子元素时，e.target 可能是子元素而非你绑定的那个。这时在回调里用 $(e.target).is('.list-item') 做一次校验，可以过滤掉不期望的事件源，保证逻辑只在你关注的目标上执行。

is() 支持传入函数参数这一特性虽然冷门，但在某些复杂条件判断中很实用。比如你需要判断元素中是否存在“文本长度超过 20 个字符且包含特定关键词”的项，用函数传入可以将这些复合条件写在一起，避免在外部做额外的筛选步骤。

注意一点：is() 判断的是 jQuery 对象中“至少有一个”满足条件，而不是“全部满足”。如果你需要验证中每个元素都匹配某个条件，应该用 filter() 筛选后再比对长度，或者用 not() 检查是否一个都不剩。这两个方向用错会直接导致逻辑判断结果出现偏差。

本文标签：

jQuery is()方法：检测元素是否匹配指定条件

语法

课程知识要点

示例一：在事件处理中判断触发元素的身份

示例二：检测元素之间的 DOM 层级关系

个人经验与实用建议

感谢您的认可和支持