jQuery（#id）.val（）与getElementById（#id）.value

Question

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

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

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

那我应该使用哪一个？ jQuery的非本机方法是否值得获得更高的兼容性？

Answer 1

使用jQuery().val()优于document.getElementById().value的最大优势是，如果没有匹配的元素，前者将不抛出错误，而后者将在哪里。如果没有匹配的元素，document.getElementById()返回null，其中 - jQuery()返回一个空的jQuery对象，它仍然支持所有方法（但val()将返回undefined）。

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

Answer 2

如果您同时使用<select>元素，则.value将无效，而.val()将无效。

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

Answer 3

jQuery做了很多很好的小错误处理事情（见下文），我再也不会在浏览器中写javascript一行而没有jquery。

• 首先，val适用于复选框组，选择，获取html和 等。
• 其次，$允许您使用sizzle选择器，因此将来可以使用 可以在ID和CSS路径之间轻松切换。
• 第三，如果你的话，你的代码将更容易阅读和维护 只需使用jQuery，即节省维护代码的时间 超过你承认用户不会看到的任何加速。最后， jQuery是一个非常受欢迎的，使用非常广泛的图书馆。他们会做的 尽可能快$和val。

Answer 4

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

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

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

Answer 5

我认为使用纯Javascript的速度更快，原因如下：

1. 您将不必学习纯粹的js
2. 如果您不想出错，请使用catch(exeption)（我认为...）
3. 您不必花那么多时间输入代码即可启动jquery
4. 如果您不使用jquery，浏览器的响应速度会更快
5. 普通js在复选框@johndodo上可以工作（更好的方式）

谢谢你听我的回答。

Answer 6

这里https://www.dyn-web.com/tutorials/forms/checkbox/same-name-group.php是复选框的一种实现，显然，选项仅需使用名称中的数组括号符号命名，即：name="sport[]"，然后通过以下方式在Javascript中获取数组：{{1 }}

我一直在寻找选择类型字段解决方案不使用jQuery ，而我遇到了以下解决方案：

Selection组是一个对象：HTMLCollection，它具有一个 lenght 方法和一个 selectedOptions 属性，该属性允许您遍历其标签属性，以使用选定的选项填充 Array ，然后您可以使用：

var sports = document.forms['demoForm'].elements['sport[]']

Answer 7

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