JavaScript es un lenguaje versátil de buena reputación que se usa principalmente para agregar funcionalidades interactivas a los sitios web. Viene con una biblioteca llamada jQuery que realiza estas tareas de manera eficiente. Los métodos jQuery son básicamente las acciones que realizan una tarea específica sin mucha participación del código. Uno de esos métodos es el “ cambiar() ” que activa el evento “cambiar” para notar inmediatamente que el valor del campo de entrada ha cambiado. Se utiliza principalmente en los campos de formulario HTML, así como en las casillas de verificación, los botones de opción y los cuadros de selección.
Este artículo profundiza en la implementación práctica y funcional del método jQuery “change()”.
¿Cómo funciona el método jQuery 'cambio ()'?
El jQuery “ cambiar() El método ” dispara el “ cambiar ' controlador de eventos. El evento de 'cambio' es un tipo especial de evento de JavaScript que ocurre cuando se cambia el valor del elemento HTML especificado (' ', '
Sintaxis
$ ( selector ) .cambiar ( función )
En la sintaxis anterior:
-
- selector: Permite la manipulación del elemento HTML.
- función: Es un parámetro opcional que especifica la función a ejecutar con el método “cambiar()”.
Ejemplo 1: Aplicar el método “cambiar()” para obtener el valor modificado del campo de entrada
En este ejemplo, el “ cambiar() El método ” se aplica para devolver un valor modificado del elemento HTML “ ” en particular.
código HTML
Primero, una descripción general del siguiente código HTML:
< h2 > cambio de jQuery ( ) Método h2 >< pag > Cambie el valor del campo de entrada: pag >
Campo de entrada: < aporte tipo = 'texto' valor = 'linux' en el cambio = 'alerta(este.valor)' >
< pag > Haga clic en el botón dado para disparar el 'en cambio' evento: pag >
< botón > Haga clic aquí botón >
En este bloque de código:
-
- Defina un subtítulo de nivel 2 usando el “ ' etiqueta.
- A continuación, especifica el párrafo con la ayuda del “ ' etiqueta.
- Después de eso, agregue un campo de entrada a través de '
” etiqueta llamada “ Campo de entrada ”, teniendo el tipo como “ texto ”, y el valor como “ linux ”, respectivamente. - También asocia un “ onchange() ” que muestra un cuadro de alerta cuando cambia el valor de entrada especificado.
- El ' La etiqueta ” crea otro párrafo con la declaración indicada.
- Por último, agregue un botón usando el '
' etiqueta.
Código jQuery
Ahora, considere el siguiente código jQuery:
< cabeza >< guion origen = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js' > guion >
< guion >
$ ( documento ) .listo ( función ( ) {
$ ( 'botón' ) .hacer clic ( función ( ) {
$ ( 'aporte' ) .cambiar ( ) ;
} ) ;
} ) ;
guion >
cabeza >
En las líneas de código anteriores:
-
- Especifica el ' ” etiqueta en la sección “head” que incluye la ruta CDN de jQuery del sitio web oficial “ ”.
- A continuación, el código jQuery primero corresponde al ' documento ” selector para seleccionar el elemento DOM de destino y asociar el “ listo() ” método que invoca la función indicada () tan pronto como se carga el documento.
- Después de eso, el “ botón Se añade el selector ” y se vincula con el “ hacer clic() ” método que permitirá la ejecución de una función al hacer clic en el botón.
- En la definición de la función, aplique el “ cambiar() ” método en el “ aporte ” elemento que activa el evento “onchange” cuando cambia su valor.
Producción
La salida muestra un cuadro de alerta con el valor cambiado del campo de entrada sobre el evento activado 'onchange'.
Ejemplo 2: Aplicar el método “cambiar()” para cambiar el color de fondo de un campo de entrada
Este ejemplo particular explica el funcionamiento del “ cambiar() ” método para cambiar el color de fondo del campo de entrada al cambiar el valor.
código HTML
Siga el código HTML dado:
< h2 > cambio de jQuery ( ) Método h2 >< pag > Cambie el valor del campo de entrada: pag >
Campo de entrada: < aporte tipo = 'texto' valor = 'linux' > pag >
Aquí, el elemento “ ” especifica solo su tipo y el valor.
Código jQuery
Ahora, pase al código jQuery:
< cabeza >< guion origen = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js' > guion >
< guion >
$ ( documento ) .listo ( función ( ) {
$ ( 'aporte' ) .cambiar ( función ( ) {
$ ( este ) .css ( 'color de fondo' , 'amarillo' ) ;
} ) ;
} ) ;
guion >
cabeza >
En las líneas de código anteriores, el ' cambiar () El método ” adjunta un “ función() ” que aplica la propiedad de estilo “CSS” “ color de fondo ” en el elemento HTML seleccionado, es decir, “entrada” en el valor de entrada modificado.
Producción
La salida confirma que el color de fondo del campo de entrada dado cambia cuando se cambia su valor.
Conclusión
jQuery ofrece el “ cambiar() ” método que dispara el evento de “cambio” cuando el usuario cambia el valor del campo de entrada. También se puede asociar con un evento adicional para respaldar sus funcionalidades. Solo funciona en los elementos HTML ' ', '