jQuery--DOM节点操作

DOM节点操作

DOM节点的操作包括节点创建、添加、修改、删除等操作。结构化文档XML与HTML文档分别具有对应的操作节点的方法；jQuery中关于DOM节点的操作是针对的HTML文档（？）

节点的创建

1.复制

方法	说明
clone([Even[,deepEven]])	克隆匹配的DOM元素并且选中这些克隆的副本。

说明：

clone([Even[,deepEven]])：
在想把DOM文档中元素的副本添加到其他位置时该函数非常有用。
参数Events：Boolean
    一个布尔值（true 或者 false）指示事件处理函数是否会被复制。V1.5以上
    版本默认值是：false;

参数Events[,deepEvents]：Boolean,Boolean
    1:一个布尔值（true 或者 false）指示事件处理函数是否会被复制。
    2:一个布尔值，指示是否对事件处理程序和克隆的元素的所有子元素的
    数据应该被复制。

节点的添加

1.内部插入
向元素的内部添加内容；

方法	说明
append(content|fn)	向每个匹配的元素内部追加内容。
appendTo(content)	所有匹配的元素被追加到另一个指定的元素中。
prepend(content|fn)	向每个匹配的元素内部开始处添加内容。
prependTo(content)	所有匹配的元素被追加到另一个指定的元素开始处。

说明：

$(a).append(b):b加入a中
$(a).appendTo(b) ：a被追加到b中

在jQuery 1.3.2中，appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作，返回值是所有被追加的内容，而不仅仅是先前所选中的元素。所以，要选择先前选中的元素，需要使用end()方法。

2.外部插入
在元素的外部（平级）添加内容；

方法	说明
after(content|fn)	在每个匹配的元素之后插入内容。
insertAfter(content)	所有匹配的元素被追加到另一个指定的元素后。
before(content|fn)	向每个匹配的元素前添加内容。
insertBefore(content)	所有匹配的元素被追加到另一个指定的元素前。

说明：

$(a).after(b):b加入a后
$(a).insertAfter(b) ：a被追加到b后

节点的修改

1.替换

方法	说明
replaceWith(content|fn)	将所有匹配的元素替换成指定的HTML或DOM元素。
replaceAll(selector)	用匹配的元素替换掉所有 selector匹配到的元素。

说明：

$(a).replaceWith(b):a替换成b
$(a).replaceAll(b) ：b被a替换,b用于查找所要被替换的元素

2.包裹
在元素外添加标签

方法	说明
wrap(html|element|fn)	把所有匹配的元素每个元素用其他元素的结构化标记包裹起来。
wrapAll(html|ele)	将所有匹配的元素用单个元素包裹起来
wrapInner(htm|element|fnl)	将每个匹配元素的子内容(包括文本节点)用HTML结构包裹起来
unwrap()	这个方法将移出元素的父元素。

说明：

包装元素：包裹方法的原理是检查提供的第一个元素并在它的代码结构中找到最上层的
祖先元素－这个祖先元素就是包装元素。

wrap(html|element|fn): 为每一个匹配的元素都包裹一次。包装对于在文档中插入
额外的结构化标记最有用，而且它不会破坏原始文档的语义品质。这个函数的原理是
检查提供的第一个元素（它是由所提供的HTML标记代码动态生成的），并在它的代码
结构中找到最上层的祖先元素－－这个祖先元素就是包裹元素。当HTML标记代码中的
元素包含文本时无法使用这个函数。因此，如果要添加文本应该在包裹完成之后再行
添加。
参数  html:HTML标记代码字符串，用于动态生成元素并包裹目标元素
参数 element:用于包装目标元素的DOM元素
参数 fn:生成包裹结构的一个函数

wrapAll(html|ele): 所有匹配元素的最外层用一个“html|ele”包装元素包裹

wrapInner(htm|element|fnl):这个函数的原理是检查提供的第一个元素（它是
由所提供的HTML标记代码动态生成的），并在它的代码结构中找到最上层的祖先元素
－－这个祖先元素就是包装元素。

unwrap()：这能快速取消 .wrap()方法的效果。匹配的元素（以及他们的同辈元素）
会在DOM结构上替换他们的父元素。

节点的删除

1.删除

方法	说明
empty()	删除匹配的元素集合中所有的子节点。
remove([expr])	从DOM中删除所有匹配的元素。
detach([expr])	从DOM中删除所有匹配的元素。

说明：

remove([expr])这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来
再使用这些匹配的元素。但除了这个元素本身得以保留之外，其他的比如绑定的事件，
附加的数据等都会被移除。expr用于筛选元素的jQuery表达式.

detach([expr])这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来
再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都
会保留下来。