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>