jquery第十二课jquery文档的处理，jquery对文档处理包括添加内容,替换(修改)内容，删除，复制等。
参考共用代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>jquery文档处理</TITLE>
<script language="javascript" src="jquery-1.4.2.min.js"></script>
<SCRIPT language="javascript">
$(function(){
<!--jquery文档处理代码区-->
});
</SCRIPT>
<BODY>
<div id="1"><p>jquery文档处理</p></div>
<p id="www">包裹</p>
<p id="forasp">包裹jquery处理</p>
<p id="cn"></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,其他不变
(3).detach([expr]);从DOM中删除所有匹配的元素。这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。
例子跟第二个一样,但是不通的是,所有绑定的事件、附加的数据等都会保留下来
6.jquery文档处理-复制
(1).clone()克隆匹配的DOM元素并且选中这些克隆的副本。不包括元素事件
举例 $("#www").clone().appendTo("#cn"); 结果:<p id="cn"><p id="www">包裹</p></p>
(2).clone(true);元素以及其所有的事件处理并且选中这些克隆的副本
jquery文档处理介绍完毕.
中国足彩网信息请查看IT技术专栏
2025国考·省考课程试听报名
公众号
事业单位
当前位置：
公考类
招聘类
各类考试
