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>