jQuery $(document).find('selector') 和 $('selector') 有区别吗
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/27502865/
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
is there $(document).find('selector') and $('selector') difference
提问by Olena Horal
I've started working on some project and in code I find combintions of $(document).find('selector') and $('selector'). I cant find any real reason why this is done. I there any significant differnece between those two so that they are used simultaneously in project? should I prefer one before another in some cases?
我已经开始研究一些项目,在代码中我找到了 $(document).find('selector') 和 $('selector') 的组合。我找不到这样做的任何真正原因。我这两者之间有什么显着区别,以便它们在项目中同时使用?在某些情况下,我应该先选择一个吗?
回答by T.J. Crowder
$(document).find("selector")
and $("selector")
will match the same set of elements.
$(document).find("selector")
并且$("selector")
将匹配相同的元素集。
There's no reason to use $(document).find("selector")
over just $("selector")
(unlessthe selector you're using comes from an untrusted source — more on that in a moment), and several reasons not to:
没有理由$(document).find("selector")
过度使用$("selector")
(除非您使用的选择器来自不受信任的来源 - 稍后会详细介绍),并且有几个不使用的原因:
It's longer to write and more awkward to read, inflating your script size
It results in more memory churn (more temporary objects get created/destroyed)
It's slower - http://jsperf.com/vs-document-find, http://jsperf.com/selector-vs-find-again
写的时间更长,读起来更尴尬,增加了你的脚本大小
它导致更多的内存流失(更多的临时对象被创建/销毁)
它更慢 - http://jsperf.com/vs-document-find, http://jsperf.com/selector-vs-find-again
However, if you have $(selector)
where selector
comes from an untrusted source, beware that jQuery sniffs the string and eitherdoes a selection orcreates new HTML elements. That is, $("div")
looks for div
s but $("<div>")
createsa div. If the text you're using comes from an untrusted source, it could be <script src='http://example.com/path/to/malicious/script.js>
. Now, in and of itself that wouldn't be a problem, but if the resulting script
element is added to a document (for instance, $(selector).appendTo(document.body)
), suddenly it's an XSS attackvector. Likely? No, if you're selectingyou aren't that likely to then append (though you might, if you're moving elements). But if the selector comes from an untrusted source, $(document).find(selector)
ensures that the text is onlyused as a selector, not as an HTML string. Or, on a modern browser, $(document.querySelectorAll(selector))
(but you can't use jQuery's extensions to selectors that way).
但是,如果你有$(selector)
其中selector
来自不受信任的来源是,提防jQuery的嗅着字符串,要么做一个选择或创建新的HTML元素。也就是说,$("div")
寻找div
s 但$("<div>")
创建了一个 div。如果您使用的文本来自不受信任的来源,则可能是<script src='http://example.com/path/to/malicious/script.js>
. 现在,就其本身而言,这不是问题,但如果将结果script
元素添加到文档(例如,$(selector).appendTo(document.body)
),它会突然成为XSS 攻击向量。可能吗?不,如果您正在选择,则不太可能追加(尽管您可能会,如果您正在移动元素)。但是如果选择器来自不受信任的来源,$(document).find(selector)
确保文本仅用作选择器,而不用作 HTML 字符串。或者,在现代浏览器上,$(document.querySelectorAll(selector))
(但您不能以这种方式使用 jQuery 的选择器扩展)。
回答by Frédéric Hamidi
They're functionally equivalent. There is no difference in behavior between $("selector")
, $(document).find("selector")
and $("selector", document)
.
它们在功能上是等效的。有介于两者之间的行为没有什么区别$("selector")
,$(document).find("selector")
和$("selector", document)
。
As for performance, some of the variants may be slightly slower than the others (since these methods are implemented in terms of the others). This is, however, an implementation detail and is subject to change between releases. Benchmarking a specific release would tell for sure.
至于性能,某些变体可能比其他变体稍慢(因为这些方法是根据其他方法实现的)。然而,这是一个实现细节,可能会在不同版本之间发生变化。对特定版本进行基准测试肯定会说明问题。
回答by sifr_dot_in
Exact answer to the question is 'yes there is difference between both' even though both do the same job of pointing / selecting the element.
该问题的确切答案是“是的,两者之间存在差异”,即使两者都执行指向/选择元素的相同工作。
When document is loaded, jQuery scope gets defined. Thus usually $('selector') is used to point the element.
加载文档时,jQuery 范围被定义。因此通常 $('selector') 用于指向元素。
But what if elements are added after this scope is defined. I.e. If elements are loaded through ajax call. jQuery can't find these elements. Thus to point to such elements we use alternative function $('scope').find('selector').
但是如果在定义此范围之后添加元素会怎样。即如果元素是通过 ajax 调用加载的。jQuery 找不到这些元素。因此,为了指向这些元素,我们使用替代函数 $('scope').find('selector')。
Best-practice: if you don't add elements after document is loaded. Don't use "$('scope').find('selector')" method. As the given name will be considered as criteria and according to the find function, every element will be checked to match the criteria which will consume more time and will demand more resource than directly pointing method.
最佳实践:如果在加载文档后不添加元素。不要使用“$('scope').find('selector')”方法。由于给定的名称将被视为标准,并且根据 find 函数,将检查每个元素以匹配标准,这将比直接指向方法消耗更多时间并需要更多资源。
回答by Sameera Thilakasiri
$(document).find(selector)
and $(selector)
both are searching the selector in the document.
$(document).find(selector)
并且$(selector)
两者都在文档中搜索选择器。