何时使用Vanilla JavaScript vs.jQuery？

  • Z时代
  • 2024-01-10
  • 分类：问答

我注意到在监视/尝试回答常见的jQuery问题时，有一些使用javascript（而不是jQuery）的实践实际上使您能够 编写更少的代码，并且做得

…数量相同。并且还可能产生性能优势。

一个具体的例子

$(this) 与 this

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

jQuery的

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

Java脚本

this.id;

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

虽然我很欣赏有关jQuery与普通javascript性能的答案，但实际上我正在寻找更多定量的答案。

，使用普通javascript而不是使用javascript可能会更好（可读性/紧凑性）的实例$()。除了我在原始问题中给出的示例。

回答：

  • 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？ 的全部内容， 来源链接： utcz.com/qa/403716.html

回到顶部