$（document.body）和$（'body'）之间的区别

104

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

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

两者之间有什么区别吗？

jquery document document-body

— Ashleedawg
source

1

一个是快，但考虑到会不会被调用超过几次在单页上，两者之间的差别是非常小的。

— 凯文

$(body)不适用于.on('click'...事件，而$(document.body)和$(document)两者都适用。

— rybo111

3

上面的陈述是错误的，并且性能也有很小的差别，赞成$（document.body）大约有10％。您可以在此处查看比较sitepoint.com/jquery-body-on-document-on

— Sigismund

76

它们指的是同一元素，不同之处在于，当您说document.body要直接将元素传递给jQuery时。或者，当您传递字符串时'body'，jQuery选择器引擎必须解释字符串以弄清楚它所指的是什么元素。

在实践中，任一个都可以完成工作。

如果您有兴趣，可以在jQuery函数的文档中找到更多信息。

— 贾斯汀·埃斯蒂尔
source

1

第一个陈述并不完全正确。它们可能引用相同的元素。通常甚至。但不总是：）。请参阅下面的答案。

— jvenema

18

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

区别在于$（'body'）实际上是通过标签名称选择元素的，而document.body则引用文档上的直接对象。

这意味着，如果您（或流氓脚本）覆盖document.body元素（可耻！），$（'body'）仍然有效，但$（document.body）无效。因此，根据定义，它们并不等效。

我冒险猜测还有其他一些极端情况（例如IE中的全局id元素）也将触发等于文档对象上的body元素的情况，并且将适用相同的情况。

— 静脉曲张
source

我认为document.body除了a 之外<body>

— 别无

现在可以解决。曾经有一段时间FF和IE会允许您这样做，并且/或者会被ID为“ body”的项目所迷惑（我遇到的错误是客户在整形外科医生的网站上使用我们的脚本并带有标有“ id“ body”）。希望不再是一个问题:)

— jvenema

12

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

我使用以下脚本：

警告：运行此命令会使您的浏览器停滞不前，甚至可能使其崩溃。

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');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

展开摘要

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

选择器：19591.97509765625ms
元素：4947.8759765625ms

直接通过元素比通过选择器快约4倍。

— 菲特
source

7

您只为“箭头符号”而投票，您厚脸皮的家伙！

— KlaymenDK '18

1

我在某处读到此内容，并想立即使用它XD

— Phiter

是的，但是-您真的要这样做一千万次吗？为什么不进行这种分析？

— scrayne

@scrayne这些性能测试与实际用例无关。在这样的元素上执行1000万次操作非常罕见。但是OP希望了解差异，并且我注意到性能存在差异，因此我认为这是值得注意的。

— Phiter

9

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

我看不到任何重大差异，彼此之间没有明显的性能提升。

— 加布
source

9

$(document.body)根据这篇文章，它的测量速度更快：sitepoint.com/jquery-body-on-document-on

— 史蒂夫·哈里森

6

完全没有区别，也许第一个是性能更高的，但是我认为这是微不足道的（您真的不必为此担心）。

两者都将<body>标签包装在jQuery对象中

— 尼古拉·佩鲁切蒂（Nicola Peluchetti）
source

3

从输出角度看，两者都是等效的。尽管第二个表达式从DOM根开始进行自上而下的查找。如果您已经准备好将JQuery包起来的document.body对象，那么您可能希望避免额外的开销（不过可能很小）。参见http://api.jquery.com/jQuery/ #Selector上下文

— 桑顿
source