何时使用Vanilla JavaScript与jQuery？
我注意到，当监视/试图回答常见的jQuery问题时，有一些使用javascript的实践，而不是jQuery，实际上使您能够写得更少，并且做得相同。 也可能会产生性能优势。
一个具体的例子
$(this) vs this
在引用被点击的对象id的点击事件中
jQuery的
$(this).attr("id");
使用Javascript
this.id;
还有其他常见的做法吗？ 在某些Javascript操作可以更容易地完成的情况下，不用将jQuery加入混合。 或者这是一个罕见的情况？ （实际上需要更多代码的jQuery“快捷方式”）
编辑：虽然我欣赏关于jQuery与普通的JavaScript性能的答案，但我实际上正在寻找更多的定量答案。 当使用jQuery时 ，实际上会更好（可读性/紧凑性），以使用纯javascript而不是使用$() 。 除了我在原来的问题中给出的例子。
-
this.id（如你所知） -
this.value（在大多数输入类型中，只有我知道的问题是当<select>在其<option>元素中没有设置value属性或者Safari中的无线电输入时IE）。 -
this.className来获取或设置整个“class”属性 -
this.selectedIndex反对一个<select>来获取选择的索引 - 对
<select>this.options来获取<option>元素的列表 -
this.text对一个<option>来获取其文本内容 -
this.rows对<table>来获取<tr>元素的集合 -
this.cells对一个<tr>得到它的细胞（td＆th） -
this.parentNode获得一个直接的父母 -
this.checked获取checkbox的选中状态谢谢@Tim下 -
this.selected获取option的选择状态谢谢@Tim下 -
this.disabled获取input谢谢@Tim关闭的禁用状态 -
this.readOnly获取input的只读状态谢谢@Tim下 -
this.href反对一个<a>元素来获取它的href -
this.hostname对一个<a>元素来获取它的href的域名 -
this.pathname对<a>元素获取其href的路径 -
this.search对一个<a>元素来获取它的href查询字符串 -
this.src针对一个有效的src的元素
我想你明白了
有时候表现是至关重要的。 就像如果你在一个循环中执行了很多次的事情，你可能想要抛弃jQuery。
一般来说，你可以取代：
$(el).attr('someName');
有：
以上是措辞不佳。 getAttribute不是替代品，但它确实检索了从服务器发送的属性的值，其相应的setAttribute将设置它。 在某些情况下是必要的。
下面的句子覆盖了它。 看到这个答案更好的治疗。
el.getAttribute('someName');
…为了直接访问一个属性。 请注意，属性与属性不同（尽管它们有时相互镜像）。 当然也有setAttribute 。
假设您遇到了需要打开所有特定类型标签的页面。 jQuery简单易用：
$('span').unwrap(); // unwrap all span elements
但是，如果有很多，你可能想要做一个本地的DOM API：
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] ); }
这段代码非常短，比jQuery版本表现得更好，并且可以很容易地在你的个人库中变成一个可重用的函数。
因为while(spans[0]) ，可能看起来我有一个无限循环，但是因为我们正在处理一个“活动列表”，当我们执行parent.removeChild(span[0]); 。 这是一个非常漂亮的功能，我们错过了使用数组（或类似数组的对象）的工作。
正确的答案是，当使用jQuery而不是“普通的老式”原生JavaScript时，你总是会受到性能损失。 这是因为jQuery是一个JavaScript库。 这不是一些花哨的JavaScript新版本。
jQuery功能强大的原因在于，它在跨浏览器的情况下（AJAX是最好的例子之一）使得一些事情过于繁琐，并平滑了大量可用浏览器之间的不一致性，并提供了一致的API。 它也可以轻松地实现链接，隐含迭代等概念，以简化在一组元素上的工作。
学习jQuery不能代替学习JavaScript。 你应该有一个牢固的基础，以便你充分了解什么知道前者是让你更容易。
– 编辑包含评论 –
由于评论很快指出（我同意100％）上面的陈述是指基准代码。 一个“原生”JavaScript解决方案（假设写得很好）将胜过jQuery解决方案，几乎在每种情况下都能完成同样的任务（否则我很乐意看到一个例子）。 jQuery确实加快了开发时间，这是一个显着的好处，我不是淡化的意思。 它便于阅读，易于遵循的代码，这是比一些开发人员有能力自己创造的。
在我看来，答案取决于你想要达到的目标。 如果根据您对性能优势的参考，假设您的应用程序的速度超出了最佳速度，那么每次调用$()时，使用jQuery都会引入开销。 如果你要提高可读性，一致性，跨浏览器兼容性等，那么肯定有理由支持jQuery比“原生”JavaScript。
有一个框架叫…哦，猜猜看是什么？ Vanilla JS 。 希望你得到这个笑话…：D它牺牲代码易读性…比较它与jQuery贝娄，你可以看到，通过ID检索一个DOM元素快了近35倍。 🙂
所以如果你想要表演，最好试试Vanilla JS，并得出自己的结论。 也许你不会遇到JavaScript挂在浏览器的图形用户界面/密集的代码，如在for循环内锁定UI线程。
Vanilla JS是一个快速，轻量级的跨平台框架，用于构建令人难以置信的，强大的JavaScript应用程序。
在他们的主页上有一些性能比较：
已经有了一个可以接受的答案，但是我相信在这里直接输入的答案在其实际上可以保证跨浏览器支持的原生javascript方法/属性列表中是不全面的。 为此，我可以将您重定向到quirksmode：
http://www.quirksmode.org/compatibility.html
这也许是什么工作的最全面的清单，什么不工作在任何浏览器的任何地方。 请特别注意DOM部分。 阅读很多，但重要的是不要把它全部读完，而是作为参考。
当我开始认真编写网络应用程序时，我打印出所有的DOM表格，并将它们挂在墙上，以便我一眼就能知道使用哪种安全方法，哪些方法需要黑客。 这些天我只是谷歌像quirksmode parentNode compatibility当我有疑虑。
像其他任何事情一样，判断主要是经验的问题。 我真的不建议你阅读整个网站，并记住所有的问题，找出什么时候使用jQuery和何时使用普通的JS。 请注意清单。 搜索很容易。 随着时间的推移，你会发展一种本能的时候，平原JS是最好的。
PS：PPK（网站的作者）也有一本很不错的书，我推荐阅读
什么时候：
- 你知道，你正在做的事情是跨浏览器的支持
- 键入的代码并不多，而且
- 它的可读性并不显着，而且
- 你有理由相信jQuery不会选择基于浏览器的不同实现来获得更好的性能，那么：
使用JavaScript。 否则使用jQuery（如果可以的话）。
编辑 ：这个答案同时适用于选择使用jQuery整体而不是离开它，以及选择是否要在jQuery中使用香草JS。 选择attr('id')和.id倾向于JS，而在removeClass('foo')和.className = .className.replace( new Regexp("(?:^|\\s+)"+foo+"(?:\\s+|$)",'g'), '' )倾向于jQuery。
其他人的回答集中在“jQuery与普通JS的广泛问题”上。 从你的OP来看，我想你只是想知道如果你已经选择使用jQuery，最好使用vanilla JS。 你的例子是你应该使用vanilla JS的完美例子：
$(this).attr('id');
是比较慢和（在我看来）比以下的可读性：
this.id
速度较慢，因为你必须旋转一个新的JS对象才能检索jQuery方法的属性。 现在，如果你打算使用$(this)来执行其他操作，那么通过一切手段，将该jQuery对象存储在一个变量中，并使用它来操作。 但是，我遇到了很多情况，我只需要元素的属性（如id或src ）。
还有其他常见的做法吗？ 在某些Javascript操作可以更容易地完成的情况下，不用将jQuery加入混合。 或者这是一个罕见的情况？ （实际上需要更多代码的jQuery“快捷方式”）
我认为最常见的情况是你在帖子中描述的情况; 人们不必要地将$(this)包装在一个jQuery对象中。 我经常用id和value来看这个（而不是使用$(this).val() ）。
编辑： 这是一篇文章，解释了为什么在attr()情况下使用jQuery更慢。 忏悔：从标签维基上偷走它，但我认为这个问题值得一提。
再次编辑：鉴于直接访问属性的可读性/性能影响，我会说一个好的经验法则是尽可能地尝试使用this.<attributename> 。 可能有一些情况下，由于浏览器不一致，这将无法正常工作，但是最好先尝试一下，如果不起作用，则可以使用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();
我发现JS和JQ之间肯定有重叠。 你所显示的代码就是一个很好的例子。 坦率地说，使用JS的JQ最好的理由就是浏览器的兼容性。 我总是倾向于JQ，即使我能在JS中完成某些事情。
这是我个人的看法，但作为jQuery是JavaScript无论如何，我认为理论上它不能比香草js有史以来表现更好。
但是实际上它可能比手写的js更好，因为手写的代码可能不如jQuery那么高效。
底线 – 对于较小的东西，我倾向于使用vanilla js，对于js密集型项目，我喜欢使用jQuery，而不是重新发明轮子 – 这也更有效率。
this作为DOM元素的第一个答案的实时属性列表非常完整。
你可能会发现有一些其他的知识也很有趣。
当这是文件时：
-
this.forms得到一个当前文档表单的HTMLCollection， -
this.anchors获取所有HTMLAnchorElements的name被设置的HTMLAnchorElements， -
this.links得到一个HTMLCollection所有的HTMLAnchorElement与href被设置， -
this.images获取所有HTMLImageElement - 和不再使用的小程序一样
this.applets
当您使用document.forms ， document.forms[formNameOrId]获取如此命名或标识的表单。
当这是一个表格：
-
this[inputNameOrId]来获得如此命名或标识的字段
当这是表格字段：
-
this.type获取字段类型
在学习jQuery选择器时，我们经常跳过学习已经存在的HTML元素属性，这些属性访问起来非常快。
$(this)与this不同：
通过使用$(this)您可以确保将jQuery原型传递到对象上。
像往常一样，我迟到了这个派对。
这不是让我决定使用jQuery的额外功能，就像那样有吸引力。 毕竟没有什么能够阻止你写自己的功能。
事实上，在修改DOM以避免内存泄漏时，有许多技巧可以学习（我正在谈论你的IE）。 要有一个中心资源来管理我所有这些问题，这些资源是由比以往任何时候都更好的JS编程人员编写的，所以不断审查，修改和测试是上帝送来的。
我想这种在跨浏览器支持/抽象参数下。
当然，jQuery并不排除在需要的时候直接使用JS。 我总觉得两人似乎在一起无缝工作。
当然，如果你的浏览器不被jQuery支持，或者你正在支持低端环境（旧手机？），那么一个大的.js文件可能是一个问题。 记得jQuery过去很小？
但通常情况下，性能差异不是一个值得关注的问题。 它只需要足够快。 随着千兆赫的CPU周期每秒都浪费掉，我更关心我的编码器的性能，这是唯一的开发资源，每18个月就不会增加一倍。
这就是说，我目前正在调查的可访问性问题，显然.innerHTML是有点不是这样的。 jQuery当然依赖于.innerHTML，所以现在我正在寻找一个框架，将取决于允许的有点繁琐的方法。 我可以想象，这样的框架运行速度比jQuery慢，但只要它表现的好，我会很高兴。
这是一个非技术性的答案 – 许多工作可能不允许某些库，如jQuery。
事实上，Google不允许jQuery在他们的任何代码中（也不是React，因为它由Facebook所拥有），直到面试官说：“对不起，但你不能使用jQuery，它不是XYZ公司的核准清单“。 香草JavaScript的工作绝对到处，每次，永远不会给你这个问题。 如果你依靠一个图书馆，那么你的速度和速度会变得很快，但是你失去了普遍性。
另外，谈到面试时，另一个缺点是，如果你说在代码测验中你需要使用一个库来解决一个javascript问题，那么你会发现你并没有真正理解这个问题，这看起来有点不好。 而如果你解决它在生香草javascript它表明，你真正理解，并可以解决他们扔在你面前的任何问题的每一个部分。
