一尘不染

何时使用Vanilla JavaScript vs.jQuery?

javascript

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

一个具体的例子

$(this)this

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

jQuery的

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

Java脚本

this.id;

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

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


阅读 375

收藏
2020-04-25

共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]);。这是一个非常漂亮的功能,当我们使用数组(或类似数组的对象)时,我们会错过它。

2020-04-25