El cambio() es un método incorporado en jQuery que se usa para detectar el cambio en el valor de los campos de entrada. Este método solo funciona en los elementos “<input>, <textarea> y <select>”.
Sintaxis:
$(selector).change(function)
Parámetro: Acepta un parámetro opcional “función”.
Valor devuelto: Devuelve el elemento con la modificación.
Código jQuery para mostrar el funcionamiento del método change():
Código #1:
En el siguiente código, no se pasa ninguna función al método change.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/
jquery/3.3.1/jquery.min.js"></script>
<!--Demo of change method without passing function-->
<script>
$(document).ready(function() {
$("button").click(function() {
$("input").change();
});
});
</script>
</head>
<body>
<p>Click the button to see the changed value !!!</p>
<!--click on this button and see the change -->
<button>Click Me!</button>
<p>Enter value:
<input value="Donald" onchange="alert(this.value)"
type="text"></p>
</body>
</html>
Salida:
Antes de hacer clic en el botón «Click Me»-
Después de hacer clic en el botón «Click Me»-
Código #2:
En el siguiente código, la función se pasa al método de cambio.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/
jquery/3.3.1/jquery.min.js"></script>
<!--Here function is passed to the change method-->
<script>
$(document).ready(function() {
$(".field").change(function() {
$(this).css("background-color", "#7FFF00");
});
});
</script>
<style>
.field {
padding: 5px;
}
</style>
</head>
<body>
<!--write something and click outside -->
Enter Value:
<input class="field" type="text">
<p>Write something in the input field, and then
press enter or click outside the field.</p>
</body>
</html>
Salida:
antes de ingresar cualquier valor en el cuadro «Ingresar valor:»-
Después de ingresar valores de «GeeksforGeeks» en el cuadro «Ingresar valor:» y hacer clic fuera del cuadro-
jQuery es una biblioteca JavaScript de código abierto que simplifica las interacciones entre un documento HTML/CSS. Es muy famosa por su filosofía de «Escribir menos, hacer más» .
Puede aprender jQuery desde cero siguiendo este tutorial de jQuery y ejemplos de jQuery .
Publicación traducida automáticamente
Artículo escrito por kundankumarjha y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA