jQuery 获取 & 设置
在本教程中，您将学习如何使用 jQuery 获取或设置元素的内容和属性值以及来自控件的值。
jQuery 获取或设置内容和值
一些 jQuery 方法可用于分配或读取选择的某些值。 其中一些方法是 text(), html(), attr(), 和 val()。
当这些方法在没有参数的情况下被调用时，它被称为 getters，因为它获取（或读取）元素的值。 当使用值作为参数调用这些方法时，它被称为 setter，因为它设置（或分配）该值。
jQuery text() 方法
jQuery text() 方法要么用于获取所选元素的组合文本内容，包括它们的后代，要么用于设置所选元素的文本内容。
使用 text() 方法获取内容
以下示例将向您展示如何获取段落的文本内容：
<script>
$(document).ready(function(){
// 获取所有段落的组合文本内容
$(".btn-one").click(function(){
var str = $("p").text();
alert(str);
});
// 获取第一段的文本内容
$(".btn-two").click(function(){
var str = $("p:first").text();
alert(str);
});
});
</script>注意： jQuery text() 检索所有选定元素（即组合文本）的值，而其他 getter（例如 html(), attr(), 和 val()）仅从选择中的第一个元素返回值。
使用 text() 方法设置内容
以下示例将向您展示如何设置段落的文本内容：
<script>
$(document).ready(function(){
// 设置所有段落的文本内容
$(".btn-one").click(function(){
$("p").text("This is demo text.");
});
// 设置第一段的文本内容
$(".btn-two").click(function(){
$("p:first").text("This is another demo text.");
});
});
</script>注意： 当 jQuery text(), html(), attr(), 和 val() 方法以一个值作为参数调用时，它会将该值设置为每个匹配的元素。
jQuery html() 方法
jQuery html() 方法用于获取或设置元素的 HTML 内容。
使用 html() 方法获取 HTML 内容
以下示例将向您展示如何获取段落元素的 HTML 内容以及 <div> 元素容器：
<script>
$(document).ready(function(){
// 获取第一个选定段落的 HTML 内容
$(".btn-one").click(function(){
var str = $("p").html();
alert(str);
});
// 获取带有 ID 容器的元素的 HTML 内容
$(".btn-two").click(function(){
var str = $("#container").html();
alert(str);
});
});
</script>注意： 如果选择了多个元素，html() 方法只返回匹配元素集中第一个元素的 HTML 内容。
使用 html() 方法设置 HTML 内容
以下示例将向您展示如何设置 <body> 元素的 HTML 内容：
<script>
$(document).ready(function(){
// 设置文档正文的 HTML 内容
$("button").click(function(){
$("body").html("<p>Hello World!</p>");
});
});
</script>jQuery attr() 方法
您可以使用 jQuery attr() 方法来获取元素属性的值或为所选元素设置一个或多个属性。
使用 attr() 方法获取属性值
以下示例将向您展示如何获取超链接的 href 属性，即 <a> 元素以及 <img> 元素的 alt 属性：
<script>
$(document).ready(function(){
// 获取第一个选中的超链接的 href 属性值
$(".btn-one").click(function(){
var str = $("a").attr("href");
alert(str);
});
// 获取 ID 为 sky 的图像的 alt 属性值
$(".btn-two").click(function(){
var str = $("img#sky").attr("alt");
alert(str);
});
});
</script>注意：如果选择了多个元素，attr() 方法只返回匹配元素集中第一个元素的属性值。
使用 attr() 方法设置属性
以下示例将向您展示如何设置复选框的 checked 属性。
<script>
$(document).ready(function(){
// 选中所有复选框
$("button").click(function(){
$('input[type="checkbox"]').attr("checked", "checked");
});
});
</script>attr() 方法还允许您一次设置多个属性。 以下示例将向您展示如何为 <img> 元素设置 class 和 title 属性。
<script>
$(document).ready(function(){
// 为所有图像添加类和标题属性
$("button").click(function(){
$("img").attr({
"class" : "frame",
"title" : "Hot Air Balloons"
});
});
});
</script>jQuery val() 方法
jQuery val() 方法主要用于获取或设置<input>, <select> 和 <textarea> 等HTML 表单元素 的当前值。
使用 val() 方法获取表单字段的值
以下示例将向您展示如何获取表单控件的值：
<script>
$(document).ready(function(){
// 获取带有 ID 名称的文本输入的值
$("button.get-name").click(function(){
var name = $('input[type="text"]#name').val();
alert(name);
});
// 获取带有 ID 注释的文本区域的值
$("button.get-comment").click(function(){
var comment = $("textarea#comment").val();
alert(comment);
});
// 获取带有 ID 城市的选择框的值
$("button.get-city").click(function(){
var city = $("select#city").val();
alert(city);
});
});
</script>注意：如果选择了多个表单元素，val() 方法只返回匹配元素集中第一个元素的值。
使用 val() 方法设置表单字段的值
以下示例将向您展示如何设置表单控件的值：
<script>
$(document).ready(function(){
// 设置所有文本输入的值
$("button").click(function(){
var text = $(this).text();
$('input[type="text"]').val(text);
});
});
</script>