.val()
描述：获得匹配的元素集合中第一个元素的当前值。
该方法不接受任何参数
.val()方法主要用于获得表单元素的值，比如说<input>、<select>和<textarea>。万一是<select>元素，如果没有选项被选中，它会返回null，如果至少有一个选项被选中，则会返回一个数组，包含了每个选中项的值，<select>可能会被选中多项，因为可能出现元素属性multiple。
对于下拉菜单和勾选框单选钮，你还可以使用:selected和:checked选择器以获得值，举个例子：
// 从下拉菜单中获得值 $( "select.foo option:selected").val(); // 更轻松地从下拉菜单中获得值 $( "select.foo" ).val(); // 从一个勾选中的勾选框中获得值 $( "input:checkbox:checked" ).val(); // 从一个单选钮中获得值 $( "input:radio[name=bar]:checked" ).val();
注意：注意，根据浏览器报告的值，在<textarea>元素上使用.val()取得的值是不含回车符的。铸成，如果这个值通过XHR发送给服务器，回车符会得到保留（或者是被浏览器添加的，但是在原始数据中并不包含回车）解决这个问题的变通方法可以使用和个valHook来实现，如下所示：
$.valHooks.textarea = {
get: function( elem ) {
return elem.value.replace( /\r?\n/g, "\r\n" );
}
};
示例
从单选下拉菜单中选择单一的值，从多选下拉菜单中选择值的数组，并显示它们的值。
<!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>
</select>
<select id="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">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>
演示结果
找到输入框中的值。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>val demo</title>
<style>
p {
color: blue;
margin: 8px;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<input type="text" value="some text">
<p></p>
<script>
$( "input" )
.keyup(function() {
var value = $( this ).val();
$( "p" ).text( value );
})
.keyup();
</script>
</body>
</html>
演示结果
.val()
描述：对匹配的元素集合中每个元素设置值。
这个方法通常用来设置表单字段的值：
.val()允许你传递一个元素值的数组。这可以用在这样的jQuery对象上：它包含了像<input type="checkbox">、<input type="radio">以及<select>内部的<option>这样的元素。那样的话，<input type="checkbox">和<input type="radio">和<select>的<option>中，具有与数组中的元素之一相匹配的值的项目，会被勾中或者选中；与此同时，值与数组中的任一个元素都不匹配的项则不会被勾中或者选中，取决于类型。万一<input type="radio">是一个单选钮组的一部分，还有单选的<select>，如果它们有多项匹配，则任何先前选中的元素都会被取消选中。
.val()方法允许我们通过传入一个函数来设置值。自从jQuery 1.4，这个函数可以传入两个参数，当前元素的索引，以及它当前的值：
$( "input:text.items" ).val(function( index, value ) {
return value + " " + this.className;
});
该示例把字符串“item”追加到文本输入框的值中。
示例
设置一个输入框的值。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>val demo</title>
<style>
button {
margin: 4px;
cursor: pointer;
}
input {
margin: 4px;
color: blue;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div>
<button>Feed</button>
<button>the</button>
<button>Input</button>
</div>
<input type="text" value="click a button">
<script>
$( "button" ).click(function() {
var text = $( this ).text();
$( "input" ).val( text );
});
</script>
</body>
</html>
演示结果
使用函数参数以改变一个输入框的值。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>val demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>Type something and then click or tab out of the input.</p>
<input type="text" value="type something">
<script>
$( "input" ).on( "blur", function() {
$( this ).val(function( i, val ) {
return val.toUpperCase();
});
});
</script>
</body>
</html>
演示结果
设置单选下拉菜单、多选下拉菜单、勾选框和单选钮。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>val demo</title>
<style>
body {
color: blue;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<select id="single">
<option>Single</option>
<option>Single2</option>
</select>
<select id="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select>
<br>
<input type="checkbox" name="checkboxname" value="check1"> check1
<input type="checkbox" name="checkboxname" value="check2"> check2
<input type="radio" name="r" value="radio1"> radio1
<input type="radio" name="r" value="radio2"> radio2
<script>
$( "#single" ).val( "Single2" );
$( "#multiple" ).val([ "Multiple2", "Multiple3" ]);
$( "input").val([ "check1", "check2", "radio1" ]);
</script>
</body>
</html>
演示结果