jQuery $(document.body) 和 $('body') 的区别
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/12307112/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Difference between $(document.body) and $('body')
提问by
I am a jQuery beginner and while going through some code examples I found:
我是 jQuery 初学者,在浏览一些代码示例时,我发现:
$(document.body)
and $('body')
$(document.body)
和 $('body')
Is there any difference between these two?
这两者有什么区别吗?
回答by Justin Ethier
They refer to the same element, the difference is that when you say document.body
you are passing the element directly to jQuery. Alternatively, when you pass the string 'body'
, the jQuery selector enginehas to interpret the string to figure out what element(s) it refers to.
它们指的是同一个元素,区别在于当你说document.body
你是直接将元素传递给 jQuery 时。或者,当您传递 string 时'body'
,jQuery 选择器引擎必须解释该字符串以找出它所指的元素。
In practice either will get the job done.
在实践中,两者都可以完成工作。
If you are interested, there is more information in the documentation for the jQuery function.
如果您有兴趣,可以在jQuery 函数的文档中找到更多信息。
回答by jvenema
The answers here are not actually completelycorrect. Close, but there's an edge case.
这里的答案实际上并不完全正确。关闭,但有一个边缘情况。
The difference is that $('body') actually selects the element by the tag name, whereas document.body references the direct object on the document.
不同之处在于 $('body') 实际上是通过标签名称选择元素,而 document.body 引用文档上的直接对象。
That means if you (or a rogue script) overwrites the document.body element (shame!) $('body') will still work, but $(document.body) will not. So by definition they're not equivalent.
这意味着如果您(或流氓脚本)覆盖了 document.body 元素(可耻!) $('body') 仍然有效,但 $(document.body) 不会。所以根据定义,它们不是等价的。
I'd venture to guess there are other edge cases (such as globally id'ed elements in IE) that would also trigger what amounts to an overwritten body element on the document object, and the same situation would apply.
我敢猜测还有其他边缘情况(例如 IE 中的全局 id 元素)也会触发文档对象上的覆盖正文元素,并且同样的情况也适用。
回答by Phiter
I have found a pretty big difference in timing when testing in my browser.
在我的浏览器中进行测试时,我发现时间上有很大的不同。
I used the following script:
我使用了以下脚本:
WARNING: running this will freeze your browser a bit, might even crash it.
警告:运行它会使您的浏览器冻结一点,甚至可能会使其崩溃。
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>
I did 10 million interactions, and those were the results (Chrome 65):
我进行了 1000 万次交互,结果如下(Chrome 65):
selector: 19591.97509765625ms
element: 4947.8759765625ms
选择器:19591.97509765625ms
元素:4947.8759765625ms
Passing the element directly is around 4 times faster than passing the selector.
直接传递元素比传递选择器快 4 倍左右。
回答by Gabe
$(document.body)
is using the global reference document
to get a reference to the body
, whereas $('body')
is a selector in which jQuery will get the reference to the <body>
element on the document
.
$(document.body)
使用全局引用document
来获取对 的引用body
,而$('body')
是一个选择器,jQuery 将在其中获取<body>
对document
.
No major difference that I can see, not any noticeable performance gain from one to the other.
我看不出有什么大的区别,从一个到另一个没有任何明显的性能提升。
回答by Nicola Peluchetti
There should be no difference at all maybe the first is a little more performant but i think it's trivial ( you shouldn't worry about this, really ).
应该没有任何区别,也许第一个性能更高一些,但我认为这很简单(你不应该担心这个,真的)。
With both you wrap the <body>
tag in a jQuery object
两者都将<body>
标签包装在 jQuery 对象中
回答by santon
Outputwise both are equivalent. Though the second expression goes through a top down lookup from the DOM root. You might want to avoid the additional overhead (however minuscule it may be) if you already have document.body object in hand for JQuery to wrap over. See http://api.jquery.com/jQuery/ #Selector Context
输出方面两者是等价的。尽管第二个表达式从 DOM 根进行了自上而下的查找。如果您手头已有 document.body 对象供 JQuery 包装,您可能希望避免额外的开销(无论它可能多么微不足道)。请参阅http://api.jquery.com/jQuery/ #Selector 上下文