值操作是對DOM屬性value進行讀取和設置操作。 比如html()、 text()、 val().
1. html
1. 1 html()獲取值
返回值：String
描述：獲取集合中第一個匹配元素的HTML內容
格式：
$(selector).html()
這個方法不接受任何元素
作用：在一個HTML文檔中， 可以使用.html()方法來獲取任意一個元素的內容。 如果選擇器匹配多個元素， 那么只有第一個匹配元素的HTML內容會被獲取。
實例代碼：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html Demo</title>
<script type="text/javascript" src="jquery.js"></script>
<script>
$("div.demo-container").html();
</script>
</head>
<body>
<div class="demo-container">
<div class="demo-box">Demonstration Box</div>
</div>
</body>
</html>
執行結果為：
Demonstration Box
1.2 html() 設置值
格式：
$(selector).html(htmlString);
返回值：jQuery
作用： 用來設置每個匹配元素的一個HTML字符串
htmlString 類型：string
代碼示例：
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>html Demo</title> 6 <style type="text/css"> 7 .red{ 8 coler: red; 9 } 10 </style> 11 <script type="text/javascript" src="jquery.js"></script> 12 <script type="text/javascript"> 13 $(function () { 14 $("div").html("<span class='red'>Hello <b>Again</b></span>"); 15 }) 16 </script> 17 </head> 18 <body> 19 <span>Hello</span> 20 <div></div> 21 <div></div> 22 <div></div> 23 </body> 24 </html>
執行結果：
2. text()
2.1 使用text()獲取值
語法：
$("selector").text()
返回值：String
作用：得到匹配元素集合中每個元素的合並文本， 包括他們的后代
示例代碼:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>text Demo</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function () {
$("div.demo-container").text()
})
</script>
</head>
<body>
<div class="demo-container">
<div class="demo-box">Demonstration Box</div>
<ul>
<li>list item 1</li>
<li>list <strong>item</strong> 2</li>
</ul>
</div>
</body>
</html>
執行結果為：
注意：
.text()方法不能使用在input元素或scripts元素上。
.input 或 textarea 需要使用.val()方法獲取或者設置文本值。
得到scripts元素的值， 會使用.html()方法。
2.2 使用Text() 設置文本內容
格式：
$(selector).text(text)
返回值：jQuery
text(參數類型)： String 或 Number 或 Boolean
作用：用於設置匹配元素內容的文本。當提供的是一個Number或者Boolean的時候，那么將被轉換成一個String表現形式， 提供給這個方法
代碼示例：
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>text Demo</title> 6 <style type="text/css"> 7 p{ 8 color: blue; 9 margin: 8px; 10 } 11 </style> 12 <script type="text/javascript" src="jquery.js"></script> 13 <script type="text/javascript"> 14 $(function () { 15 $("p").text("<b>Some</b> new text.") 16 }) 17 </script> 18 </head> 19 <body> 20 <p>Test Paragraph.</p> 21 </body> 22 </html>
執行結果為：
3. val()
3.1 使用val()方法獲取值
格式：
$(selector).vall();
返回值：String
參數： 不接收任何參數
作用：獲取匹配的元素集合中第一個元素的當前值
.val()方法主要用於獲取表單元素的值， 如input， select 和 textarea。
當在一個空集合上調用， 它返回undefined。
當該集合中的第一個元素是一個select-multiple(即， select元素設置了multiple屬性)， .val()返回一個包含每個選擇項值的數組。
對於選擇框(select)， 復選框(checkbox)和單選按鈕(radio button)， 也可以使用 :selected 和checked選擇器來獲取值。例如：
//從一個下拉選擇框中獲取值
$("select.foo option: selected").val();
// 簡單的從一個下拉選擇框中獲取值
$("select.foo").val();
//Get the value form a checked checkbox
$("input: checkbox: checked).val();
//Get the value from a set of radio buttons
$("input: radio[name=bar]: checked).val();
注意： 通過.val()方法從<textarea>元素中獲取的值是不含有回車(\r)字符的。
示例代碼：
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>val Demo</title> 6 <style type="text/css"> 7 p{ 8 color: blue; 9 margin: 8px; 10 } 11 </style> 12 <script type="text/javascript" src="jquery.js"></script> 13 <script> 14 $(function () { 15 $("input").keyup(function () { 16 var value = $(this).val(); 17 $("p").text(value); 18 }); 19 }) 20 </script> 21 </head> 22 <body> 23 <input type="text" value="some text"></input> 24 <p></p> 25 </body> 26 </html>
執行結果為：
3.2 使用val()設置值
格式：
$(selector).val(value);
返回值： jQuery
參數(value)：String 或 Number 或 Array
作用：一個String ， Number 或 一個以字符串形式的數組來設定每個匹配元素的值。
此方法通常用於設置表單字段的值。
val()允許你傳遞一個元素值的數組。 當使用在包含像<input type='checkbox">, <input type="radio>和<select>中的<option>元素的jQuery對象上的時候是非常有用的。在這種情況下， input和option和value與數組元素相匹配的情況下將被選中(checked)或選定(selencted) ，而那些與數組元素值不匹配的value是未選中(unchecked)或未被選(unselected)， 這取決於元素類型。
對於<input type="radio"> 屬於一個單選按鈕組， 還有<select>的其他元素都將被取消選中。
使用這個方法設置值， 不會觸發change事件。為此， 相關的時間處理程序不會被執行。如果要執行他們， 應該在設置值之后調用.trigger("change")
代碼示例：
點擊按鈕時， 在文本框中顯示按鈕的值。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>val Demo</title>
<style type="text/css">
button{
margin: 4px;
cursor: pointer;
}
input{
margin: 4px;
color: blue;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(function () {
$("button").click(function () {
var text = $(this).text();
$("input").val(text);
});
})
</script>
</head>
<body>
<div>
<button>Feed</button>
<button>the</button>
<button>Input</button>
</div>
<input type="text" value="click a button">
</body>
</html>
執行結果為：
