标签：javascript
jQuery HTML$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});$("#btn1").click(function(){
alert("Value: " + $("#test").val());
});$("button").click(function(){
alert($("#Attr").attr("href"));
});$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});$("#btn1").click(function(){
$("#test1").text(function(i,origText){
return "Old text: " + origText + " New text: Hello world!
(index: " + i + ")";
});
});
$("#btn2").click(function(){
$("#test2").html(function(i,origText){
return "Old html: " + origText + " New html: Hello <b>world!</b>
(index: " + i + ")";
});
});$("button").click(function(){
$("#w3s").attr("href","http://www.csdn.net");
});$(document).ready(function(){
$("button").click(function(){
$("#csdn").attr({
"href" : "http://www.csdn.net",
"target" : "_blank"
});
});
}); $("button").click(function(){
$("#csdn").attr("href", function(i,origValue){
return origValue + "/u014194675";
});
});提示：<p><a href="http://blog.csdn.net" id="csdn">csdn</a></p>哈哈~
本来想学到这里就结束了，但是看看上面都是不完整的例子，练习起来可能不太方便，但是如果贴好几个小例子，看起来会很乱吧。。。于是我总结了一个大例子。。。顺便可以放在我的网页中。。。。。。图片不想贴了。。。。。。附个链接吧，点击打开链接。
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.11.1.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
alert("Text: " + $("#test1").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test1").html());
});
$("#btn3").click(function(){
alert("Value: " + $("#test2").val());
});
$("#btn4").click(function(){
$("#test1").text("可以呀");
});
$("#btn5").click(function(){
$("#test1").html("<b>真的么</b>");
});
$("#btn6").click(function(){
$("#test2").val("周董");
});
$("#btn7").click(function(){
$("#test1").text(function(i, origText){
return (origText + " 应该可以吧");
});
});
$("#btn8").click(function(){
$("#test1").html(function(i, origText){
return (origText + " <b>好的</b>");
});
});
$("#btn9").click(function(){
$("#test2").val(function(i, origText){
return (origText + " Jay Chou");
});
});
$("#button1").click(function(){
alert($("#xyxy").attr("href"));
});
$("#button2").click(function(){
$("#xyxy").attr({
"href" : "http://www.suxin.yeyou.eu",
"target" : "view_frame"
});
});
$("#button3").click(function(){
$("#xyxy").attr("href", function(i,origValue){
return origValue + "/answer.html";
});
});
});
</script>
</head>
<body>
<p id="test1" value="csdn">我可以继续用<b>杰伦</b>来举例子么</p>
<button id="btn1">显示文本</button>
<button id="btn2">显示 HTML</button>
<button id="btn4">设置文本</button>
<button id="btn5">设置 HTML</button>
<button id="btn7">回调函数设置文本</button>
<button id="btn8">回调函数设置 HTML</button>
<p>姓名：<input type="text" id="test2" value="周杰伦"></p>
<button id="btn3">显示 value</button>
<button id="btn6">设置 value</button>
<button id="btn9">回调函数设置 value</button>
<p><a href="http://www.suxin.yeyou.eu/test.html" target="_blank" id="xyxy">自己的网页</a></p>
<button id="button1">获取 href</button>
<button id="button2">设置 href 多个属性</button>
<button id="button3">回调函数设置 href </button>
<p>先点击链接；然后点击button2，再点击链接；之后再点击button3，再点击链接。</p>
</body>
</html>JavaScript（19）jQuery HTML 获取和设置内容和属性,布布扣,bubuko.com
JavaScript（19）jQuery HTML 获取和设置内容和属性
标签：javascript
原文地址：http://blog.csdn.net/u014194675/article/details/27212651
