jQuery.is() 方法用于检测当前匹配元素集合中是否存在至少一个元素满足给定的选择器、元素或函数条件。它返回一个布尔值，true 表示集合中存在匹配项，false 表示没有任何元素匹配。这个方法在事件处理、表单验证、动态样式控制等场景中非常实用，因为它能快速回答“这个元素是否处于某种状态”或者“是否属于某一类元素”。与直接使用选择器查找元素不同，is() 不会修改集合本身，也不会创建新的 jQuery 对象，它只做纯粹的判断。
jQuery.is() 的语法形式为 jQueryObject.is(selector)，其中 selector 可以是CSS选择器字符串、DOM元素、jQuery对象，甚至是一个回调函数。回调函数会接收两个参数：当前元素在集合中的索引和当前元素本身，函数返回 true 或 false 来决定该元素是否被计入匹配。需要注意的是，is() 检测的对象是调用它的 jQuery 集合，而不是整个文档。如果你用 $(document).is("div")，它只会检查 document 元素本身是否是 div，结果显然是 false。因此在使用前要确保 jQuery 集合包含了目标元素。
基本用法：判断选择器匹配
最常见的使用场景是检查某个元素是否匹配特定的 CSS 选择器。比如我们希望知道一个按钮是否具有 “active” 类，可以写成 $("#myButton").is(".active")。如果按钮当前包含 active 类，返回 true；否则返回 false。这比传统的 $("#myButton").hasClass("active") 更加灵活，因为 is() 不仅支持类选择器，还支持属性选择器、伪类选择器、复合选择器等。
举个例子，假设页面上有一个复选框，我们需要判断它是否被选中。可以使用 $("#agree").is(":checked")，这比读取 prop("checked") 更直观，而且代码可读性更好。再比如判断一个输入框是否处于禁用状态，可以使用 $("#email").is(":disabled")。jQuery 内部会将传入的选择器交给 Sizzle 引擎处理，因此所有有效的 CSS 选择器都可以直接使用。
// 判断ID为btn的元素是否包含highlight类
if ($("#btn").is(".highlight")) {
console.log("按钮处于高亮状态");
}
// 判断复选框是否被勾选
if ($("#agree").is(":checked")) {
console.log("用户已同意协议");
}
// 复合选择器：判断div同时具有class为panel并且是可见的
if ($("div").is(".panel:visible")) {
console.log("存在可见的panel面板");
}
使用 is() 时要注意，它只判断集合中是否有任意元素匹配，而不是所有元素都匹配。如果你有一个包含多个元素的 jQuery 对象，只要其中一个满足条件，is() 就会返回 true。如果需要确保所有元素都匹配，可以结合 filter() 的长度比较，或者使用 every() 思路进行循环判断。
判断元素自身的状态与类型
除了选择器，is() 还接受 DOM 元素或 jQuery 对象作为参数。这种方式常用于判断两个元素是否相同，或者判断某个元素是否属于某类标签名。例如 $("#target").is($("#source")) 可以判断两个元素是否是同一个 DOM 节点。如果传入的是一个 jQuery 对象，jQuery 会比较对象中的元素是否出现在当前集合中。
标签名判断也很常见，因为 CSS 选择器中标签名选择器可以直接使用，如 $("#target").is("div") 会检查该元素是否为 div 标签。这种写法比 $("#target").prop("tagName") === "DIV" 更简洁，并且不区分大小写（jQuery 内部会统一处理）。对于 HTML5 新增的元素类型，is("input") 可以判断是否为输入框，但更精确的类型判断可以使用属性选择器，如 $("#target").is("input[type='text']")。
// 判断元素是否为div标签
var elem = document.getElementById("content");
if ($(elem).is("div")) {
console.log("这是一个div元素");
}
// 判断两个变量是否指向同一个DOM元素
var a = $("#list li:first");
var b = $("#list li").first();
if (a.is(b)) {
console.log("a和b指向同一个元素");
}
// 判断元素是否具有某个属性
if ($("#link").is("[data-toggle]")) {
console.log("链接包含data-toggle属性");
}
使用函数作为参数可以让判断逻辑更加动态。回调函数接收索引和当前元素，返回布尔值。例如我们想判断集合中是否存在文本内容长度超过 10 的元素，可以这样写：$("p").is(function(index, element) { return $(element).text().length > 10; })。这种用法虽然不如直接选择器高效，但在复杂条件判断时非常有用，可以避免预先构建复杂的选择器字符串。
与 filter()、hasClass() 的区别与选择
jQuery 提供了多个方法用于元素筛选，is()、filter() 和 hasClass() 经常被混淆。hasClass() 只能判断类名，且只能传入单个类名字符串，不能使用复合选择器。例如 $element.hasClass("active") 只能检查一个类是否存在，而 $element.is(".active.highlight") 可以检查多个类是否同时存在。因此当判断条件涉及多个类或属性时，is() 是更好的选择。
filter() 方法会返回一个新的 jQuery 对象，包含所有匹配的元素；而 is() 只返回布尔值，不生成新对象。如果后续还需要对匹配的元素进行操作，应该使用 filter()；如果只是作为条件判断，使用 is() 可以避免创建不必要的对象，提高性能。例如在事件处理中，如果只想根据结果改变一个标志位，用 is() 就很合适。下面是一个对比示例：
// 使用filter：会返回一个新的jQuery对象
var visiblePanels = $(".panel").filter(":visible");
if (visiblePanels.length > 0) {
// 如果存在可见面板，可以对它们进行操作
visiblePanels.addClass("highlight");
}
// 使用is：只返回布尔值，适合条件判断
if ($(".panel").is(":visible")) {
console.log("至少有一个面板可见");
}
在实际开发中，如果只需要知道“有没有”或者“是否”这样的二元结果，优先使用 is()。它的语义更明确，代码更紧凑。同时 is() 还可以配合 jQuery 的链式调用，例如 if ($("#form input").is(":focus")) { ... }，用来判断当前是否有输入框获得焦点。另外注意，is() 在 jQuery 3.x 中仍然保留，但 jQuery 团队鼓励使用原生 JavaScript 的 matches() 方法替代，但在需要兼容旧项目或统一语法的情况下，jQuery 的 is() 依然非常方便。
常见误区与实战建议
一个常见的误区是认为 is() 会在整个文档中查找元素，实际上它只检测调用它的 jQuery 集合。比如代码 $("body").is("div") 返回 false，因为 body 元素本身不是 div。若要判断 body 内是否存在 div，应该使用 $("body").find("div").length > 0 或者 $("body div").length > 0。另一个误区是传入多个条件时，is() 只支持一个选择器参数，如果需要同时满足多个条件，可以将它们组合成一个字符串，例如 is(".active:visible")，而不是 is(".active", ":visible")。
对于动态变化的 UI 状态，is() 可以放在定时器或事件回调中频繁调用，但建议缓存 jQuery 对象以避免重复查询 DOM。例如在滚动事件中判断某个元素是否进入视口，可以先缓存 var $target = $("#target")，然后在滚动处理函数中调用 $target.is(":visible")。此外，is() 对隐藏元素的判断与 CSS 的 :visible 伪类一致，它基于元素的宽高和 display 属性，因此对于父元素隐藏的情况也能正确判断。
最后，虽然 jQuery 正在逐渐被现代前端框架取代，但在维护大量历史项目时，掌握 is() 的精髓仍然能显著提升代码可读性。把 is() 用在条件分支的“决策点”上，让每个 if 语句都表达一个明确的业务状态，而不是一堆繁琐的属性比较。这样写出来的代码既符合直觉，也方便后来者理解你的意图。
jQuery.is()选择器匹配DOM元素修改时间：2026-10-06 17:07:04