jquery文档处理2

2014-08-13来源：易贤网

jquery第十二课jquery文档的处理，jquery对文档处理包括添加内容,替换(修改)内容，删除，复制等。

参考共用代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML><HEAD><TITLE>jquery文档处理</TITLE>

$(function(){

});

</SCRIPT>

<BODY>

<div id="1"><p>jquery文档处理</p></div>

<p id="forasp">包裹jquery处理</p>

</BODY>

</HTML>

4.jquery文档处理-包裹

(1).wrap(html);把所有匹配的元素用其他元素的结构化标记包裹起来。HTML标记代码字符串，用于动态生成元素并包裹目标元素

举例$("#cn").wrap("<div></div>"); 结果:<div><p id="cn"></p></div>

(2).wrap(elem); 把所有匹配的元素用其他元素的结构化标记包装起来。跟上面的不同是参数用的是Dom对象(不是jquery对象)

$("#forasp").warp(document.getElementById("cn")); 结果<p id="cn"><p id="forasp">包裹jquery处理</p></p>

(3).wrap(fn); 把所有匹配的元素用其他元素的结构化标记包装起来。 fn返回的必须是结构性的元素

举例:$("#forasp").wrap(function(){return $("#cn")}); 结果:<p id="cn"><p id="forasp">包裹jquery处理</p></p>

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

$("p").unwrap(); 结果返回<p>jquery文档处理</p><p id="www">包裹</p><p id="forasp">包裹jquery处理</p><p id="cn"></p> 第一个p的div就消失了

(5).wrapAll(html);将所有匹配的元素用单个元素包裹起来,html标记代码字符串，用于动态生成元素并包装目标元素

举例:$("p").wrapAll("<div></div>"); 将返回<div id="1"><div><p>jquery文档处理</p></div><p id="www">包裹</p><p id="forasp">包裹jquery处理</p><p id="cn"></p></div></div>,意思是说用div一次将所有的p元素包裹起来

(6).wrapAll(elem);将所有匹配的元素用单个元素包裹起来.这里的elem是Dom元素不是jquery元素.

jquery实例:$("#1").wrapAll("document.createElement('div')"); 返回 <div><div id="1"><p>jquery文档处理</p></div></div>,如果$("p")则所有的p都将被div包含,跟上面的wrapAll的html一样.

(7).wrapInner(html);将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来.HTML标记代码字符串，用于动态生成元素并包装目标元素.

举例:$("p").wrapInner("<b></b>");结果<p><b>jquery文档处理</b></p><p id="www"><b>包裹</b></p><p id="forasp"><b>包裹jquery处理</b></p><p id="cn"><b></b></p>

(8).wrapInner(elem); 跟wrapAll有类似,不过内容是加到了内部.elem仍然是dom创建的元素,不是jquery

$("p").wrapInner(document.createElement("b")); 跟上面的结果一样,全部的p被加粗了.

(9).wrapInner(fn);将每一个匹配的元素的子内容(包括文本节点)用DOM元素包裹起来,生成包裹结构的一个函数.

jquery实例:$("p").wrapInner(function(){return document.createElement("b")}); 结果跟第(7)一样的.

5.jquery文档处理-删除

(1).empty();删除匹配的元素集合中所有的子节点,将对应的jquery对象下的所有子节点全部移除.

$("#1").empty(); 则<div id="1"><p>jquery文档处理</p></div>就会变成<div id="1"></div>

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

$("p").remove();结果是,所有的p删除了 :<div id="1">

$("p").remove("#forasp");则表示删除id为forasp的p,其他不变