Question

我有这个按钮

<input type="image" src="img/btn2.png" onClick="clearbtn()">

并在单击图像后调用此函数

 function clearbtn() {
     document.getElementById("address").value = "Input Address Here";
     document.getElementById("res").value = "Results will be displayed here";
     document.getElementById("valid").value = "";
     document.getElementById("valid2").value = "";
     document.getElementById("cor").value = "Changes will be displayed here";
     document.getElementById("code").value = "";
     document.getElementById("placeholderImg").style.display = 'none';
     document.getElementById("street_number").value = "";
     document.getElementById("route").value = "";
     document.getElementById("locality").value = "";
     document.getElementById("administrative_area_level_1").value = "";
     document.getElementById("country").value = "";
     document.getElementById("postal_code").value = "";

     map.setCenter(defaultLatLng);
     map.setZoom(0);
     marker.setMap(null);
 }

我的问题是哪一个更快，更适合这个任务上面的那个或下面的一个？他们两个都有效，但我的好奇心是关于哪一个能为所述任务提供最佳/最佳表现。

   function clearbtn() {
        $('#address').val("Input Address Here");
        $('#res').val("Results will be displayed here");
        $('#valid').val("");
        $('#valid2').val("");
        $('#cor').val("Input Address Here");
        $('#code').val("Input Address Here");
        document.getElementById("placeholderImg").style.display = 'none';
        $('#street_number').val("Input Address Here");
    }

Answer 1

Javascript显然比jQuery快得多。每当你在一个元素上使用jQuery时，你正在调用$函数，它需要一些时间（不是很明显）。

在简单的情况下，Javascript更合适，但在复杂的情况下，jQuery更有帮助，因为它支持许多功能，最重要的是解决了跨浏览器问题。

从以下来源获取更多信息：

jquery vs javascript
jquery vs raw javascript dom forms

如果您想提高jQuery性能，请查看以下来源：

Answer 2

不仅在这种情况下，在每种情况下，优化的javascript比优化的jquery工作得更快。原因是jquery是javascript的包装器。间接jquery只会执行javascript。

Answer 3

普通的JavaScript总是会更快，但在现代浏览器中，使用普通计算机时你不会注意到。我想最大的收获是不需要加载jQuery本身来运行jQuery版本，但是一旦加载，两个脚本的执行将非常相似

Answer 4

document.getElementById更快..这是直接的JavaScript。 $（'＃address'）实际上调用document.getElementById。

但可以说$（'＃address'）更具可读性。

val（）只是值

的jQuery包装器

这里的表现差异非常小......

Answer 5

Vanilla javascript更快达到您的目的。但是有些情况下你可能需要使用jQuery来实现浏览器兼容性并且没有令人头疼的问题。当你真的需要速度时尝试使用普通的js。有关详细信息，请参阅this table。

Answer 6

Jquery比javascript更适合。

 function clearbtn() {
        $('#address').val("Input Address Here");
        $('#res').val("Results will be displayed here");
        $('#valid').val("");
        $('#valid2').val("");
        $('#cor').val("Input Address Here");
        $('#code').val("Input Address Here");
        document.getElementById("placeholderImg").style.display = 'none';
        $('#street_number').val("Input Address Here");
    }

您可以进行更多优化，如下所示

function clearbtn() {
        $('#res').val("Results will be displayed here");
        $('#cor, #address, #code, #street_number').val("Input Address Here");   
        $('#valid, #valid2').val("");
        $('#placeholderImg').hide();
        }

Jquery或Javascript：在这种情况下更快，更适合

6 个答案: