JQuery常用基础语法（描述篇幅短）（第2季）
1、016
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><script type="text/javascript" src="../js/jquery-1.10.1.min.js"></script><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>获得内容 - text()、html() 以及 val()</title><script>$(document).ready(function() {$("#btn1").click(function() {alert("Text: " + $("#test").text());});$("#btn2").click(function() {alert("HTML: " + $("#test").html());});});</script></head><body><p id="test">这是段落中的<b>粗体</b>文本。</p><button id="btn1">显示文本</button><button id="btn2">显示 HTML</button></body></html>?2、017
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><script type="text/javascript" src="../js/jquery-1.10.1.min.js"></script><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>获得内容 - text()、html() 以及 val()</title><script>$(document).ready(function() {$("button").click(function() {alert("Value: " + $("#test").val());});});</script></head><body><p>姓名：<input type="text" id="test" value="米老鼠"></p><button>显示值</button></body></html>?3、018 获取属性
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><script type="text/javascript" src="../js/jquery-1.10.1.min.js"></script><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>获取属性</title><script>$(document).ready(function() {$("button").click(function() {alert($("#w3s").attr("href"));});});</script></head><body><p><a href="http://www.w3school.com.cn" id="w3s">W3School.com.cn</a></p><button>显示 href 值</button></body></html>?4、019
<title>设置内容和属性</title><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><body><p id="test1">这是段落。</p><p id="test2">这是另一个段落。</p><p>Input field: <input type="text" id="test3" value="Mickey Mouse"></p><button id="btn1">设置文本</button><button id="btn2">设置 HTML</button><button id="btn3">设置值</button></body>?5、020
<title>html val text 的回调函数</title><script>$(document).ready(function(){ $("#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 + ")"; }); });});</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>?6、021
<title>设置属性attr</title><script>$(document).ready(function() {$("button").click(function() {$("#w3s").attr("href", "http://www.w3school.com.cn/jquery");});});</script></head><body><p><a href="http://www.w3school.com.cn" id="w3s">W3School.com.cn</a></p><button>改变 href 值</button><p>请把鼠标指针移动到链接上，或者点击该链接，来查看已经改变的 href 值。</p></body></html>?7、022
<title>attr同时设置多个属性</title><script>$(document).ready(function() {$("button").click(function() {$("#w3s").attr({"href" : "http://www.w3school.com.cn/jquery/","title" : "W3School jQuery 教程"});});});</script></head><body><p><a href="http://www.w3school.com.cn" id="w3s">W3School.com.cn</a></p><button>改变 href 和 title 值</button><p>请把鼠标指针移动到链接上，或者点击该链接，来查看已经改变的 href 值和已经设置的 title 值。</p></body></html>?8、023
<title>attr回调函数</title><script>$(document).ready(function() {$("button").click(function() {$("#w3s").attr("href", function(i, origValue) {return origValue + "/jquery";});});});</script></head><body><p><a href="http://www.w3school.com.cn" id="w3s">w3school.com.cn</a></p><button>改变 href 值</button><p>请把鼠标指针移动到链接上，或者点击该链接，来查看已经改变的 href 值。</p></body></html>?9、024
<title>添加append</title><script>$(document).ready(function() {$("#btn1").click(function() {//$("p").append(" <b>Appended text</b>.");$("p").prepend("<b>Prepended text</b>. ");});$("#btn2").click(function() {//$("ol").append("<li>Appended item</li>");$("ol").prepend("<li>Prepended item</li>");});});</script></head><body><p>This is a paragraph.</p><p>This is another paragraph.</p><ol><li>List item 1</li><li>List item 2</li><li>List item 3</li></ol><button id="btn1">追加文本</button><button id="btn2">追加列表项</button></body></html>?10、025
<title>通过 append() 和 prepend() 方法添加若干新元素</title><script>function appendText() {var txt1 = "<p>Text.</p>"; // 以 HTML 创建新元素var txt2 = $("<p></p>").text("Text."); // 以 jQuery 创建新元素var txt3 = document.createElement("p");txt3.innerHTML = "Text."; // 通过 DOM 来创建文本$("body").append(txt1, txt2, txt3); // 追加新元素}</script></head><body><p>This is a paragraph.</p><button onclick="appendText()">追加文本</button></body></html>?11、026
<title>jQuery after() 和 before() 方法</title><script>$(document).ready(function() {$("#btn1").click(function() {$("img").before("<b>Before</b>");});$("#btn2").click(function() {$("img").after("<i>After</i>");});});</script></head><body><img src="/i/eg_w3school.gif" alt="JQuery惯用基础语法（描述篇幅短）（第2季）" /><br><br><button id="btn1">在图片前面添加文本</button><button id="btn2">在图片后面添加文本</button></body></html>?12、027
<title>通过 after() 和 before() 方法添加若干新元素</title><script>function afterText() {var txt1 = "<b>I </b>"; // 以 HTML 创建元素var txt2 = $("<i></i>").text("love "); // 通过 jQuery 创建元素var txt3 = document.createElement("big"); // 通过 DOM 创建元素txt3.innerHTML = "jQuery!";$("img").after(txt1, txt2, txt3); // 在 img 之后插入新元素}</script></head><body><img src="/i/eg_w3school.gif" alt="JQuery惯用基础语法（描述篇幅短）（第2季）" /><br><br><button onclick="afterText()">在图片后面添加文本</button></body></html>?
?