何时使用Vanilla JavaScript vs.jQuery？

Question

我注意到在监视/尝试回答常见的jQuery问题时，有一些使用javascript（而不是jQuery）的实践实际上使您能够 编写更少的代码，并且做得
…数量相同。并且还可能产生性能优势。

一个具体的例子

$(this) 与 this

在点击事件中引用点击的对象ID

jQuery的

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

Java脚本

this.id;

还有其他类似的常规做法吗？无需将jQuery混用就可以更轻松地完成某些Javascript操作的地方。还是这是罕见的情况？（实际上是需要更多代码的jQuery“快捷方式”）

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

Answer 1

• this.id （如你所知）
• this.value（对于大多数输入类型。当我<select>没有value在其<option>元素上设置属性或Safari中的单选输入时，我所知道的唯一问题就是IE 。）
• this.className 获取或设置整个“类”属性
• this.selectedIndex针对<select>以获取选定的索引
• this.options针对<select>以获取<option>元素列表
• this.text反对<option>以获取其文本内容
• this.rows反对<table>获取<tr>元素集合
• this.cells针对a <tr>以获得其细胞（td＆th）
• this.parentNode 得到直接父母
• this.checked获取的检查状态checkbox
• this.selected获取的选定状态option
• this.disabled获取的禁用状态input
• this.readOnly获取的readOnly状态input
• 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由于的缘故，我与外部之间存在无限循环while(spans[0])，但是由于我们正在处理“活动列表”，所以在执行时它会更新parent.removeChild(span[0]);。这是一个非常漂亮的功能，当我们使用数组（或类似数组的html" target="_blank">对象）时，我们会错过它。