我注意到,在监控/尝试回答常见的jQuery问题时,有一些实践使用javascript,而不是jQuery,实际上可以让你写得更少,做得更…同样的量。而且还可能带来性能上的好处。

具体例子

$(this) vs this

在引用已单击对象id的单击事件中

jQuery

$(this).attr("id");

Javascript

this.id;

还有其他类似的常见做法吗?某些Javascript操作可以更容易地完成,而不需要使用jQuery。或者这是一种罕见的情况?(jQuery的“快捷方式”实际上需要更多的代码)

编辑:虽然我很欣赏关于jQuery和纯javascript性能的答案,但实际上我正在寻找更多量化的答案。在使用jQuery时,使用纯javascript而不是使用$()会更好(可读性/紧凑性)的实例。除了我在最初的问题中给出的例子。


当前回答

第一个答案作为DOM元素的live属性列表相当完整。

你可能会觉得认识其他人也很有趣。

当这是文件时:

这一点。获取当前文档表单的HTMLCollection, 这一点。锚来获得一个HTMLCollection的所有HTMLAnchorElements与名称被设置, 这一点。链接来获得一个包含所有HTMLAnchorElements的HTMLCollection,并设置href, 这一点。image来获取一个包含所有HTMLImageElements的HTMLCollection 对于已弃用的applet,如this.applet,也是如此

当你处理文档的时候。表单、文档。forms[formNameOrId]获取如此命名或标识的表单。

当这是一个表单时:

this[inputNameOrId]获取如此命名或标识的字段

当这是表单字段时:

这一点。类型以获取字段类型

在学习jQuery选择器时,我们经常跳过学习已经存在的HTML元素属性,因为它们访问起来非常快。

其他回答

已经有了一个公认的答案,但我相信这里直接输入的答案不能在本机javascript方法/属性列表中全面地保证跨浏览器支持。为此,请允许我把你引向quirkmode

http://www.quirksmode.org/compatibility.html

它可能是关于在任何地方的任何浏览器上什么可以工作,什么不能工作的最全面的列表。请特别注意DOM部分。要读的东西很多,但重点不是全部读完,而是作为参考。

当我开始认真编写web应用程序时,我打印出了所有的DOM表,并把它们挂在墙上,这样我就能一眼知道哪些是安全的,哪些需要hack。这些天,当我有疑问时,我只是谷歌一些类似quirksmode parentNode兼容性的东西。

和其他事情一样,判断主要是一种经验。我不建议你阅读整个网站,记住所有的问题来弄清楚什么时候使用jQuery,什么时候使用纯JS。只是要注意这个列表。搜索起来很容易。随着时间的推移,你会发现什么时候纯JS更可取。


PS: PPK(网站的作者)也有一本非常好的书,我推荐你去读

这是我个人的观点,但无论如何jQuery是JavaScript,我认为理论上它不能比普通JS表现得更好。

但实际上,它可能比手工编写的JS执行得更好,因为手工编写的代码可能不如jQuery有效。

总之,对于较小的东西,我倾向于使用普通的JS,对于JS密集的项目,我喜欢使用jQuery,而不是重新发明轮子——它也更有效率。

其他人的回答集中在“jQuery vs.纯JS”这个宽泛的问题上。从你的OP来看,我认为你只是想知道如果你已经选择使用jQuery,什么时候使用普通JS更好。你的例子是一个完美的例子,当你应该使用香草JS:

$ (this) (.attr’id’);

既慢,(在我看来)可读性较差:

this.id。

它更慢,因为你必须旋转一个新的JS对象,只是为了用jQuery的方式检索属性。现在,如果你要使用$(this)来执行其他操作,那么无论如何,将jQuery对象存储在一个变量中并对其进行操作。但是,我遇到过很多只需要元素的属性(比如id或src)的情况。

还有其他常见的做法吗 像这样的吗?某些Javascript 可以完成操作 更简单,无需引入jQuery 混合。或者这是一种罕见的情况?( jQuery的“快捷方式”实际需要 更多的代码)

我认为最常见的情况是你在你的帖子中描述的;人们不必要地在jQuery对象中包装$(this)。我最常看到的是id和value(而不是使用$(this).val())。

编辑:这里有一篇文章解释了为什么在attr()情况下使用jQuery比较慢。坦白:从标签维基上偷来的,但我认为这个问题值得一提。

再次编辑:考虑到直接访问属性的可读性/性能影响,我认为一个好的经验法则可能是尝试使用它。如果可能,<attributename>。在某些情况下,由于浏览器不一致,这种方法可能不起作用,但如果它不起作用,最好先尝试这种方法,然后再求助于jQuery。

我发现JS和JQ之间确实有重叠。您所展示的代码就是一个很好的例子。坦率地说,使用JQ而不是JS的最佳理由仅仅是浏览器兼容性。我总是倾向于JQ,即使我能用JS完成一些事情。

有一个框架叫做。你猜怎么着?香草JS。希望你能听懂这个笑话……为了性能,它牺牲了代码的可读性。将它与jQuery进行比较,您可以看到通过ID检索DOM元素几乎快35倍。:)

因此,如果你想要性能,你最好尝试Vanilla JS,并得出自己的结论。也许你不会遇到JavaScript在像for循环这样的密集代码中挂起浏览器的GUI/锁定UI线程。

Vanilla JS是一个快速、轻量级、跨平台的框架 构建令人难以置信的强大JavaScript应用程序。

在他们的主页上有一些性能比较: