Hay tres razones. Primero, como dice shadow dado que tu selector puede aludir a múltiples elementos, la posición del elemento que te interesa se puede indicar usando el índice del array de jQuery.
Segundo, en las versiones más recientes (de la 2 en adelante yo creo) jQuery siempre devuelve un objeto (que se comporta como array) cuando le pasas un selector. A veces ese objeto no referencia ningún elemento del DOM si le pasaste un selector que no existe. Ese objeto no es un HTMLElement
, ni un array de éstos, sino una instancia de jQuery que puede referenciar uno, ninguno o muchos nodos del DOM.
(Antiguamente algo como $('#elemento_que_no_existe').hide()
tiraba un error. Ahora simplemente no hace nada).
Tercero, dado que un selector de jQuery devuelve una instancia de jQuery, no puedes invocar métodos que son nativos del HTMLElement
. En particular, el método reset
es nativo de HTMLFormElement.
Míralo de esta manera. Tengo un input
<input type="text" value="hola" id="mitexto">
y manejo su valor nativamente
document.querySelector('#mitexto').value = 'adiós';
En jQuery sería
$('#mitexto').val('adiós');
Si intentas usar document.querySelector('#mitexto').val('adiós');
te va a tirar un error, y si pones $('#mitexto').value = 'adiós';
no va a cambiar el valor.
Pero si, dado un selector jQuery, quisieras usar los atributos y métodos nativos del elemento del DOM, podrías hacer:
$('#mitexto')[0].value = 'adiós';
Resumiendo:
Suponiendo que tuviésemos un formulario del tipo
<form>
<input type="text" id="nombre">
<input type="text" id="correo">
<input type="text" id="país">
</form>
una instancia de jQuery referenciara muchos nodos del DOM jQuery('input')
se comportaría así:
jQuery('input')[1]
es un HTMLInputElement
jQuery('input').get(1)
es un HTMLInputElement
jQuery('input').eq(1)
es una instancia de jQuery equivalente a haber hecho jQuery('#correo')
.