El método jQuery val() se utiliza para obtener el valor de un elemento. Esta función se utiliza para establecer o devolver el valor. El valor de retorno da el atributo de valor del primer elemento. En el caso del valor establecido, establece el valor del atributo para todos los elementos. Este elemento se usa principalmente con formularios HTML.
Sintaxis:
$(selector).val(function(index, currentvalue))
Ejemplo 1: este ejemplo se implementa donde se escribe un texto en el campo y cuando se hace clic en el botón Mostrar valor, aparece una ventana emergente que muestra el texto ingresado.
<!DOCTYPE html>
<html lang="en">
<head>
<script src=
"https://code.jquery.com/jquery-3.4.1.min.js">
</script>
<script>
$(document).ready(function () {
// On button click, get value
// of input control Show alert
// message box
$("#getValBtnID").click(function () {
var inputString = $("#userInputID").val();
alert(inputString);
});
});
</script>
</head>
<body>
<h3 style="color:green">
GeeksForGeeks
</h3>
<b>JQuery val() Method</b>
<br><br>
<input type="text" id="userInputID">
<br><br>
<button type="button" id="getValBtnID">
Get Value
</button>
</body>
</html>
Producción:
Ejemplo 2: esta implementación muestra la propiedad de valor establecido cuando se hace clic en el botón. Automáticamente llama y llena el cuadro de texto con los datos predefinidos mencionados en el código.
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script>
$(document).ready(function () {
$("#setBtnID").click(function () {
$("input:text").val("Hello World!");
});
});
</script>
</head>
<body>
<h2 style="color:green">
GeeksForGeeks
</h2>
<b>JQuery val() Method</b>
<p>User Text: <input type="text"
name="userInput">
</p>
<button id="setBtnID">
Set the value of the
input field
</button>
</body>
</html>
Producción:
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 mohitgouti y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA