javascript - 我真的需要使用 jQuery 检查元素是否存在吗？

Question

我最近有一个关于如何使用 jQuery 正确检查元素是否存在的问题。我从这里找到了答案:

https://learn.jquery.com/using-jquery-core/faq/how-do-i-test-whether-an-element-exists/

总结:

if ( $( "#myDiv" ).length ) {
    // Do something
}

和我一起工作的一个人说正确的检查方法应该是:

if ($( "#myDiv" ) && $( "#myDiv" ).length ) {
    // Do something
}

重要吗？我的意思是从性能或延迟方面来看，它们的性能是否相同？

还有:

$( "#myDiv" ).show();
$( "#myDiv" ).hide();
$( "#myDiv" ).val('');

在这些类型的 jQuery 函数中，似乎不需要 if 检查，因为如果 #myDiv 不存在，它们不会引发错误，对吗？

为了它的值(value)，我使用的是 jQuery 1.6.4。

Answer 1

One guy I work with says the correct way to check should be:

if ($( "#myDiv" ) && $( "#myDiv" ).length ) {
    //do something
}

他错了，至少在 $( "#myDiv") && 部分是这样。 jQuery 的 $(selector) always 返回一个对象，根据定义它是真实的。所以那部分是没有意义的，并且无缘无故地重新查询 DOM。

I mean from a performance or latency wise, do they perform the same?

无缘无故地重新查询 DOM 是一种浪费，但大多数时候它在任何可观察的方面都无关紧要，尤其是对于像 $("#myDiv") 这样的 ID 选择器 由 jQuery 优化为对 getElementById 的调用(速度非常快)。所以一方面，是的，这是浪费额外的工作。另一方面，如今的浏览器速度如此之快，以至于您可能有更大的鱼要炸。但这可能是额外的无意义代码，这是更大的问题。

总的来说:jQuery 是基于集合的。这意味着对其中没有元素的集合的操作是空操作。例如:

$(".foo").addClass("bar");

...如果 DOM 中没有 .foo 元素，则为空操作(不是错误)。

因此，如果您关心是否匹配元素，请检查length。如果您不关心并且只想对它们执行操作如果它们在那里，请继续执行操作(有一个重要的警告¹)。

基本上，有三种情况:

1. 你知道元素会在那里，所以检查没有意义
   => 不检查

2. 您不知道元素会在那里，但您不关心并且只想对它们进行操作如果它们在那里
   => 不检查

3. 您关心这些元素是否出于其他原因
   => 进行检查

---

¹ 这里有一个重要的警告:如果您调用的 jQuery 函数返回的不是 jQuery 对象(例如，val() 或 offset() 或 position() 等)，当您在空集上调用它时，它通常会返回 undefined(异常(exception)情况是 text()，它将返回 "" [text() 在几个方面不像其他的；这是其中之一])。因此，编写天真地假定这些东西会返回您所期望的内容的代码，即使集合为空，也会对您不利。

例如:

if ($(".foo").offset().top > 20)

...如果没有.foo元素会抛出一个错误，因为offset()会返回undefined，而不是一个对象.

但这很好:

$(".foo").closest(".bar").toggleClass("baz"):

...因为即使没有 .foo，closest() 也会返回另一个空的 jQuery 集，并调用 toggleClass() 上面是空操作。

因此，当处理不返回 jQuery 对象的访问器时，如果您不确定您正在处理一个至少包含一个元素的集合，您需要更多的防御措施，例如:

var offset = $(".foo").offset();
if (offset && offset.top > 20)

同样，大多数访问器(不返回 jQuery 对象)都这样做，包括 val()、offset()、position(), css(), ...