jQuery操控DOM元素
创建节点元素
$(html)用于动态的创建节点元素，只需要找到元素的上级节点
点击按钮创建p元素节点，并设置内容为：创建的节点，颜色为红色，字体大小为20像素
<script type="text/javascript">
$(function(){
var p=$('<p style="color: red;font-size: 20px">创建的节点</p>');
$("input").click(function(){
$("#wrapper").append(p);
});
});
</script>
<div id="wrapper">
<input type="button" value="点击创建图片节点" />
</div>
插入节点
插入内部节点
append(function(index,html))
这个方法是将一个function函数作为append方法的参数，该函数的功能必须返回一个字符串，作为append方法插入的内容，index参数为对象在这个集合中的索引值，html参数为该对象原有的html值
通过append(function(index,html))方法插入节点
<script type="text/javascript">
$(function(){
var p=$('<p style="color: red;font-size: 20px">创建的节点</p>');
$("input").click(function(){
$("#wrapper").append(fun);
});
function fun(){
var p=$('<p style="color: red;font-size: 20px">创建的节点</p>');
return p;
}
});
</script>
<div id="wrapper">
<input type="button" value="点击创建图片节点" />
</div>
appendTo(content);
该方法用于将一个指定的元素插入到另一个元素的内容中
将img元素插入到div元素中去
<script type="text/javascript">
$(function() {
$("input").click(function() {
$("img.img").appendTo($("div.con"));
});
});
</script>
<div id="wrapper">
<input type="button" value="点击创建图片节点" />
<div class="con" style="border: 2px solid red">
<img src="http://xinxinjs.github.io/img_test/st1.jpg" />
</div>
<img class="img" src="http://xinxinjs.github.io/img_test/st2.jpg" />
</div>
其他方法：
append(context);
context表示追加到目标中的内容
prepend(content);
content表示插入目标元素内部前面的内容
prepend(function(imdex,html));
通过function函数返回插入目标元素内部前面的内容
prependTo(content);
content用于表示选择元素的jQuery表达式
插入外部节点
after(content);
content表示插入目标元素外部后面的内容
after(function);
通过function函数返回插入目标元素外部后面的内容
before(content);
content表示插入目标元素外部前面的内容
before(function);
通过function函数返回插入目标元素外部前面的内容
insertAfter(content);
content表示插入目标元素外部后面的内容，（经测试，该方法会删除目标元素，然后在目标元素的外部后面插入新的内容）
insetBefore(function);
content表示插入目标元素外部前面的内容，（经测试，该方法会删除目标元素，然后在目标元素的外部前面插入新的内容）
在目标元素的外部后面插入图片
<script type="text/javascript">
$(function() {
$("input").click(function() {
$(".con").after('<img src="http://xinxinjs.github.io/img_test/st1.jpg" />');
});
});
</script>
<div id="wrapper">
<input type="button" value="点击创建图片节点" />
<div class="con" style="border: 2px solid red">
<img src="http://xinxinjs.github.io/img_test/st1.jpg" />
</div>
<img class="img" src="http://xinxinjs.github.io/img_test/st2.jpg" />
</div>
复制节点
将某个元素节点复制到另一个节点后，在jQuery中通过clone方法实现，其功能是复制匹配的DOM元素，并且选中复制成功的元素，该方法仅是复制元素本身，被复制后的新元素不具有任何元素行为。如果在复制时将该元素的全部行为也进行复制，可以通过方法clone(true);实现
点击图片，对图片进行复制，并添加到原来图片的后面
<script type="text/javascript">
$(function() {
$("img").click(function() {
$(this).clone().appendTo("div.con");
});
});
</script>
<div id="wrapper">
<div class="con" style="border: 2px solid red">
<img src="http://xinxinjs.github.io/img_test/st1.jpg" />
</div>
</div>
替换节点
在jQuery中替换节点有replaceWith和replaceAll两种方法，其语法如下
replaceWith(content);
该方法的功能是将所有选择的元素替换成指定的HTML或DOM元素，其中参数content为被所选元素替换的内容
replaceAll(selector);
该方法是将所有选择的元素替换成指定selector的元素，其中参数selector为需要被替换的元素
分别用两种方法实现图片的替换
<script type="text/javascript">
$(function(){
$("#s1").click(function(){
$(this).replaceWith('<img src="http://xinxinjs.github.io/img_test/st3.jpg" />');
});
$("#s2").click(function(){
$('<img src="http://xinxinjs.github.io/img_test/st3.jpg" />').replaceAll("#s2");
});
});
</script>
<img id="s1" src="http://xinxinjs.github.io/img_test/st2.jpg" />
<img id="s2" src="http://xinxinjs.github.io/img_test/st1.jpg" />
包裹节点
在jQuery中可以根据需求包裹某各指定节点，对节点的包裹也是DOM对象操作中很重要的一项
以下列表展示包裹节点的全部方法
wrap(html);
html参数为字符串代码，用于生成元素并包裹所选元素
功能：把所有选择的元素，用其他字符创代码包裹起来
wrap(elem);
elem参数用于包装所选元素的DOM元素
功能：把所有选择的元素用其他DOM元素包裹起来
wrap(fn);
fn参数为包裹结构的一个函数
功能：把所有选择的元素用function函数返回的代码包裹起来
unwrap();
无参数
功能：移除所选元素的父元素或包裹标记
wrapAll(html);
html参数为字符串代码，用于生成元素，并包裹元素
功能：把所有选择的元素用单个元素包裹起来
wrapAll(elem);
elem参数用于包裹所选元素的DOM元素
功能：把所有选择的元素用单个DOM元素包裹起来
wrapInner(html);
html参数为字符串代码，用于生成元素，并包裹所选元素
功能：把所有选择元素的子内容（包括文本节点），用字符串代码包裹起来
wrapInner(elem);
elem参数用于包裹所选元素的DOM元素
功能：把所有选择元素的子内容（包括文本节点），用DOM元素包裹起来
wrapInner(fn);
fn参数为包裹结构的一个函数
功能：把所有选择元素的子内容（包括文本节点），用function函数返回的代码包裹起来
点击文本，用a标签包裹文本
<script type="text/javascript">
$(function(){
$("p").click(function(){
$(this).wrap("<a href='#'></a>");
});
});
</script>
<p>元素，点击之后用a标签包裹</p>
遍历元素
在DOM文档中，有时候需要对同一标记的元素进行同一操作。在传统的JavaScript中，总是先获取元素的总长度，然后以for循环语句，递减总长度，访问其中的某各元素，代码相对复杂
而在jQuery中可以使用each方法实现元素的遍历，其语法如是：each(callback);
其中callback是一个function函数，该函数还可以接受一个形参，此形参为遍历元素的序号，从0开始。如果需要访问元素中的属性，可以借助形参index，配合this关键字来实现元素属性的设置或获取
删除元素
带DOM操作页面时，jQuery提供了两个删除元素的方法remove和empty方法，严格来说empty并非真正意义上的删除，使用该方法仅仅可以清空所有的节点或节点所包括的所有后代元素，并非删除节点和元素
remove方法的语法如下：remove([expr]);
其中expr为可选项，如果接受参数，则该参数为筛选元素的jQuery表达式，通过该表达式获取指定的元素，并进行删除。
empty语法的格式如下：empty();
点击文字，删除文字
<script type="text/javascript">
$(function(){
$("p").click(function(){
$(this).remove();
});
});
</script>
<p>元素，点击之后用a标签包裹</p>
