jquery第十二課jquery文檔的處理，jquery對(duì)文檔處理包括添加內(nèi)容,替換(修改)內(nèi)容，刪除，復(fù)制等。
參考共用代碼
<!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文檔處理代碼區(qū)-->
});
</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);把所有匹配的元素用其他元素的結(jié)構(gòu)化標(biāo)記包裹起來(lái)。HTML標(biāo)記代碼字符串，用于動(dòng)態(tài)生成元素并包裹目標(biāo)元素
舉例$("#cn").wrap("<div></div>"); 結(jié)果:<div><p id="cn"></p></div>
(2).wrap(elem); 把所有匹配的元素用其他元素的結(jié)構(gòu)化標(biāo)記包裝起來(lái)。跟上面的不同是參數(shù)用的是Dom對(duì)象(不是jquery對(duì)象)
$("#forasp").warp(document.getElementById("cn")); 結(jié)果<p id="cn"><p id="forasp">包裹jquery處理</p></p>
(3).wrap(fn); 把所有匹配的元素用其他元素的結(jié)構(gòu)化標(biāo)記包裝起來(lái)。 fn返回的必須是結(jié)構(gòu)性的元素
舉例:$("#forasp").wrap(function(){return $("#cn")}); 結(jié)果:<p id="cn"><p id="forasp">包裹jquery處理</p></p>
(4).unwrap();這個(gè)方法將移出元素的父元素。這能快速取消 .wrap()方法的效果。匹配的元素（以及他們的同輩元素）會(huì)在DOM結(jié)構(gòu)上替換他們的父元素。
$("p").unwrap(); 結(jié)果返回<p>jquery文檔處理</p><p id="www">包裹</p><p id="forasp">包裹jquery處理</p><p id="cn"></p> 第一個(gè)p的div就消失了
(5).wrapAll(html);將所有匹配的元素用單個(gè)元素包裹起來(lái),html標(biāo)記代碼字符串，用于動(dòng)態(tài)生成元素并包裝目標(biāo)元素
舉例:$("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>,意思是說(shuō)用div一次將所有的p元素包裹起來(lái)
(6).wrapAll(elem);將所有匹配的元素用單個(gè)元素包裹起來(lái).這里的elem是Dom元素不是jquery元素.
jquery實(shí)例:$("#1").wrapAll("document.createElement('div')"); 返回 <div><div id="1"><p>jquery文檔處理</p></div></div>,如果$("p")則所有的p都將被div包含,跟上面的wrapAll的html一樣.
(7).wrapInner(html);將每一個(gè)匹配的元素的子內(nèi)容(包括文本節(jié)點(diǎn))用一個(gè)HTML結(jié)構(gòu)包裹起來(lái).HTML標(biāo)記代碼字符串，用于動(dòng)態(tài)生成元素并包裝目標(biāo)元素.
舉例:$("p").wrapInner("<b></b>");結(jié)果<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有類(lèi)似,不過(guò)內(nèi)容是加到了內(nèi)部.elem仍然是dom創(chuàng)建的元素,不是jquery
$("p").wrapInner(document.createElement("b")); 跟上面的結(jié)果一樣,全部的p被加粗了.
(9).wrapInner(fn);將每一個(gè)匹配的元素的子內(nèi)容(包括文本節(jié)點(diǎn))用DOM元素包裹起來(lái),生成包裹結(jié)構(gòu)的一個(gè)函數(shù).
jquery實(shí)例:$("p").wrapInner(function(){return document.createElement("b")}); 結(jié)果跟第(7)一樣的.
5.jquery文檔處理-刪除
(1).empty();刪除匹配的元素集合中所有的子節(jié)點(diǎn),將對(duì)應(yīng)的jquery對(duì)象下的所有子節(jié)點(diǎn)全部移除.
$("#1").empty(); 則<div id="1"><p>jquery文檔處理</p></div>就會(huì)變成<div id="1"></div>
(2).remove([expr]);從DOM中刪除所有匹配的元素,expr是可選的表達(dá)式,這個(gè)方法不會(huì)把匹配的元素從jQuery對(duì)象中刪除，因而可以在將來(lái)再使用這些匹配的元素。但除了這個(gè)元素本身得以保留之外，其他的比如綁定的事件，附加的數(shù)據(jù)等都會(huì)被移除。
$("p").remove();結(jié)果是,所有的p刪除了 :<div id="1">
$("p").remove("#forasp");則表示刪除id為forasp的p,其他不變
(3).detach([expr]);從DOM中刪除所有匹配的元素。這個(gè)方法不會(huì)把匹配的元素從jQuery對(duì)象中刪除，因而可以在將來(lái)再使用這些匹配的元素。與remove()不同的是，所有綁定的事件、附加的數(shù)據(jù)等都會(huì)保留下來(lái)。
例子跟第二個(gè)一樣,但是不通的是,所有綁定的事件、附加的數(shù)據(jù)等都會(huì)保留下來(lái)
6.jquery文檔處理-復(fù)制
(1).clone()克隆匹配的DOM元素并且選中這些克隆的副本。不包括元素事件
舉例 $("#www").clone().appendTo("#cn"); 結(jié)果:<p id="cn"><p id="www">包裹</p></p>
(2).clone(true);元素以及其所有的事件處理并且選中這些克隆的副本
jquery文檔處理介紹完畢.
更多信息請(qǐng)查看IT技術(shù)專(zhuān)欄
公考類(lèi)
招聘類(lèi)
各類(lèi)考試
公眾號(hào)
事業(yè)單位
當(dāng)前位置：