何时使用 Vanilla JavaScript 与 jQuery？

我注意到，在监视/尝试回答常见 jQuery 问题时，有一些使用 javascript 而不是 jQuery 的做法，实际上使您能够少写多做...同样的数量。并且还可能产生性能优势。

一个具体的例子

$(this) vs this

在引用被单击对象 id 的单击事件内

jQuery

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

JavaScript

this.id;

还有其他类似的常见做法吗？某些 Javascript 操作可以更轻松地完成，而无需将 jQuery 引入其中。或者说这是一个罕见的案例？ （实际上需要更多代码的 jQuery“快捷方式”）

EDIT :虽然我很欣赏有关 jQuery 与普通 javascript 性能的答案，但实际上我正在寻找更多定量的答案。使用 jQuery 时，使用纯 javascript 而不是使用实际上会更好（可读性/紧凑性）的实例$()。除了我在原来的问题中给出的例子之外。

• this.id（如你所知）
• this.value（在大多数输入类型上。我知道的唯一问题是 IE 当<select>没有value其上设置的属性<option>元素，或 Safari 中的无线电输入。）
• this.className获取或设置整个“类”属性
• this.selectedIndex反对<select>获取选定的索引
• this.options反对<select>得到一个列表<option>元素
• this.text反对<option>获取其文本内容
• this.rows反对<table>得到一个集合<tr>元素
• this.cells反对<tr>获取其单元格（td 和 th）
• this.parentNode获得直系父母
• this.checked获取 a 的已检查状态checkbox 谢谢@蒂姆唐恩 https://stackoverflow.com/users/96100/tim-down
• this.selected获取选定的状态option 谢谢@蒂姆唐恩 https://stackoverflow.com/users/96100/tim-down
• this.disabled获取禁用状态input 谢谢@蒂姆唐恩 https://stackoverflow.com/users/96100/tim-down
• this.readOnly获取只读状态input 谢谢@蒂姆唐恩 https://stackoverflow.com/users/96100/tim-down
• this.href反对<a>元素来获取它的href
• this.hostname反对<a>元素来获取它的域href
• this.pathname反对<a>元素获取其路径href
• this.search反对<a>元素来获取其查询字符串href
• this.src针对一个有效的元素src

...我想你应该已经明白了。

有时性能至关重要。就像如果你在循环中多次执行某些操作，你可能想放弃 jQuery。

In general you can replace:

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

with: