112

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

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

这两者有什么区别吗？

4

7 回答 7

82

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

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

如果您有兴趣，请参阅jQuery 函数的文档中的更多信息。

于 2012-09-06T19:36:45.180 回答
18

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

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

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

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

于 2016-02-03T16:19:49.003 回答
15

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

我使用了以下脚本：

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

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 倍左右。

于 2018-03-23T12:43:17.823 回答
9

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

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

于 2012-09-06T19:36:15.593 回答
7

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

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

于 2012-09-06T19:35:54.063 回答
3

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

于 2012-09-06T19:55:32.763 回答
0

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

我试图切换

document.body.style.backgroundColor = color;

和

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

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

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

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

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

于 2021-09-24T18:59:27.780 回答