更好的实践Jquery vs Document.formname.formelement.value

Better practice Jquery vs Document.formname.formelement.value

本文关键字：Document formname formelement value vs Jquery 更好      更新时间：2023-09-26

快速提问

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

 document.formname.forminput.value

而不是

 $('formelement').val()

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

谢谢,托尼。

这就是适合你的。

如果您只想使用纯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

"更好"很难定义。"更快"可能是第一个，尽管在输入字段中添加ID并在jQuery中调用$('#inputid')可能更快。但是差异是如此之小，以至于对于任何人来说，甚至考虑对这样的选择器进行微优化都没有意义。

当涉及到简单地从一个已知的输入字段获取值时，它们也是相等的，然而，如果没有找到DOM元素，jQuery不会抛出异常，而如果formname不存在于DOM中，document.formname.forminput.value会抛出异常。如果没有找到DOM元素，jQuery的.val()将简单地返回undefined。

毋庸置疑，包含val()的jQuery API在不同的输入元素和浏览器之间更加一致，也可以用作setter

根据JS Perf，使用document.querySelector()的本机DOM方法最快，而您在问题中发布的本机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穿孔。

引用:

  • document.querySelectorAll()的兼容性(在Quirksmode)，假设它与document.querySelector()相似。
  • MDN参考document.querySelector() .

都很好

如果您正在使用document.formname.forminput。值，这意味着你正在使用纯javascript

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

实际上没有合适的答案…答案取决于使用它的人。

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

与

第二个是使用jquery....

我选择第二个，因为它简短，可读，更干净

实际上在纯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来满足你对页面

的所有需求

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

相关文章：