JQuery or Javascript: it is faster and suitable for this script

Question

I have this button

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

and it calls this function after clicking the image

 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);
 }

My question is which is faster and more suitable for this task higher or lower? both of them work, but my curiosity raises the question of whether it gives the optimal / best performance for the specified task.

   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 is clearly much faster than jQuery. Since every time you use jQuery for an element, you call the $ function, this will take some time (not noticeably).

Javascript , jQuery , , , .

:

• jquery vs javascript
• jquery vs raw javascript dom forms

jQuery, :

• jQuery
• jQuery

Answer 2

javascript , jquery. jquery - javascript. jquery javascript.

Answer 3

JavaScript , , , . , jQuery jQuery, , script

Answer 4

document.getElementById .. JavaScript.  $ ('# address') document.getElementById.

, , $('# address') .

val() - jQuery

...

Answer 5

Vanilla javascript is faster for your purpose. But there are times when you may need to use jQuery for browser compatibility and without headaches. When you really need speed, try using simple js. See this table for more details .

Answer 6

JQuery is more suitable for 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");
    }

You can optimize as shown below.

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