.val()
.val() 返回： String, Array
描述： 獲取匹配的元素集合中第一個元素的當前值。
version added: 1.0.val()
.val() 方法主要用于獲取表單元素的值。至于 <select multiple="multiple"> 元素, .val()方法返回一個包含每個選中的 option 的數(shù)組。
對于 下拉框（select） 和復(fù)選框（checkbox）, 你也可以使用:selected 和 :checked選擇器來獲取值，舉個例子：
$('select.foo option:selected').val(); // 從下拉框中獲取值
$('select.foo').val(); // 從一個或更多的下拉框中獲取值
$('input:checkbox:checked').val(); // 從選中的復(fù)選框中獲取值
$('input:radio[name=bar]:checked').val(); // 從單選選框中獲取值
舉例：
例子： 從一個select中獲取一個單一的。和一個包含多個選中的 option 的值的數(shù)組。并顯示他們：
<!DOCTYPE html>
<html>
<head>
<style>
p { color:red; margin:4px; }
b { color:blue; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.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>Demo:
例子： 獲取文本框的值
<!DOCTYPE html>
<html>
<head>
<style>
p { color:blue; margin:8px; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.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>Demo:
.val( value ) 返回： jQuery
描述： 設(shè)置匹配的元素集合中每個元素的值。
-
version added: 1.0.val( value )
value一個文本字符串或一個以字符串形式的數(shù)組來設(shè)定每個匹配元素的值。
-
version added: 1.4.val( function(index, value) )
function(index, value)一個用來返回設(shè)置值的函數(shù)。
這個方法通常是用來設(shè)置表單域的值。 對于 <select multiple="multiple"> 元素, 多個 <option>可以通過一個數(shù)組來選中。
.val() 方法允許我們通過一個函數(shù)來設(shè)置這個值。 在 jQuery 1.4 中， 這個函數(shù)通過兩個參數(shù)，當前元素的所引值和它當前的值：
$('input:text.items').val(function(index, value) {
return value + ' ' + this.className;
});
這個例子將字符串" items" 附給文本框。
舉例：
例子： 設(shè)置文本框的值。
<!DOCTYPE html>
<html>
<head>
<style>
button { margin:4px; cursor:pointer; }
input { margin:4px; color:blue; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.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>Demo:
例子： 這只一個單選下拉框和一個多選框。
<!DOCTYPE html>
<html>
<head>
<style>
body { color:blue; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.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>