$(document.body) 和 $('body') 之间的区别

Posted 2023-03-11

技术标签:

【中文标题】$(document.body) 和 $(\'body\') 之间的区别【英文标题】：Difference between $(document.body) and $('body')$(document.body) 和 $('body') 之间的区别 【发布时间】：2012-08-31 16:31:19 【问题描述】：

我是 jQuery 初学者，在浏览一些代码示例时发现：

$(document.body) 和 $('body')

这两者有什么区别吗？

【问题讨论】：

一个更快，但是考虑到在一个页面上调用的次数永远不会超过几次，两者之间的差异非常很小。 $(body) 不适用于.on('click'... 事件，而$(document.body) 和$(document) 都可以。上述说法是错误的，而且性能差异很小，大约 10% 支持 $(document.body)。你可以在这里查看比较sitepoint.com/jquery-body-on-document-on 【参考方案1】：

它们指的是同一个元素，不同之处在于当您说document.body 时，您将元素直接传递给jQuery。或者，当您传递字符串 'body' 时，jQuery selector engine 必须解释该字符串以找出它所指的元素。

在实践中，两者都可以完成工作。

如果您有兴趣，jQuery function 的文档中有更多信息。

【讨论】：

第一种说法并不完全正确。它们可能引用相同的元素。通常甚至。但不总是：）。请参阅下面的答案。【参考方案2】：

这里的答案实际上并不完全正确。关闭，但有一个极端情况。

不同的是$('body')实际上是通过标签名来选择元素，而document.body引用的是文档上的直接对象。

这意味着如果您（或恶意脚本）覆盖 document.body 元素（可耻！） $('body') 仍然可以工作，但 $(document.body) 不会。所以根据定义，它们是不等价的。

我大胆猜测还有其他极端情况（例如 IE 中的全局 id'ed 元素）也会触发相当于覆盖文档对象上的正文元素的情况，并且同样的情况也适用。

【讨论】：

我认为不可能将document.body 设置为<body> 以外的任何值：i.imgur.com/unJVwXy.png 现在可以解决了。曾经有一段时间，FF 和 IE 会让你这样做，和/或会对 ID 为“body”的项目感到困惑（我遇到的错误是客户在整形外科医生的网站上使用我们的脚本并带有图片标记ID“身体”）。希望不再是问题:)【参考方案3】：

在我的浏览器中进行测试时，我发现时间上有很大差异。

我使用了以下脚本：

警告：运行此程序会使您的浏览器冻结一点，甚至可能崩溃。

var n = 10000000, i;
i = n;
console.time('selector');
while (i --> 0)
    $("body");


console.timeEnd('selector');

i = n;
console.time('element');
while (i --> 0)
    $(document.body);


console.timeEnd('element');

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

我进行了 1000 万次交互，结果就是这些（Chrome 65）：

选择器：19591.97509765625ms 元素：4947.8759765625ms

直接传递元素比传递选择器快 4 倍左右。

【讨论】：

你只为“箭头符号”获得了投票，你这个厚脸皮的骗子！我在某处读到过这个，我想立即使用它 XD 是的，但是——你真的要这样做一千万次吗？为什么不在重要的地方进行这种分析呢？ @scrayne 这些性能测试与实际用例无关。在这样的元素上执行 1000 万次操作是非常罕见的。但是 OP 想知道区别，我注意到存在性能差异，所以我认为值得注意。 @Barbz_YHOOL 老实说？不。我只是出于研究目的这样做，但现实生活场景中的差异太小了。【参考方案4】：

$(document.body) 使用全局引用document 来获取对body 的引用，而$('body') 是一个选择器，jQuery 将在其中获取对document 上的<body> 元素的引用。

我看不出有什么大的区别，也没有任何明显的性能提升。

【讨论】：

$(document.body) 根据这篇文章明显更快：sitepoint.com/jquery-body-on-document-on【参考方案5】：

应该没有区别，也许第一个性能更高一些，但我认为这很微不足道（你不应该担心这个，真的）。

你将<body>标签包装在一个jQuery对象中

【讨论】：

【参考方案6】：

在输出上两者是等价的。尽管第二个表达式从 DOM 根目录进行了自上而下的查找。如果您手头已经有 document.body 对象供 JQuery 包装，您可能希望避免额外的开销（无论它可能多么微不足道）。见http://api.jquery.com/jQuery/ #Selector Context

【讨论】：

【参考方案7】：

今天在尝试制作 chrome 扩展示例时 https://developer.chrome.com/docs/extensions/mv3/getstarted/

我尝试过切换

document.body.style.backgroundColor = color;

有

$("body").css("background-color", "black");

当然要说我在html文件中添加了这个

<script src="script/jquery-3.6.0.min.js"></script>

结果是它不起作用。它不会改变页面的背景颜色，而这正是扩展的目的。

虽然有效的是，jQuery 仍然能够更改/操作“在”扩展弹出窗口中的元素。

【讨论】：

以上是关于$(document.body) 和 $('body') 之间的区别的主要内容，如果未能解决你的问题，请参考以下文章

获取滚动条的滚动距离（封装免邮）

$(document.body) 和 $('body') 之间的区别

document.documentElement和document.body区别介绍

document.documentElement和document.body区别

document.documentElement.clientHeight 和 document.body.clientHeight