为什么 $("body") == $("body") 的结果是 false？-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常会使用 jQuery 来操作文档对象模型（DOM）。但是，有一个很奇怪的问题：为什么 $("body") == $("body") 的结果是 false？

原因

这个问题的原因是 jQuery 返回的每个对象都是一个新实例。也就是说，虽然两个选择器表达式可能会选中相同的元素，但它们并不“相等”。

这是因为 jQuery 在创建新对象时，内部会调用构造函数 jQuery.fn.init（或者简写为 jQuery）来生成一个新对象。每次调用 $() 都会返回一个新的 jQuery 对象。即使它们具有相同的选择器表达式，它们也是不同的实例。

让我们来看一个例子：

var body1 = $("body");
var body2 = $("body");

console.log(body1 === body2); // false

上面代码中，我们先后两次使用选择器表达式 $("body") 来获取页面的 <body> 元素。然而，尽管它们选择了同一个元素，但两个 jQuery 对象并不相同。

那么，如何比较两个 jQuery 对象是否选择了相同的元素呢？可以使用 .is() 方法来判断两个对象所选的元素是否相同：

var body1 = $("body");
var body2 = $("body");

console.log(body1.is(body2)); // true

这里，body1.is(body2) 返回的是一个布尔型值，表示 body1 所选的元素是否与 body2 所选的元素相同。

还有一种方法是使用 .get() 方法获取对象中的 DOM 元素，然后比较它们。注意，这种方法只能用于选择单个元素的情况：

var body1 = $("body").get(0);
var body2 = $("body").get(0);

console.log(body1 === body2); // true

上面代码中，我们使用 .get(0) 获取了 <body> 元素的 DOM 对象，然后比较了它们是否相同。

虽然在实际开发中很少需要直接比较两个 jQuery 对象是否相等，但了解它们为什么不相等确实可以帮助我们更好地理解 JavaScript 中的对象比较和实例化的概念。

同时，在日常开发中，我们应该尽可能地减少创建多余的 jQuery 对象。如果需要多次使用某个选择器表达式选择的元素，可以先将其存储到变量中，而不是每次调用 $() 都生成一个新的对象。这不仅可以提高代码的性能，还可以让代码更加易读、易维护。

希望这篇文章能够帮助你理解和解决这个奇怪的问题。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/27533