El método val() es un método incorporado en jQuery que se usa para devolver o establecer el valor del atributo para los elementos seleccionados. Este método se aplica a los elementos del formulario HTML.
Sintaxis: hay tres formas de usar este método que se detallan a continuación:
$(selector).val()
- Parámetros: Este método no acepta ningún parámetro.
$(selector).val(value)
- Parámetros: este método acepta un valor de parámetro único que es obligatorio. Se utiliza para especificar el valor de los atributos.
$(selector).val(function(index,current_value))
- Parámetros: este método acepta la función de parámetro único que es opcional. Contiene la posición de índice del elemento y el atributo de valor actual del elemento seleccionado.
Valor devuelto: este método devuelve el elemento seleccionado con los cambios especificados realizados por el método val().
Los siguientes ejemplos ilustran el método val() en jQuery:
Ejemplo 1:
html
<!DOCTYPE html>
<html>
<head>
<title>The val Method</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!-- jQuery code to show the working of this method -->
<script>
$(document).ready(function() {
$("button").click(function() {
$("input:text").val("GeeksforGeeks!");
$("input:text").css("color", "green");
$("input:text").css("font-size", "40px");
$("input:text").css("font-weight", "bold");
$("input:text").css("font-family", "times new roman");
});
});
</script>
<style>
div {
background-color: lightgreen;
padding: 20px;
width: 41%;
min-height: 150px;
border: 2px solid green;
}
input {
border: 2px solid green;
padding-left: 15px;
width: 350px;
height: 80px;
}
</style>
</head>
<body>
<div>
<p>
<input type="text" name="user">
</p>
<!-- click on this paragraph and see the change -->
<button>Click Here!</button>
</div>
</body>
</html>
Producción:
Ejemplo 2: este método toma dos valores, el primero para la posición del índice y el segundo para el valor del atributo. No es necesario pasar la posición del índice, la función se establecerá automáticamente en nulo (n = 0) y «c» especifica el valor actual del campo de entrada.
html
<!DOCTYPE html>
<html>
<head>
<title>The val Method</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!-- jQuery code to show the working of this method -->
<script>
$(document).ready(function() {
$("button").click(function() {
$("input:text").val(function(n, c) {
return c + " GeeksforGeeks!";
});
});
});
</script>
<style>
div {
background-color: lightgreen;
padding: 20px;
width: 300px;
height: 80px;
border: 2px solid green;
}
input {
border: 2px solid green;
padding-left: 15px;
width: 220px;
font-weight: bold;
height: 30px;
}
</style>
</head>
<body>
<div>
<p>
<input type="text" name="user" value="Welcome To">
</p>
<!-- click on this paragraph and see the change -->
<button>Click Here!</button>
</div>
</body>
</html>
Salida:
Antes de hacer clic en el botón:
Después de hacer clic en el botón:
Publicación traducida automáticamente
Artículo escrito por kundankumarjha y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA