什么时候使用香草JavaScript和jQuery?

当:

1. 您知道对于您正在做的事情，有坚定的跨浏览器支持
2. 它并不是要输入更多的代码，而且
3. 它的可读性并没有明显降低，而且
4. 你有理由相信jQuery不会根据浏览器选择不同的实现来获得更好的性能，那么:

使用JavaScript。否则使用jQuery(如果可以的话)。

编辑:这个答案既适用于选择使用jQuery整体还是不使用它，也适用于选择是否在jQuery内部使用香草JS。在attr('id')和.id之间选择更倾向于JS，而在removeClass('foo')和.className = .className.replace( new Regexp("(?:^|\\s+)"+foo+"(?:\\s+|$)",'g'), '' )之间选择更倾向于jQuery。

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

正确的答案是，当你使用jQuery而不是“普通的旧”原生JavaScript时，你将总是采取性能惩罚。这是因为jQuery是一个JavaScript库。它不是什么花哨的JavaScript新版本。

jQuery强大的原因在于，它使一些在跨浏览器情况下过于繁琐的事情变得简单(AJAX就是最好的例子之一)，并平滑了无数可用浏览器之间的不一致性，并提供了一致的API。它还很容易促进链接、隐含迭代等概念，以简化一起处理元素组的工作。

学习jQuery不能代替学习JavaScript。你应该对后者有一个坚实的基础，这样你才能充分体会到了解前者会让你更容易。

-编辑以包含评论-

正如评论中很快指出的那样(我100%同意)，上面的语句是指基准测试代码。一个“原生”JavaScript解决方案(假设它写得很好)将比一个jQuery解决方案在几乎所有情况下都能完成相同的事情(我很想看到一个例子)。jQuery确实加快了开发时间，这是一个显著的好处，我并不想忽视它。它使代码易于阅读和遵循，这是一些开发人员自己无法创建的。

在我看来，答案取决于你想要达到的目标。如果，正如我根据你对性能好处的参考所推测的那样，你追求的是应用程序的最佳速度，那么每次调用$()时使用jQuery都会带来开销。如果你追求可读性、一致性、跨浏览器兼容性等等，那么肯定有理由支持jQuery而不是“原生”JavaScript。

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

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

总之，对于较小的东西，我倾向于使用普通的JS，对于JS密集的项目，我喜欢使用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();

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

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

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

this.id。

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

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

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

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

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

• this.id(如你所知)
• this.value(在大多数输入类型上。我知道的唯一问题是IE，当一个<select>没有在它的<option>元素上设置value属性，或Safari中的无线电输入。)
• this.className来获取或设置整个“class”属性
• this.selectedIndex对应<select>来获取所选索引
• this.options针对<select>来获得<option>元素的列表
• this.text对应<option>来获取它的文本内容
• this.rows针对<table>来获得<tr>元素的集合
• this.cells对<tr>获取它的单元格(td &th)
• this.parentNode获取直接父对象
• this.checked来获取checkbox 谢谢@Tim Down的检查状态
• this.selected来获取option 谢谢@Tim Down的选定状态
• this.disabled来获取input 谢谢@Tim Down的禁用状态
• this.readOnly来获取input 谢谢@Tim Down的只读状态
• this.href针对<a>元素来获取它的href
• this.hostname针对<a>元素来获取其href的域
• this.pathname指向<a>元素以获取其href的路径
• this.search针对<a>元素来获取其href的查询字符串
• this.src指向一个元素，其中src是有效的

.．.我想你已经明白了。

有时，性能是至关重要的。比如，如果你在循环中多次执行某项操作，你可能想要抛弃jQuery。

通常你可以替换:

$(el).attr('someName');

el.getAttribute('someName');

$('span').unwrap();  // unwrap all span elements

var spans = document.getElementsByTagName('span');


while( spans[0] ) {
var parent = spans[0].parentNode;
while( spans[0].firstChild ) {
parent.insertBefore( spans[0].firstChild, spans[0]);
}
parent.removeChild( spans[0] );
}