jQuery 设置内容与属性
设置内容 - text(), html(), and val()
我们将使用上一页中相同的 3 种方法 设置内容:
text()- 设置或返回选定元素的文本内容html()- 设置或返回选定元素的内容（包括 HTML 标记）val()- 设置或返回表单字段的值
下面的实例演示如何使用 jQuery text(), html(), 和 val() 方法设置内容:
实例
<!DOCTYPE html><html><head><script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script><script>$(document).ready(function(){$("#btn1").click(function(){$("#test1").text("Hello world!");});$("#btn2").click(function(){$("#test2").html("<b>Hello world!</b>");});$("#btn3").click(function(){$("#test3").val("Dolly Duck");});});</script></head><body><p id="test1">这是一个段落</p><p id="test2">这是另一个段落</p><p>输入字段: <input type="text" id="test3" value="Mickey Mouse"></p><button id="btn1">设置文本</button><button id="btn2">设置 HTML</button><button id="btn3">设置值</button></body></html>
text(), html(), 和 val() 的回调函数
上述 3 种 jQuery 方法：text(), html(), 和 val() 也都带有回调函数。回调函数有两个参数：所选元素列表中当前元素的索引和原始（旧）值。然后返回用作函数新值的字符串。
下面实例演示带回调的 text() 和 html():
实例
<!DOCTYPE html><html><head><script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script><script>$(document).ready(function(){$("#btn1").click(function(){$("#test1").text(function(i, origText){return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")";});});$("#btn2").click(function(){$("#test2").html(function(i, origText){return "旧 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")";});});});</script></head><body><p id="test1">这是一个 <b>加粗</b> 段落</p><p id="test2">这是另一个 <b>加粗</b> 段落</p><button id="btn1">显示旧/新文本</button><button id="btn2">显示旧/新 HTML</button></body></html>
设置属性 - attr()
jQuery attr() 方法还用于设置/更改属性值。
下面的实例演示如何更改（设置）链接中 href 属性的值:
实例
<!DOCTYPE html><html><head><script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script><script>$(document).ready(function(){$("button").click(function(){$("#ms").attr("href", "https://cankaoshouce.com/jquery/jquery-course.html");});});</script></head><body><p><a href="https://cankaoshouce.com" id="ms">cankaoshouce.com</a></p><button>修改 href 值</button><p>将鼠标移到链接上（或单击链接），查看 href 属性的值是否已更改。</p></body></html>
attr() 方法还让您可以同时设置多个属性。
下面的实例演示如何同时设置 href 和 title 属性:
实例
<!DOCTYPE html><html><head><script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script><script>$(document).ready(function(){$("button").click(function(){$("#ms").attr({"href" : "https://cankaoshouce.com/jquery/jquery-course.html","title" : "jQuery 教程"});});});</script></head><body><p><a href="https://cankaoshouce.com" title="some title" id="ms">cankaoshouce.com</a></p><button>修改 href 与 title</button><p>将鼠标悬停在链接上，查看 href 属性是否已更改，是否设置了 title 属性。</p></body></html>
attr() 的回调函数
jQuery attr() 方法，还附带了一个回调函数。回调函数有两个参数：选定元素列表中当前元素的索引和原始（旧）属性值。然后从函数中返回用作新属性值的字符串。
下面的实例演示了 attr() 和回调函数:
实例
<!DOCTYPE html><html><head><script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script><script>$(document).ready(function(){$("button").click(function(){$("#ms").attr("href", function(i, origValue){return origValue + "/jquery/";});});});</script></head><body><p><a href="https://cankaoshouce.com" id="ms">cankaoshouce.com</a></p><button>修改 href 值</button><p>将鼠标移到链接上（或单击链接），查看 href 属性的值是否已更改。</p></body></html>
jQuery HTML 参考
有关所有 jQuery HTML 方法的完整概述，请访问本站的 jQuery HTML/CSS 参考。