何时使用Vanilla JavaScript与jQuery？ [英] When to use Vanilla JavaScript vs. jQuery?

问题描述

我注意到在监控/尝试回答常见的jQuery问题时，有一些使用javascript而不是jQuery的实践，它实际上使你能够写得更少并且做 ...同样的量。并且还可能产生性能优势。

I have noticed while monitoring/attempting to answer common jQuery questions, that there are certain practices using javascript, instead of jQuery, that actually enable you to write less and do ... well the same amount. And may also yield performance benefits.

具体示例

$（this） vs this

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

Inside a click event referencing the clicked objects id

jQuery

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

Javascript

Javascript

this.id;

还有其他常见做法吗？可以更轻松地完成某些Javascript操作，而无需将jQuery添加到组合中。或者这是一个罕见的情况？ （实际上需要更多代码的jQuery快捷方式）

Are there any other common practices like this? Where certain Javascript operations could be accomplished easier, without bringing jQuery into the mix. Or is this a rare case? (of a jQuery "shortcut" actually requiring more code)

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

EDIT : While I appreciate the answers regarding jQuery vs. plain javascript performance, I am actually looking for much more quantitative answers. While using jQuery, instances where one would actually be better off (readability/compactness) to use plain javascript instead of using $(). In addition to the example I gave in my original question.

推荐答案

• this.id （如你所知）


• this.value （在大多数输入类型上。只有问题我知道IE是< select> 没有值在< option> 元素或Safari中的无线电输入。）


• this.className 获取或者设置一个完整的类属性


• this.selectedIndex 对一个< select> 获取所选索引


• this.options 针对< select> 获取< option> 元素的列表


• this.text 针对<选项> 获取文字内容


• this.rows 针对< table> 获取< tr> 元素的集合


• this.cells 反对a < tr> 获取其单元格（td& th）


• this.parentNode 获得直接父母


• this.checked 获取复选框的选中状态 谢谢@Tim Down


• this.selected 获取<$ c $的选定状态c>选项 谢谢@Tim Down


• this.disabled 获取输入的禁用状态 谢谢@Tim Down


• this.readOnly 获取readOnly状态一个输入 谢谢@Tim Down


• this.href 针对< a> 元素获取 href


• this.hostname 针对< a> 获取 href的域


• this.pathname 针对< a> 元素获取其 href的路径


• this.search 针对< a> 元素获取其 href的查询字符串


• this.src 反对一个元素，其中有效 src


• this.id (as you know)
• this.value (on most input types. only issues I know are IE when a <select> doesn't have value properties set on its <option> elements, or radio inputs in Safari.)
• this.className to get or set an entire "class" property
• this.selectedIndex against a <select> to get the selected index
• this.options against a <select> to get a list of <option> elements
• this.text against an <option> to get its text content
• this.rows against a <table> to get a collection of <tr> elements
• this.cells against a <tr> to get its cells (td & th)
• this.parentNode to get a direct parent
• this.checked to get the checked state of a checkbox Thanks @Tim Down
• this.selected to get the selected state of an option Thanks @Tim Down
• this.disabled to get the disabled state of an input Thanks @Tim Down
• this.readOnly to get the readOnly state of an input Thanks @Tim Down
• this.href against an <a> element to get its href
• this.hostname against an <a> element to get the domain of its href
• this.pathname against an <a> element to get the path of its href
• this.search against an <a> element to get the querystring of its href
• this.src against an element where it is valid to have a src

...我认为你明白了。

...I think you get the idea.

有时性能至关重要。就像你在循环中多次执行某些操作一样，你可能想抛弃jQuery。

There will be times when performance is crucial. Like if you're performing something in a loop many times over, you may want to ditch jQuery.

一般来说你可以替换：

In general you can replace:

$(el).attr('someName');

with：

with:

上面的措辞很差。 getAttribute 不是替代品，但它确实检索从服务器发送的属性的值，以及其对应的 setAttribute 会设置它。在某些情况下是必要的。

Above was poorly worded. getAttribute is not a replacement, but it does retrieve the value of an attribute sent from the server, and its corresponding setAttribute will set it. Necessary in some cases.

以下句子覆盖了它。 查看此答案以获得更好的治疗效果。

The sentences below sort of covered it. See this answer for a better treatment.

el.getAttribute('someName');

...以便直接访问属性。请注意，属性与属性不同（尽管它们有时会互相镜像）。当然还有 setAttribute 。

...in order to access an attribute directly. Note that attributes are not the same as properties (though they mirror each other sometimes). Of course there's setAttribute too.

假设您遇到需要打开所有标签的页面的情况特定类型。使用jQuery简单易行：

Say you had a situation where received a page where you need to unwrap all tags of a certain type. It is short and easy with jQuery:

$('span').unwrap();  // unwrap all span elements

但是如果有很多，你可能想做一点原生DOM API：

But if there are many, you may want to do a little native 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版本，并且可以很容易在你的个人图书馆中成为一个可重复使用的功能。

This code is pretty short, it performs better than the jQuery version, and can easily be made into a reusable function in your personal library.

看起来我有一个外部的无限循环，而因为而（spans [0]），但因为我们正在处理实时列表，所以当我们执行 parent.removeChild（跨度[0]）; 。这是一个非常漂亮的功能，我们在使用Array（或类似Array的对象）时错过了这个功能。

It may seem like I have an infinite loop with the outer while because of while(spans[0]), but because we're dealing with a "live list" it gets updated when we do the parent.removeChild(span[0]);. This is a pretty nifty feature that we miss out on when working with an Array (or Array-like object) instead.

这篇关于何时使用Vanilla JavaScript与jQuery？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！