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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 11:25:00  来源:igfitidea点击:

is there $(document).find('selector') and $('selector') difference

jquery

提问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")除非您使用的选择器来自不受信任的来源 - 稍后会详细介绍),并且有几个不使用的原因:

  1. It's longer to write and more awkward to read, inflating your script size

  2. It results in more memory churn (more temporary objects get created/destroyed)

  3. It's slower - http://jsperf.com/vs-document-find, http://jsperf.com/selector-vs-find-again

  1. 写的时间更长,读起来更尴尬,增加了你的脚本大小

  2. 它导致更多的内存流失(更多的临时对象被创建/销毁)

  3. 它更慢 - http://jsperf.com/vs-document-find, http://jsperf.com/selector-vs-find-again

enter image description here

在此处输入图片说明

However, if you have $(selector)where selectorcomes from an untrusted source, beware that jQuery sniffs the string and eitherdoes a selection orcreates new HTML elements. That is, $("div")looks for divs 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 scriptelement 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")寻找divs 但$("<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)两者都在文档中搜索选择器。