jqurey-设置内容和属性
将使用（二）的三个相同的方法设置内容：
- text（）设置或返回所选元素的文本内容。
- html（）设置或返回所选元素的内容。
- val（）设置或返回表单字段的值。
通过 text()、html() 以及 val() 方法来设置内容：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<script>$(document).ready(function() {
$("#btn1").click(function() {
$("#t1").text("你很棒");
});
$("#btn2").click(function() {
$("#t2").html("<b>你很有个性</b>");
});
$("#btn3").click(function() {
$("#t3").val("student");
});
});</script>
<body>
<p id="t1">这就是我</p>
<p id="t2">这也是我</p>
<p>输入框：<input id="t3" value="大学生"/></p>
<button id="btn1">设置文本</button>
<button id="btn2">设置html</button>
<button id="btn3">设置值</button>
</body>
</html>
text()、html() 以及 val() 的回调函数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#btn1").click(function() {
$("#t1").text(function(i, o) {
return "旧文本" + o + ",新文本" + i;
})
});
$("#btn2").click(function() {
$("#t2").html(function(i, o) {
return "旧html" + o + ",新html" + i;
})
});
});
</script>
</head>
<body>
<p id="t1">这是<b>我</b></p>
<p id="t2">那是<b>你</b></p>
<button id="btn1">显示 新/旧 文本</button>
<button id="btn2">显示 新/旧 HTML</button>
</body>
</html>
设置属性 - attr()
jQuery attr() 方法也用于设置/改变属性值。
<!DOCTYPE html>
<html>
<head>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<meta charset="UTF-8">
<script>
$(document).ready(function(){
$("button").click(function(){
$("#baidu").attr("href","http://www.sina.com");
});
});
</script>
</head>
<body>
<p>
<a href="http://www.baidu.com" id="baidu">baidu</a>
</p>
<button>修改 href 值</button>
<p>点击按钮修改后，可以点击链接查看链接地址是否变化。</p>
</body>
</html>
attr() 的回调函数
jQuery 方法 attr()，也提供回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("#csdn").attr("href", function(i, origValue) {
return origValue + "/nav/newarticles";
});
});
});
</script>
</head>
<body>
<p>
<a href="https://www.csdn.net" id="csdn">csdn</a>
</p>
<button>修改 href 值</button>
<p>点击按钮修改后，可以点击链接查看 href 属性是否变化。</p>
</body>
</html>
jQuery - 添加元素
通过 jQuery，可以很容易地添加新元素/内容。
添加新的 HTML 内容
我们将学习用于添加新内容的四个 jQuery 方法：
- append() - 在被选元素的结尾插入内容
- prepend() - 在被选元素的开头插入内容
- after() - 在被选元素之后插入内容
- before() - 在被选元素之前插入内容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<script>
$(document).ready(function() {
$("#btn1").click(function() {
$("p").append("追加文本");
});
$("#btn2").click(function() {
$("ol").append("<li>追加</li>");
});
});
</script>
<body>
<p>这是wo。</p>
<p>那是你。</p>
<ol>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ol>
<button id="btn1">添加文本</button>
<button id="btn2">添加列表项</button>
</body>
</html>
jQuery prepend() 方法
jQuery prepend() 方法在被选元素的开头插入内容。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("p").prepend("<b>在开头追加文本</b>。 ");
});
$("#btn2").click(function(){
$("ol").prepend("<li>在开头添加列表项</li>");
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<ol>
<li>列表 1</li>
<li>列表 2</li>
<li>列表 3</li>
</ol>
<button id="btn1">添加文本</button>
<button id="btn2">添加列表项</button>
</body>
</html>
append()和prepend（）方法能够通过参数接受无线数量的新元素。可以通过jquery来生成文本/html，或者通过javascript代码和dom元素。我们创建若干个新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 append() 方法把这些新元素追加到文本中（对 prepend() 同样有效）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
function appendText() {
var txt1 = "<p>文本</p>";
var txt2 = $("<p></p>").text("文本");
var txt3 = document.createElement("p");
txt3.innerHTML = "文本";
// $("body").prepend(txt1, txt2, txt3);
$("body").append(txt1, txt2, txt3);
}
</script>
</head>
<body>
<p>这是一个段落。</p>
<button onclick="appendText()">追加文本</button>
</body>
</html>
after（）和before（）方法
前者在被选元素之后插入内容，后者在被选元素之前插入内容。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#div1").before("<b>之前</b>");
});
$("#btn2").click(function(){
$("#div1").after("<i>之后</i>");
});
});
</script>
</head>
<body>
<div id="div1">你好棒</div>
<br><br>
<button id="btn1">之前插入</button>
<button id="btn2">之后插入</button>
</body>
</html>
after() 和 before() 方法能够通过参数接收无限数量的新元素。可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建新元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
function beforeText() {
var txt1 = "<p><b>你好棒</b></p>";
var txt2 = $("<p></p>").text("真的好棒");
var txt3 = document.createElement("small");
txt3.innerHTML = "向你致敬";
$("#div1").before(txt1, txt2, txt3);
}
function afterText() {
var txt1 = "<p><b>你好棒</b></p>";
var txt2 = $("<p></p>").text("真的好棒");
var txt3 = document.createElement("small");
txt3.innerHTML = "向你致敬";
$("#div1").after(txt1, txt2, txt3);
}
</script>
</head>
<body>
<div id="div1" style="color: red;">这是我</div>
<button onclick="beforeText()">添加到前面</button>
<button onclick="afterText()">添加到后面</button>
</body>
</html>
