Javascript jQuery(#id).val() 与 getElementById(#id).value

jQuery(#id).val() vs. getElementById(#id).value

提问by Juan Ignacio

I been searching but I can only find articles talking about one or the other. Which one is better?

我一直在搜索，但我只能找到谈论其中一个的文章。哪一个更好？

I'm making a small web app where performance is not a big concern since there's nothing complex going on.

我正在制作一个小型网络应用程序，其中性能不是一个大问题，因为没有任何复杂的事情发生。

I considered using jQuery's val()function since maybe it solves some inconsistency I'm not aware of, but getElementById.valueIS faster (although the end user won't notice.)

我考虑使用 jQuery 的val()函数，因为它可能解决了一些我不知道的不一致问题，但getElementById.value速度更快（尽管最终用户不会注意到。）

So which one should I use? Is jQuery's non-native method worth the lower performance to gain more compatibility?

那么我应该使用哪一种呢？jQuery 的非本地方法是否值得降低性能以获得更多兼容性？

回答by Matt

The biggest advantage of using jQuery().val()over document.getElementById().valueis that the former will notthrow an error if no elements are matched, where-as the latter will. document.getElementById()returns nullif no elements are matched, where-as jQuery()returns an empty jQuery object, which still supports all methods (but val()will return undefined).

使用jQuery().val()over的最大优点document.getElementById().value是，如果没有元素匹配，前者不会抛出错误，而后者会。document.getElementById()返回null如果没有元素是匹配的，其中，作为jQuery()返回空jQuery对象，它仍然支持的所有方法（但val()将返回未定义）。

There is noinconsistency when using .valuefor form elements. However, jQuery.val() standardises the interface for collecting the selected value in select boxes; where as in standard HTML you have to resort to using .options[this.selectedIndex].value.

有没有使用不一致时，.value表单元素。但是，jQuery.val() 标准化了在选择框中收集选定值的接口；在标准 HTML 中，您必须求助于使用.options[this.selectedIndex].value.

回答by pimvdb

If you're using <select>elements as well, .valuewon't work whereas .val()will.

如果您也使用<select>元素，.value则不会起作用，而.val()会起作用。

I would not mind about performance of just getting a value. If you want the best performance, perhaps you shouldn't use a library at all.

我不介意仅仅获得价值的表现。如果您想要最佳性能，也许您根本不应该使用库。

回答by David Souther

jQuerydoes so many nice little error handling things (look below) that I would never write a line of javascriptwithout jqueryin a browser again.

jQuery做了这么多漂亮的小错误处理（见下文），我再也javascript不会jquery在浏览器中写一行了。

• First, valworks on checkbox groups, selects, gets html, and the like.
• Second, $lets you use sizzle selectors, so in the future, you can easily switch between an IDand a CSSpath.
• Third, your code will be so much easier to read and maintain if you just use jQuery, that the time you save maintaining your code outweighs any speedup that you admit your users won't see. Finally, jQueryis a very popular, very widely used library. They will make $and valas fast as they can.

• 首先，val适用于复选框组、选择、获取 html 等。
• 其次，$让你使用 sizzle 选择器，以便将来可以轻松地在 anID和 aCSS路径之间切换。
• 第三，如果您只使用 ，您的代码将更易于阅读和维护jQuery，您节省的代码维护时间超过了您承认用户不会看到的任何加速。最后， jQuery是一个非常流行、使用非常广泛的库。他们将 $和val尽可能快，因为他们可以。

回答by I.M.SMART

I think using pure Javascriptis quicker for the following reasons:

我认为使用 pureJavascript更快，原因如下：

1. You won't have to learn more than pure js
2. If you don't want errors, use catch(exeption)(I think...)
3. You don't have to put in that little extra time to type in the code to initiate jquery
4. The browser responds quicker if you don't use jquery
5. Normal jsworks (in a better way) on checkboxes @johndodo

1. 你不需要学习更多纯粹的东西 js
2. 如果您不想要错误，请使用catch(exeption)（我认为...）
3. 您不必花一点额外的时间来输入代码来启动 jquery
4. 如果您不使用，浏览器响应会更快 jquery
5. js复选框正常工作（以更好的方式）@johndodo

Thank you for listening to my answer.

谢谢你听我的回答。

回答by Joseph Shambrook

I've been looking into the performance differences with this recently and, slightly unsurprisingly, using vanilla JS to grab a value is faster than using jQuery. However, the fallbacks that jQuery provides to prevent errors, like what @Matt mentioned, is very useful. Therefore, I tend to opt for the best of both worlds.

我最近一直在研究它的性能差异，不出所料，使用 vanilla JS 获取值比使用 jQuery 更快。但是，jQuery 提供的用于防止错误的回退（如@Matt 提到的）非常有用。因此，我倾向于选择两全其美。

var $this = $(this),
    $val = this.value || $this.val();

With that conditional statement, if this.valuetries to throw an error, the code falls back to the jQuery .val()method.

使用该条件语句，如果this.value尝试抛出错误，代码将回退到 jQuery.val()方法。

回答by Obi

I'd use jQuery's val(). Shorter code means faster download time (in my opinion).

我会使用 jQuery 的 val()。更短的代码意味着更快的下载时间（在我看来）。