为什么 jQuery 中没有 exists() 以及如何无错误地检查元素

为什么 jQuery 中没有 exists() 以及如何避免破坏你的代码

每个至少写过一次 jQuery 的人都会遇到这种情况：你试图访问一个页面上不存在的元素，然后收到错误，脚本崩溃，用户看到空白屏幕。自然而然会问：“jQuery 中是否有 exists() 函数？”

这个问题在 Stack Overflow 上非常热门（超过 15 万次浏览）。答案可能会让你惊讶：不，jQuery 中没有内置的 exists() 方法。但这并非缺陷，而是一个特性。在本文中，我们将探讨为什么会这样，新手（以及不仅仅是新手）会犯哪些错误，以及如何正确地检查元素是否存在。开始吧！

简短回答：“长度”就是一切

检查页面上元素是否存在的最简单、最正确的方法是使用 length 属性。如果 jQuery 对象包含至少一个元素，length 将大于零，在布尔上下文中为 true。

if ($('#my-element').length) {\n    // 元素存在——可以操作\n    $('#my-element').show();\n} else {\n    // 元素不存在——什么也不做\n    console.log('未找到元素');\n}

为什么这样有效？jQuery 返回一个类似数组的对象。如果选择器没有找到任何内容，该对象的长度为 0。在 JavaScript 中，0 是 false。

还可以写得更短：

if ($('#my-element').length > 0) {\n    // 同样有效，但有些冗余\n}

检查 jQuery 元素存在性的前 5 个错误

错误 #1：直接访问不存在的元素

最常见且最危险的错误——尝试在空的 jQuery 对象上调用方法：

// 会报错的代码\n$('#nonexistent').text('你好！');

实际上，这段代码不会报错。jQuery 的设计使得在空对象上调用方法什么也不做。但问题在于：如果你试图获取值，例如 .val()，你会得到 undefined。而如果你试图通过索引访问 DOM 元素——你会得到 Cannot read properties of undefined 错误。

// 而这已经危险了！\nvar text = $('#nonexistent').text(); // 返回空字符串\nvar value = $('#nonexistent').val(); // 返回 undefined\n\n// 而这——是必然的错误\nvar firstClass = $('#nonexistent')[0].className; // TypeError!

错误 #2：使用 $(selector).size()

以前 jQuery 中有 .size() 方法，它返回元素的数量。它在 jQuery 1.8 中已被弃用，并在 3.0 版本中完全移除。现在使用它是不良习惯，并存在兼容性风险。

// 不好（过时的代码）\nif ($('.my-class').size() > 0) { ... }\n\n// 好（现代方法）\nif ($('.my-class').length) { ... }

错误 #3：混淆 .is() 和过滤

.is() 方法检查当前元素是否匹配选择器。它根本不检查元素是否存在，而是对已找到的元素进行操作。新手经常写出类似这样的代码：

// 不正确：.is() 不能替代存在性检查\nif ($('#my-element').is('*')) {\n    // 元素存在？\n}

这虽然有效，但看起来奇怪且效率低下。.is('*') 只是检查元素是否是任何标签。如果元素存在——返回 true，如果不存在——返回 false。但既然有 .length，何必这么复杂？

错误 #4：通过 document.getElementById 检查

一些开发者在不需要时混合使用纯 JavaScript 和 jQuery：

// 冗余且不优雅\nif (document.getElementById('my-element')) {\n    $('#my-element').addClass('acti