JQuery笔记8：JQuery 的 Dom 操作
回顾前几节笔记中JQuery 的 Dom 操作：
1 、使用 html() 方法读取或者设置元素的 innerHTML ：
alert($("a:first").html());
$("a:first").html("hello");2 、使用 text() 方法读取或者设置元素的 innerText ：
alert($("a:first").text());
$("a:first").text("hello");3 、 使用 attr() 方法读取或者设置元素的属性，对于 JQuery 没有封装的属性（所有浏览器没有差异的属性）用 attr 进行操作。
alert($("a:first").attr("href"));
$("a:first").attr("href", "http://www.rupeng.com");
4 、使用 removeAttr 删除属性。注意，删除不是清空，删除的属性在源代码中看不到，而清空属性是清空属性值，属性本身还存在。
【1】动态创建Dom节点（注意，写网页的时候，能静态的就静态，能不动态就不动态，一般搜索引擎搜索网页的时候抓不到动态创建的东西。若是动态的多了就不利于SEO）
（1）：分两步：
第一步：使用 $(html 字符串 ) 来创建 Dom 节点字符串，并且返回一个 jQuery 对象
第二步：调用 append 等方法将新创建的节点添加到 Dom 中
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var link = $("<a href='http://www.baidu.com'>百度</a>");//注意，此时只是创建一个字符串，并返回一个JQuery 对象，还没有添加到页面中
$("div:first").append(link);//将返回的JQuery对象添加到div中
});
</script>
</head>
<body>
<div></div>
</body>
</html>
案例：动态加载网站列表
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var data = { "百度": "http://www.baidu.com", "谷歌": "http://wwww.google.com" };
$.each(data, function (key, value) {
var tr = $("<tr><td>" + key + "</td><td><a href=" + value + ">" + key + "</a></td></tr>");
$("#table1").append(tr);
});
});
</script>
</head>
<body>
<table id="table1"></table>
</body>
</html>
（2）：append 方法用来在元素的末尾追加元素。
//$("#select1 option:selected").remove().appendTo($("#select2")) ;
$("#select1 option:selected").appendTo($("#select2")) ;
prepend ，在元素的开始添加元素。
after ，在元素之后添加元素（添加兄弟）
before ：在元素之前添加元素（添加兄弟）
【2】删除节点
（ 1 ） remove() 删除选择的节点
案例：清空 ul 中的特定项
$("ul li.licolor").remove(); 删除 ul 下 li 中有 licolor样式的元素。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.licolor{background-color:Yellow}
</style>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
// $("ul li[class=licolor]").remove(); 也可以写成： $("ul li.licolor").remove();
$("#btndelete").click(function () { $("ul li[class=licolor]").remove(); });
});
</script>
</head>
<body>
<ul>
<li>sdfsdf</li>
<li class="licolor">werwer</li>
<li>hghrtyer</li>
<li>wer234234df</li>
<li class="licolor">fghwhjwersdfwerwhe</li>
</ul>
<input id="btndelete" type="button" value="删除一部分LI" />
</body>
</html>
remove 方法的返回值是被删除的节点对象，还可以继续使用被删除的节点。比如重新添加到其他节点下
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.licolor{background-color:Yellow}
</style>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#btndelete").click(function () {
var lis = $("ul li[class=licolor]").remove();
$("#moveto").append(lis);
});
});
</script>
</head>
<body>
<ul>
<li>sdfsdf</li>
<li class="licolor">werwer</li>
<li>hghrtyer</li>
<li>wer234234df</li>
<li class="licolor">fghwhjwersdfwerwhe</li>
</ul>
<input id="btndelete" type="button" value="移动一部分LI" />
<ul id="moveto"> </ul>
</body>
</html>
（ 2 ） empty() 是将节点清空，不像 remove 那样还可以添加到其他元素中。
【3】 替换节点：
$("br").replaceWith("<hr/>");
将 <br/> 替换为 <hr/>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#btnReplace").click(function () {
$("br").replaceWith("<hr/>");
});
});
</script>
</head>
<body>
时间飞逝的方式<br />飞桑菲杰收到飞<br />哦地方<br />
<input id="btnReplace" type="button" value="替换" />
</body>
</html>
【4】包裹节点
wrap() 方法用来将所有元素逐个用指定标签包裹：
$("b").wrap("<font color='red'></font>") 将所有粗体字红色显示
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#btnWrap").click(function () {
$("p").wrap("<font color='red'></font>");
});
});
</script>
</head>
<body>
<p>时间飞逝</p><p>的方式飞桑菲杰收</p><p>到飞哦地方</p>
<input id="btnWrap" type="button" value="包裹" />
</body>
</html>