何时使用Vanilla JavaScript vs.jQuery？

```
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]);

。这是一个非常漂亮的功能，当我们使用数组（或类似数组的对象）时，我们会错过它。

何时使用Vanilla JavaScript vs.jQuery？

面试问答相关栏目本月热门文章