本文概述
jQuery val()方法有两种用法。
- 它用于获取匹配元素集中第一个元素的当前值。
- 它用于设置每个匹配元素的值。
句法:
$(selector).val()
它用于获取价值。
$(selector).val(value)
用于设置值。
$(selector).val(function(index, currentvalue))
用于使用功能设定值。
jQuery val()方法的参数
参数 | 描述 |
---|---|
Value | 它是必填参数。用于指定属性的值。 |
Function (index, currentvalue) | 它是一个可选参数。它用于指定一个函数, 该函数返回要设置的值。 |
jQuery val()示例
val()方法主要用于获取表单元素的值。此方法不接受任何参数。当没有选择任何选项时, 此方法返回NULL, 并且在一个或多个选择的情况下, 它返回一个包含每个选择的选项的值的数组。
让我们看一下val()方法的示例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>val demo</title>
<style>
p {
color: red;
margin: 4px;
}
b {
color: blue;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p></p>
<select id="single">
<option>Single</option>
<option>Double</option>
<option>Triple</option>
</select>
<script>
function displayVals() {
var singleValues = $( "#single" ).val();
$( "p" ).html( "<b>Value:</b> " + singleValues);
}
$( "select" ).change( displayVals );
displayVals();
</script>
</body>
</html>
立即测试
输出:
单
双
三倍
让我们看一下带有单个和多个选择框的jQuery val()方法的示例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>val demo</title>
<style>
p {
color: red;
margin: 4px;
}
b {
color: blue;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p></p>
<select id="single">
<option>Single</option>
<option>Single2</option>
<option>Single3</option>
</select>
<select id="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option>Multiple3</option>
</select>
<script>
function displayVals() {
var singleValues = $( "#single" ).val();
var multipleValues = $( "#multiple" ).val() || [];
$( "p" ).html( "<b>Single:</b> " + singleValues +
" <b>Multiple:</b> " + multipleValues.join( ", " ) );
}
$( "select" ).change( displayVals );
displayVals();
</script>
</body>
</html>
立即测试
输出:
单
单人2
单人3
多
多个2
3倍
jQuery val(value)示例
此方法用于设置文本字符串, 数字, 与每个匹配元素的值相对应的字符串数组。此方法可帮助你通过传入函数来设置值。
让我们看一下val(value)方法的例子。
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("input:text").val("srcmini");
});
});
</script>
</head>
<body>
<p>Name: <input type="text" name="user"></p>
<button>Set the value of the input field</button>
</body>
</html>
立即测试
输出:
Name:
设置输入字段的值
评论前必须登录!
注册