jQuery Getters 和 Setter
在本教程中，你將學習如何使用 jQuery 獲取或設定元素的內容和屬性值。
jQuery 獲取或設定內容和值
一些 jQuery 方法可用於在選擇上分配或讀取某些值。其中的幾個方法是 text() ， html() ， attr() 和 val() 。
當這些方法在沒有引數的情況下被呼叫時，它被稱為 getter，因為它獲取（或讀取）元素的值。當使用值作為引數呼叫這些方法時，它被稱為 *setter，*因為它設定（或賦值）該值。
jQuery text() 方法
jQuery text() 方法用於獲取所選元素的組合文字內容，包括其後代，或設定所選元素的文字內容。
使用 text() 方法獲取內容
以下示例將向你展示如何獲取段落的文字內容：
<script type="text/javascript">
$(document).ready(function(){
// Get combined text contents of all paragraphs
$(".btn-one").click(function(){
var str = $("p").text();
alert(str);
});
// Get text contents of the first paragraph
$(".btn-two").click(function(){
var str = $("p:first").text();
alert(str);
});
});
</script>
注意： jQuery 的 text() 檢索所有選定的元件（即組合的文字）的值，而其他的 getters 如 html() ， attr() 和 val() 只從在選擇的第一個元素返回該值。
使用 text() 方法設定內容
以下示例將向你展示如何設定段落的文字內容：
<script type="text/javascript">
$(document).ready(function(){
// Set text contents of all paragraphs
$(".btn-one").click(function(){
$("p").text("This is demo text.");
});
// Set text contents of the first paragraph
$(".btn-two").click(function(){
$("p:first").text("This is another demo text.");
});
});
</script>
注意： 當 jQuery 的 text() ， html() ， attr() 和 val() 方法當被當成一個引數呼叫時，它將設定值每個匹配的元素。
jQuery html() 方法
jQuery html() 方法用於獲取或設定元素的 HTML 內容。
使用 html() Method 獲取 HTML 內容
以下示例將向你展示如何獲取段落元素的 HTML 內容以及元素容器：
<script type="text/javascript">
$(document).ready(function(){
// Get HTML contents of first selected paragraph
$(".btn-one").click(function(){
var str = $("p").html();
alert(str);
});
// Get HTML contents of an element with ID container
$(".btn-two").click(function(){
var str = $("#container").html();
alert(str);
});
});
</script>
注意： 如果選擇了多個元素，則 html() 方法僅返回匹配元素集中第一個元素的 HTML 內容。
使用 html() 方法設定 HTML 內容
以下示例將向你展示如何設定元素的 HTML 內容 ： <body>
<script type="text/javascript">
$(document).ready(function(){
// Set HTML contents for document's body
$("button").click(function(){
$("body").html("<p>Hello World!</p>");
});
});
</script>
jQuery attr() 方法
你可以使用 jQuery attr() 方法獲取元素屬性的值，或者為所選元素設定一個或多個屬性。
使用 attr() 方法獲取屬性值
以下示例將向你展示如何獲取 href 超連結的屬性，即 <a> 元素以及 <img> 元素的 alt 屬性 ：
<script type="text/javascript">
$(document).ready(function(){
// Get href attribute value of first selected hyperlink
$(".btn-one").click(function(){
var str = $("a").attr("href");
alert(str);
});
// Get alt attribute value of an image with ID sky
$(".btn-two").click(function(){
var str = $("img#sky").attr("alt");
alert(str);
});
});
</script>
注意： 如果選擇了多個元素，則該 attr() 方法僅返回匹配元素集中第一個元素的屬性值。
使用 attr() 方法設定屬性
以下示例將向你展示如何設定 checked 核取方塊的屬性。
<script type="text/javascript">
$(document).ready(function(){
// Check all the checkboxes
$("button").click(function(){
$('input[type="checkbox"]').attr("checked", "checked");
});
});
</script>
該 attr() 方法還允許你一次設定多個屬性。以下示例將向你展示如何設定 <img> 元素的 class and title 屬性。
<script type="text/javascript">
$(document).ready(function(){
// Add a class and title attribute to all the images
$("button").click(function(){
$("img").attr({
"class" : "frame",
"title" : "Hot Air Balloons"
});
});
});
</script>
jQuery val() 方法
jQuery 的 val() 方法主要是用來獲取或設定的當前值 HTML 表單元素 如 <input>， <select> 和 <textarea>。
使用 val() 方法獲取表單欄位的值
以下示例將向你展示如何獲取表單控制元件的值：
<script type="text/javascript">
$(document).ready(function(){
// Get value of a text input with ID name
$("button.get-name").click(function(){
var name = $('input[type="text"]#name').val();
alert(name);
});
// Get value of a textarea with ID comment
$("button.get-comment").click(function(){
var comment = $("textarea#comment").val();
alert(comment);
});
// Get value of a select box with ID city
$("button.get-city").click(function(){
var city = $("select#city").val();
alert(city);
});
});
</script>
注意： 如果選擇了多個表單元素，則該 val() 方法僅返回匹配元素集中第一個元素的值。
使用 val() 方法設定表單欄位的值
以下示例將向你展示如何設定表單控制元件的值：
<script type="text/javascript">
$(document).ready(function(){
// Set value of all the text inputs
$("button").click(function(){
var text = $(this).text();
$('input[type="text"]').val(text);
});
});
</script>