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技術專欄
公眾號
事業單位
當前位置：
公考類
招聘類
各類考試
