1

Estoy aprendiendo a usar a usar JQuery, y me entro la duda sobre como la librería encapsula los objetos (o etiquetas html), digamos tengo el siguiente formulario:

<form id="myForm">
  First name:<br>
  <input type="text" id="firstname" name="firstname">
  <br>
  Last name:<br>
  <input type="text" id="lastname" name="lastname">
</form>
<button id="myButton">Boton</button>
<button id="clean">Clean</button>

y quiero ejecutar ciertos eventos cuando se presionan los botones, myButton y clean con el siguiente código JQuery

$(document).ready(function() {

    $("#myButton").click(function() {
        ... code ...
    });

    $("#clean").click(function() {
        $('#myForm')[0].reset();
    })
}); 

Lo que me llama la atención de esto es línea $('#myForm')[0].reset();, no tengo claro porque es necesario colocar el índice.

2 respuestas 2

3

Velo de este modo, dentro de tu estrcutura HTML, tienes solo un formulario con id myForm

Entonces cuando ocupas

$('#myForm')[0].reset();

Le estas indicando que dentro del array de elementos del DOM que lee de tu página HTML, tome el que tiene dicho id, si recordamos que un array es de este modo

Posicion | 0    | 1    | 2   |
-----------------------------
Valor    | ele1 | ele2 | ele3

Entonces por eso tu formulario ocupa la posición 0 por ser el primero que tiene ese id

Si ahora por ejemplo declaramos lo siguiente

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
    </head>
    <body>
     <form class="myForm">
      First name:<br>
      <input type="text" id="firstname" name="firstname">
    </form>
     
      <form class="myForm">
        <input type="text" id="firstname" name="firstname">
      </form>
    <button id="myButton">Boton</button>
    <button id="clean">Clean</button>
    <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
    <script>
        $(document).ready(function() {
    
        $("#myButton").click(function() {
            console.log(1)
        });
    
        $("#clean").click(function() {
            $('.myForm')[0].reset();
        })
    }); 
    </script>
    </body>
    </html>

Nota que el input que se ve afectado y reseteado es el primero de la lista, pues existen 2, pero como yo le indico que afecte al de la posición 0, entonces solo me resetea el primer input de los 2 que estan visibles

Es decir dentro de un array se vería algo así

elementoHTML | .myForm   |  .myForm
--------------------------------------
Posicion     |    0      |     1

Cambia el [0].reset() por [1].reset() y notarás como en lugar de limpiar el input del primer form, limpia el input pero del segundo form

2

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').

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.