一、JQuery中的DOM操作。
什么是DOM：DOM是一中和浏览器、平台、语言无关的接口，使用该接口可以轻松访问页面中所有的标准组件。DOM简称文档对象模型，是Document Oject Model的简写形式。
二、内部插入和外部插入
1.内部插入
（1）append：向调用该方法的元素的内部的结尾处追加内容
a.append(content)，插入之后内容为：<a标签头>a原来的内容+content<a标签尾>
（2）appendTo：将调用的元素自身追加到指定的元素中的内部结尾处。
a.appendTo(content),插入之后的内容为：<content标签头>content原来的内容+a<content标签尾>
（3）prepend：向调用该方法元素的内部的开头处添加内容。
a.prepend(content)，查入之后的内容为：<a标签头>content+a内容<a标签尾>
（4）prependTo：将调用该方法元素自身添加到指定元素的内部开头处。
a.prependTo(content)，插入之后的内容为：<content标签头>a+content原来的内容<content标签尾>
（5）完整代码说明
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
<style type="text/css">
#foo1{
background-color: #CCC;
} </style>
<!--引入jquery的js库-->
</head> <body>
<input type="button" value="测试append" id="b1">
<input type="button" value="测试appendTo" id="b2">
<input type="button" value="测试prepend" id="b3">
<input type="button" value="测试prependTo" id="b4">
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li id="tj" name="tianjin">天津</li>
<li id="cq" name="chongqing">重庆</li>
</ul> <ul id="love">
<li id="fk" name="fankong">反恐</li>
<li id="xj" name="xingji">星际</li>
</ul> <span id="foo1">Hello1</span> </body>
<script language="JavaScript">
//* append(content) :向每个匹配的元素的内部的结尾处追加内容
$("#b1").click(function(){
$("#bj").append($("#foo1"));
});
//* appendTo(content) :将每个匹配的元素追加到指定的元素中的内部结尾处 $("#b2").click(function(){
$("#foo1").appendTo($("#bj"));
});
//* prepend(content):向每个匹配的元素的内部的开始处插入内容 $("#b3").click(function(){
$("#foo1").prepend($("#bj"));
});
//* prependTo(content) :将每个匹配的元素插入到指定的元素内部的开始处 $("#b4").click(function(){
$("#foo1").prependTo($("#bj"));
});
</script> </html>
Insert_Inside.html
2.外部插入
（1）after(content)：在每个调用的元素之后插入内容
（2）before(content)：在每个调用的元组之前插入内容
（3）insertAfter(content)：把调用该方法的元素自身插入到内容之后。
（4）insertBefore(content)：把调用该方法的元素自身插入到内容之前。
（5）完整代码说明
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
} div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
} div.visible{
display:none;
}
p{
background-color: #CCC;
width:200px;
}
</style>
<!--引入jquery的js库-->
</head> <body>
<input type="button" value="测试after" id="b1">
<input type="button" value="测试before" id="b2">
<input type="button" value="测试insertAfter" id="b3">
<input type="button" value="测试insertBefore" id="b4">
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li id="tj" name="tianjin">天津</li>
<li id="cq" name="chongqing">重庆</li>
</ul> <p id="p3">I would like to say: p3</p> <p id="p2">I would like to say: p2</p> <p id="p1">I would like to say: p1</p> </body>
<script language="JavaScript">
//* after(content) :在每个匹配的元素之后插入内容
$("#b1").click(function(){
$("#bj").after($("#p2"));
});
//* before(content):在每个匹配的元素之前插入内容
$("#b2").click(function(){
$("#bj").before($("#p2"));
});
//* insertAfter(content):把所有匹配的元素插入到另一个、指定的元素集合的后面
$("#b3").click(function(){
$("#bj").insertAfter($("#p2"));
});
//* insertBefore(content) :把所有匹配的元素插入到另一个、指定的元素元素集合的前面
$("#b4").click(function(){
$("#bj").insertBefore($("#p2"));
});
</script> </html>
Outer_Insert.html
3.内部插入和外部插入的比较
（1）都不仅能够将新创建的DOM元素插入到文档之中，还能够对原有的DOM元素进行移动。
（2）内部插入插入到标签之中，外部插入插入到标签外面，这是内部插入和外部插入的本质区别。
三、查找节点
1.查找属性节点可以使用JQuery对象的选择器来完成，详情请见上一篇随笔。
2.使用JQuery对象的attr()方法可以得到指定属性的值。
3.可以使用JQuery对象的text()方法得到指定文本节点的文本。
四、节点的CRUD操作
1.创建节点
（1）使用JQuery的工厂函数$()可以创建新节点，但是创建新节点的时候需要传入节点的标签名。
（2）创建文本节点就是在创建节点的时候直接将文本写出来。
（3）创建节点应当注意使用标准的XHTML格式，特别是需要注意闭合标签。
（4）示例：$(“<a></a>”);这样就创建了一个a节点。
（5）text()方法和arr()方法同时具有设置和获取的功能。
（6）创建节点实例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
} div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
} div.visible{
display:none;
}
</style>
<!--引入jquery的js库--> </head> <body> <ul id="city">
<li id="bj" name="beijing">北京</li>
</ul> </body>
<script language="JavaScript">
//在city下增加<li id="tj" name="tianjin">天津</li>节点
$li=$("<li></li>");
//<li></li>
//设置属性<li id="tj" name="tianjin"></li>
$li.attr("name","tianjin");
//添加文本节点<li id="tj" name="tianjin">天津</li>
$li.text("天津");
//添加到city的下
$("#city").append($li);
</script> </html>
CreateNewNode.html
（7）核心代码
<script language="JavaScript">
$li=$("<li></li>");
$li.attr("name","tianjin");
$li.text("天津");
$("#city").append($li);
</script>
2.删除节点
（1）可以使用remove()方法和empty()方法删除，但是remove方法删除的是连同标签都删除了，empty方法只是删除了内容。
（2）remove方法：当某个节点调用remove方法之后，该节点及所包含的所有后代节点将会全部被删除，返回值是一个指向已经被删除的节点的引用；如果带有参数，则就是对删除的对象进行筛选，如果满足条件则删除，否则不删除。
（3）empty方法：清空节点。清空元素的后代所有节点，但是不包含元素自身。该方法不带有参数。
（4）删除节点实例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
} div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
} div.visible{
display:none;
}
</style>
<!--引入jquery的js库--> </head> <body>
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li id="tj" name="tianjin">天津</li>
<li id="cq" name="chongqing">重庆</li>
</ul>
<p class="hello">Hello</p> how are <p>you?</p>
</body>
<script language="JavaScript">
//删除<li id="bj" name="beijing">北京</li>
//$("#bj").remove();
//删除所有的子节点 清空元素中的所有后代节点(不包含属性节点).
$("#bj").empty();
</script> </html>
Delete_Nodes.html
（5）核心代码
//删除<li id="bj" name="beijing">北京</li>
//$("#bj").remove();
//删除所有的子节点 清空元素中的所有后代节点(不包含属性节点).
$("#bj").empty();
3.复制节点
（1）使用方法clone()和clone(true)
（2）clone和clone(true)方法的区别：前者克隆的时候不会带有触发函数等，后者则将监听事件等一并复制走了。
（3）实例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
} div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
} div.visible{
display:none;
}
</style>
<!--引入jquery的js库-->
</head>
<body>
<button>保存</button>
<br> <br> <br>
<p>段落</p>
</body>
<script language="JavaScript">
$("button").click(function(){
window.alert("单击了button按钮！");
});
//button增加事件
//克隆button 追加到p上 ,但事件不克隆
//clone(): 克隆匹配的 DOM 元素, 返回值为克隆后的副本. 但此时复制的新节点不具有任何行为
/* $back=$("button").clone();
$("p").append($back); */
//克隆button 追加到p上 ,但事件也克隆
//clone(true): 复制元素的同时也复制元素中的的事件
$back=$("button").clone(true);
$("p").append($back);
</script>
</html>
Clone_Nodes.html
（4）核心代码
//克隆button 追加到p上 ,但事件不克隆
//clone(): 克隆匹配的 DOM 元素, 返回值为克隆后的副本. 但此时复制的新节点不具有任何行为
/* $back=$("button").clone();
$("p").append($back); */
//克隆button 追加到p上 ,但事件也克隆
//clone(true): 复制元素的同时也复制元素中的的事件
$back=$("button").clone(true);
$("p").append($back);
4.替换节点
（1）替换节点可以使用replaceWith方法和replaceAll方法
（2）replaceWith方法:被替换者主动调用
（3）replaceAll方法：替换者主动调用，实际上和replaceWith方法相对。
（4）实例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
} div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
} div.visible{
display:none;
}
</style>
<!--引入jquery的js库-->
</head>
<button>按钮</button>
<body>
<p>段落</p>
<p>段落</p>
<p>段落</p>
</body>
<script language="JavaScript"> //$("button")用 <p>tttttttt</P>替换
/* $newp=$("<p></p>");
$newp.text("按钮将会被替换");
$("button").replaceWith($newp); */ // p 用 <button>保存</button> 替换
$("<button>保存</button>").replaceAll($("p"));
</script>
</html>
ReplaceNode.html
（5）核心代码
//$("button")用 <p>tttttttt</P>替换
/* $newp=$("<p></p>");
$newp.text("按钮将会被替换");
$("button").replaceWith($newp); */ // p 用 <button>保存</button> 替换
$("<button>保存</button>").replaceAll($("p"));
五、属性操作
1.attr()方法：可以设置属性的值或者获取属性的值。
2.实际上JQuery中有很多方法都是既能够设置值也能够修改值的：attr()、html()、text()、val()、height()、width()、css()等。
