Why '$("#form")[0].reset();' works and '$("#form").reset();' not?

Question

I am using form reset method as below in my web pages

$("#form")[0].reset();

But when I use it like the below

$("#form").reset();

It is giving me error.

Why the first method is working and the later is not?

My page is working perfectly. But I would like the reason behind it. The solution is everywhere. But none of them describing the reason behind it.

Note: I checked here and it shows so much answers. Nothing clearly defines the reason.

Answer 1

The jQuery selector method can return more than one element, so the behaviour is to return an array for consistency's sake. This array is a wrapper for other jQuery methods that can operate on that selection, but manipulating the classic DOM functions requires working on a specific element.

You can do that like you have, with [0] to pull out the first, or you can iterate over them:

$('#form').each(function() { this.reset() });

Answer 2

Because the reset() method is a member of the HTML form element:

https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset

And not a method offered by a jQuery object, which is a collection of 0 or more matching elements for your selector (#form)

Answer 3

I think the simple reason is it is for forcefully working a javascript function using Jquery

.reset() is not a Jquery native function. It is a Javascript function and we are forcefully using it inside Jquery