jQuery的DOM操作之設置和獲取HTML、文本和值 html（）text（）val（）
1. html()方法:
此方法類似於JavaScript中的innerHTML屬性，可以用來讀取或者設置某個元素中的html內容。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="jQuery/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert($("p").html());
});
</script>
</head>
<body>
<p title="what kind of fruit do you like best?"><strong>你最喜歡的水果是?</strong></p>
</body>
</html>
如果需要設置某元素的html代碼，也可以使用該方法，不過需要傳入一個參數：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="jQuery/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").html("<strong>你最喜歡的水果是?</strong>");
});
</script>
</head>
<body>
<p title="what kind of fruit do you like best?"></p>
</body>
</html>
2. text()方法：
次方法類似於javascript中的innerText屬性，可以用來讀取或者設置某個元素中的文本內容。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="jQuery/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert($("p").text());
});
</script>
</head>
<body>
<p title="what kind of fruit do you like best?"><strong>你最喜歡的水果是?</strong></p>
</body>
</html>
如果需要為某元素設置文本內容，那麽需要傳遞一個參數：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="jQuery/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").text("你最喜歡的水果是?");
});
</script>
</head>
<body>
<p title="what kind of fruit do you like best?"></p>
</body>
</html>
3. val()方法：
此方法類似於JavaScript中的value屬性，可以用來設置或獲取元素的值。無論元素是文本框，下拉列表還是單選框，它都可以發回元素的值。
如果元素為多選，則返回一個包含所有選擇的值的數組。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="jQuery/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#address").focus(function(){
var txt_value=$(this).val();
if(txt_value=="請輸入郵箱地址"){
$(this).val("");
}
});
$("#address").blur(function(){
var txt_value=$(this).val();
if(txt_value==""){
$(this).val("請輸入郵箱地址");
}
});
$("#pwd").focus(function(){
var txt_value=$(this).val();
if(txt_value=="請輸入郵箱密碼"){
$(this).val("");
}
});
$("#pwd").blur(function(){
var txt_value=$(this).val();
if(txt_value==""){
$(this).val("請輸入郵箱密碼");
}
});
});
</script>
</head>
<body>
<input type="text" id="address" value="請輸入郵箱地址" style="color:gray"><br>
<input type="text" id="pwd" value="請輸入郵箱密碼" style="color:gray"><br>
<input type="button" value="登錄">
</body>
</html>
通過上面的例子可以發現val()方法不僅能設置元素的值，還能獲取元素的值。而且val()方法還有另外一個用處，就是它能使select，checkbox和radio相應的選項被選中，在表單操作中經常會用到。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="jQuery/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
});
</script>
</head>
<body>
<select id="single">
<option>選擇1號</option>
<option>選擇2號</option>
<option>選擇3號</option>
</select>
<select id="multiple" multiple="multiple" style="height:130px">
<option selected="selected">選擇1號</option>
<option>選擇2號</option>
<option>選擇3號</option>
<option>選擇4號</option>
<option selected="selected">選擇5號</option>
</select>
<br>
<input type="checkbox" value="check1"/>多選1
<input type="checkbox" value="check2"/>多選2
<input type="checkbox" value="check3"/>多選3
<input type="checkbox" value="check4"/>多選4
<br>
<input type="radio" value="radio1"/>單選1
<input type="radio" value="radio2"/>單選2
<input type="radio" value="radio3"/>單選3
</body>
</html>
該網頁中的一些元素是默認選中的，可以通過val()方法來改變它們的選中項。
<script type="text/javascript">
$(document).ready(function(){
$("#single").val("選擇2號");
$("#multiple").val(["選擇2號","選擇3號"]);
$(":checkbox").val(["check2","check3"]);
$(":radio").val(["radio2"]);
});
</script>
效果如下：
jQuery的DOM操作之設置和獲取HTML、文本和值 html（）text（）val（）