Hay un elemento de entrada , la tarea es establecer su valor usando JQuery. Aquí hay algunos ejemplos discutidos.
Para entender el ejemplo primero algunos métodos para saber.
Método JQuery val():
este método devuelve/establece el atributo de valor de los elementos seleccionados.
Si usamos este método para devolver valor, devolverá el valor del PRIMER elemento seleccionado.
Si usamos este método para establecer el valor, establecerá uno o más de un atributo de valor para el conjunto de elementos seleccionados.
Sintaxis:
- Devuelve el atributo de valor:
$(selector).val()
- Establezca el atributo de valor:
$(selector).val(value)
- Establezca el atributo de valor usando la función:
$(selector).val(function(index, curValue))
Parámetros:
- valor: Este parámetro es obligatorio. Especifica el valor del atributo de valor.
- función (índice, valor actual): este parámetro es opcional. Especifica la función que devuelve el valor a establecer.
- índice: Devuelve la posición del índice del elemento en el conjunto.
- currentValue: Devuelve el atributo de valor actual de los elementos seleccionados.
Ejemplo 1: En este ejemplo, el valor del elemento de entrada se establece mediante el método val() seleccionando el elemento de entrada desde su ID.
<!DOCTYPE HTML>
<html>
<head>
<title>
JQuery | Set value of input text.
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
</head>
<body style="text-align: center;">
<h1 style="color: green;">
GeeksForGeeks
</h1> Input Box:
<input id="input"
type="text"
class="Disable"
value="" />
<br>
<br>
<button id="setText">
setText
</button>
<script>
$("#setText").click(function(event) {
$('#input').val("GeeksForGeeks");
});
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Ejemplo 2: En este ejemplo, el valor del elemento de entrada se establece mediante el método val() seleccionando el elemento de entrada de su elemento principal <cuerpo> y luego seleccionando el elemento <entrada>.
<!DOCTYPE HTML>
<html>
<head>
<title>
JQuery
| Set value of input text.
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
</head>
<body style="text-align: center;">
<h1 style="color: green;">
GeeksForGeeks
</h1> Input Box:
<input id="input"
type="text"
class="Disable"
value="" />
<br>
<br>
<button id="setText">
setText
</button>
<script>
$("#setText").click(
function(event) {
$('body input').val(
"GeeksForGeeks");
});
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botó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 PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA