Question

快速提问。

我目前正在做一些js（前/前端验证）我的问题是哪一行代码更好用。我自己总是使用这种方法。

 document.formname.forminput.value

而不是

 $('formelement').val()

我建议你使用哪种方法，我认为第一种方法更好，因为它不依赖外部库来提交函数？

谢谢，Tony。

Answer 1

这对你有用。

如果您只想使用纯JavaScript：

document.formname.forminput.value

或

 document.getElementById('formelement').value

如果你想使用jQuery框架：

$('formelement').val()

我个人喜欢jQuery的方式，因为它更干净，但如果你使用它，总是知道简单的JavaScript方式。

在stackexchange上查看这篇文章，了解有关纯JavaScript与jQuery的更详细讨论： https://softwareengineering.stackexchange.com/questions/122191/what-benefits-are-there-to-native-javascript-development

Answer 2

根据JS Perf的说法，本地DOM方法，document.querySelector() 最快，你在问题中发布的本机DOM方法最慢。据推测，“快速”与高效相关，而且似乎选择id（因为jQuery和document.querySelector()方法都使用）是最快的选择方法。

JS Perf链接如下，基于以下HTML：

<form action="#" method="post" name="trek">
  <fieldset>
    <label for="input1">
      Input One:
    </label>
    <input id="input1" value="An input, Jim; but just as we know it..." />
  </fieldset>
  <fieldset>
    <label for="input2">
      Input Two:
    </label>
    <input id="input2" value="'Beam me up, Scotty!' attributed to, but never said, in Star Trek."
    />
  </fieldset>
</form>

原生DOM：

var input1 = document.trek.input1.value,
    input2 = document.trek.input2.value;
console.log(input1, input2);

更多DOM：

var input1 = document.getElementById('input1').value,
    input2 = document.getElementById('input2').value;
console.log(input1, input2);

更多DOM，d.qS：

var input1 = document.querySelector('#input1').value,
    input2 = document.querySelector('#input2').value;
console.log(input1, input2);

和jQuery：

var input1 = $('#input1').val(),
    input2 = $('#input2').val();
console.log(input1, input2);

JS Perf

参考文献：

Answer 3

“更好”很难定义。虽然在输入字段中添加ID并在jQuery中调用$('#inputid')可能会更快，但“更快”可能是第一个。但是差异非常小，以至于任何人都不会考虑对这种选择器进行微观优化。

它们在简单地从已知输入字段获取值时也是相同的，但是如果找不到DOM元素，则jQuery不会抛出异常，而如果document.formname.forminput.value formname将抛出异常在DOM中不存在。如果找不到DOM元素，jQuery的.val()将只返回undefined。

无需添加，jQuery的API（包括val()）在不同的输入元素和浏览器之间更加一致，也可以用作设置器。

Answer 4

两者都很好

如果您使用的是document.formname.forminput.value，那意味着您使用的是普通的javascript

但是如果你使用$（'formelement'）。val（）它来自jquery，这是javascript的框架之一。使用时，您应该下载jquery.js并将其包含在您的网页中。

Answer 5

实际上没有正确答案...答案取决于使用它的人..

第一个是普通的javascript，所以你说不需要外部库文件..

而

第二个是使用jquery ....

我会选择第二个原因，它的简短，可读和清洁

Answer 6

实际上在普通JavaScript中你有

document.formname.fieldName.value
document.getElementsByName("fieldName")[0].value
document.getElementById("fieldID")[0].value

而jQuery中的类似访问将是

$("input[name='fieldName'"].val();

或

$("#fieldID"].val();

一定要了解差异

如果由于其他原因在页面中没有jQuery而不是获取表单字段的值，那么在我看来jQuery是没有必要的。但是，如果您正在做一些稍微复杂和交叉浏览的事情，比如Ajax或事件处理，请在页面上找到满足您所有需求的jQuery

Answer 7

在这种情况下，没有理由使用jQuery而不是javascript。

更好地练习Jquery vs Document.formname.formelement.value

7 个答案: