我注意到，在监控/尝试回答常见的jQuery问题时，有一些实践使用javascript，而不是jQuery，实际上可以让你写得更少，做得更…同样的量。而且还可能带来性能上的好处。
具体例子
$(this) vs this
在引用已单击对象id的单击事件中
jQuery
$(this).attr("id");
Javascript
this.id;
还有其他类似的常见做法吗?某些Javascript操作可以更容易地完成，而不需要使用jQuery。或者这是一种罕见的情况?(jQuery的“快捷方式”实际上需要更多的代码)
编辑:虽然我很欣赏关于jQuery和纯javascript性能的答案，但实际上我正在寻找更多量化的答案。在使用jQuery时，使用纯javascript而不是使用$()会更好(可读性/紧凑性)的实例。除了我在最初的问题中给出的例子。
当前回答
如果您最关心的是性能，那么您的主要示例就一针见血了。在我看来，不必要或冗余地调用jQuery是导致性能变慢的第二个主要原因(第一个原因是DOM遍历不好)。
这并不是你真正想要的例子，但我经常看到这样的例子，所以值得一提:加快jQuery脚本性能的最佳方法之一是缓存jQuery对象，和/或使用链接:
// poor
$(this).animate({'opacity':'0'}, function() { $(this).remove(); });
// excellent
var element = $(this);
element.animate({'opacity':'0'}, function() { element.remove(); });
// poor
$('.something').load('url');
$('.something').show();
// excellent
var something = $('#container').children('p.something');
something.load('url').show();
其他回答
正确的答案是，当使用jQuery而不是“普通的”原生JavaScript时，您总是会受到性能损失。这是因为jQuery是一个JavaScript库。它不是什么花哨的JavaScript新版本。
jQuery强大的原因在于，它使一些在跨浏览器情况下过于繁琐的事情变得简单(AJAX就是最好的例子之一)，并平滑了无数可用浏览器之间的不一致性，并提供了一致的API。它还很容易促进链接、隐含迭代等概念，以简化一起处理元素组的工作。
学习jQuery不能代替学习JavaScript。你应该对后者有一个坚实的基础，这样你才能充分体会到了解前者会让你更容易。
-编辑以包含评论-
As the comments are quick to point out (and I agree with 100%) the statements above refer to benchmarking code. A 'native' JavaScript solution (assuming it is well written) will outperform a jQuery solution that accomplishes the same thing in nearly every case (I'd love to see an example otherwise). jQuery does speed up development time, which is a significant benefit which I do not mean to downplay. It facilitates easy to read, easy to follow code, which is more than some developers are capable of creating on their own.
在我看来，答案取决于你想要达到的目标。如果正如我根据您对性能好处的参考所推测的那样，您希望获得应用程序的最佳运行速度，那么每次调用$()时使用jQuery都会带来开销。如果你追求可读性、一致性、跨浏览器兼容性等等，那么肯定有理由支持jQuery而不是“原生”JavaScript。
当:
您知道对于您正在做的事情，有坚定的跨浏览器支持 它并不是要输入更多的代码，而且 它的可读性并没有明显降低，而且 你有理由相信jQuery不会根据浏览器选择不同的实现来获得更好的性能，那么:
使用JavaScript。否则使用jQuery(如果可以的话)。
编辑:这个答案既适用于选择使用jQuery整体还是不使用它，也适用于选择是否在jQuery内部使用香草JS。在attr('id')和.id之间选择倾向于JS，而在removeClass('foo')和. classname = . classname之间选择。替换(新Regexp(“(?:^ | \ \ s +)”+ foo +”(?:\ \ s + | $)”,“g”),”)倾向于支持jQuery。
如果您最关心的是性能，那么您的主要示例就一针见血了。在我看来，不必要或冗余地调用jQuery是导致性能变慢的第二个主要原因(第一个原因是DOM遍历不好)。
这并不是你真正想要的例子，但我经常看到这样的例子，所以值得一提:加快jQuery脚本性能的最佳方法之一是缓存jQuery对象，和/或使用链接:
// poor
$(this).animate({'opacity':'0'}, function() { $(this).remove(); });
// excellent
var element = $(this);
element.animate({'opacity':'0'}, function() { element.remove(); });
// poor
$('.something').load('url');
$('.something').show();
// excellent
var something = $('#container').children('p.something');
something.load('url').show();
$(this)与this不同:
通过使用$(this)，可以确保jQuery原型被传递到对象上。
第一个答案作为DOM元素的live属性列表相当完整。
你可能会觉得认识其他人也很有趣。
当这是文件时:
这一点。获取当前文档表单的HTMLCollection， 这一点。锚来获得一个HTMLCollection的所有HTMLAnchorElements与名称被设置， 这一点。链接来获得一个包含所有HTMLAnchorElements的HTMLCollection，并设置href， 这一点。image来获取一个包含所有HTMLImageElements的HTMLCollection 对于已弃用的applet，如this.applet，也是如此
当你处理文档的时候。表单、文档。forms[formNameOrId]获取如此命名或标识的表单。
当这是一个表单时:
this[inputNameOrId]获取如此命名或标识的字段
当这是表单字段时:
这一点。类型以获取字段类型
在学习jQuery选择器时，我们经常跳过学习已经存在的HTML元素属性，因为它们访问起来非常快。
