jQuery中的文件操作處理（五）：append()、prepend()、after()、before()、wrap()、wrapAll()、wrapInner()、clone()等
阿新 • • 發佈：2018-12-30
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>文件操作處理</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="js/jquery-1.11.3.js"></script> <style type="text/css"> body{ font-family: "Microsoft YaHei" } .cGreen{color: #4CA902} .cPink{color: #ED4A9F} .cBlue{color: #0092E7} .cCyan{color: #01A6A2} .cYellow{color: #DCA112} .cRed{color: #B7103B} .cPurple{color: #792F7C} .cBlack{color: #110F10} .cOrange{color: #FF4500} .cGray{color: #A9A9A9} .hide{display: none;} span { float:left; } ul li { width:120px; float: left; margin-left: 10px; } </style> <script type="text/javascript"> $(document).ready(function(){ /* content代表一串html文字；也可以是jQuery中的選擇規則！ 下面講到的fn，是一個js的方法； 意思是可以接收一個返回值為字串的js方法！ ele是element：標籤 append(content|fn) and appendTo(content)： x.append(y)：往x中加入y； $("p").append("<b>hello</b>"); y.appendTo(x)：把y加入到x中去；把一個匹配元素追加到另一個指定的元素中； $("<b>hello</b>").appendTo("p"); 這樣也是可以的！ $("p").appendTo("div"); 把所有的p標籤的append到所有的div中 下面pre同！ 如果x中原本有其他標籤內容和，append和appendTo，是加在最後面。 prepend(content|fn) and prependTo(content)： x.prepend(y)：往x中加入y； y.prependTo(x)：把y加入到x中去； 同append一樣是往裡加內容，但是區別是； 假如x中有內容的話，會把新加的內容發在最前面； 不像append是接在最後面！ after(content|fn)： 在每個匹配的元素之後插入一些html文字。 $("p").after("<b>hello</b>"); before(content|fn)： 在每個匹配元素之前插入。 $("p").before("<b>hello</b>") insertAfter(content)： 又是倒置： $("p").insertAfter("#foo"); 等同： $("#foo").after("p"); insertBefore(content)： 又是倒置： $("p").insertBefore("#foo"); 等同： $("#foo").before("p"); wrap(html|ele|fn)： 為 每一個匹配項都包裹一次！！！ 比較有用 {把所有匹配元素用其他結構包裹起來} $("p").wrap("<div class='wrap'></div>"); 把所有的段落用這個div包裹起來！ unwrap()： {把所有匹配元素的父標籤移除，可以快速消除wrap的效果} $("p").unwrap(); 把所有段落的父標籤給消除咯。 wrapAll(html|ele)： 只會包裹一次，把所有匹配的包裹進一個裡面！！！ 將所有匹配的元素包裹進一個div中！ $("p").wrapAll("<div></div>"); 將所有的p標籤包裹進同一個div中。 原理是： 如果有相同有匹配的，找到他們 的共同的最小父標籤！在上一層 加上div。 wrapInner(html|ele|fn)： 這裡講一講wrapInner和wrapAll和wrap的區別： ^o^： example: <ul> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ul> $("li").wrap("<div></div>"); $("li").wrapAll("<div></div>"); $("li").wrapInner("<div></div>"); wrap之後： <ul> <div><li>aaa</li></div> <div><li>bbb</li></div> <div><li>ccc</li></div> </ul> wrapAll之後： <ul> <div> <li>aaa</li> <li>bbb</li> <li>ccc</li> </div> </ul> wrapInner之後： <ul> <li><div>aaa</div></li> <li><div>bbb</div></li> <li><div>ccc</div></li> </ul> 可以看出所謂inner就是在裡面！ replaceWith(content|fn)： 將所有匹配元素替換成指定的HTML元素。 replaceAll(selector): 將所有匹配元素替換成選擇器匹配的元素。 [ replaceWith和replaceAll的區別： replaceWith後面只能跟html或者文字。 replaceAll只能跟選擇器選擇到的。 ] empty()： 刪除清空所有的子節點和文字。 $("p").empty(); 刪除所有p標籤的內容！ remove([expr])： expr代表的是jQuery中的選擇(選擇器)規則！ 刪除所有匹配的元素。 $("p").remove(); 刪除所有p標籤！ clone([Even[, deepEven]])： $("b").clone().prependTo("p"); 克隆所有b並且將它們前置到所有段落中去！ 克隆可以加引數：true為深複製、false為淺複製。 clone裡面如果設定為true的話則會將匹配到的元素的事件等一同複製; 否則只能複製DOM元素，不能克隆事件等。 clone之後要通過append之類的賦值到某個地方。 */ // append(content|fn) $("#btn1").click(function(){ //獲取到每個城市，後加內容 $("ul li").append("，你喜歡這個城市？").css("width", "220px"); }); // appendTo(content) $("#btn2").click(function(){ // 獲取到德國，追加 法蘭克福 // $("#ger").appendTo("<li>法蘭克福</li>"); $("<li>法蘭克福</li>").appendTo("#ger"); }); // prepend(content|fn) $("#btn3").click(function(){ //獲取到每個城市，前加內容 $("ul li").prepend("你好，").css("width", "210px"); }); // prependTo(content) $("#btn4").click(function(){ //獲取到德國，城市列表中前加 柏林 $("<li>柏林</li>").prependTo("#ger"); }); // after(content|fn) $("#btn5").click(function(){ // $("span:contains('城市')").after("<span>列表</span>"); $("span").after("<span>列表</span>"); }); // before(content|fn) $("#btn6").click(function(){ // $("span:contains('城市')").before("<span>請看</span>"); $("span").before("<span>請看</span>"); }); // insertAfter(content) $("#btn7").click(function(){ //獲取到美國的城市列表，後加入德國城市列表之後 //jQuery 方法的連綴，當呼叫方法後返回的物件還是其本身；除find()、parent()兩個方法以為 //style裡面的color沒有cGray $("#usa li").css("color", "#A9A9A9").insertAfter("#ger li"); }); // insertBefore(content) $("#btn8").click(function(){ //獲取到美國的城市列表，後加入德國城市列表之後 //jQuery 方法的連綴，當呼叫方法後返回的物件還是其本身；除find()、parent()兩個方法以為 //style裡面的color沒有cGray $("#usa li").css("color", "#A9A9A9").insertBefore("#ger li"); }); // wrap(html|ele|fn) $("#btn9").click(function(){ $("ul li").wrap("<span class='cBlue'></span>"); }); // unwrap() $("#btn10").click(function(){ $("ul li").unwrap(); }); // wrapAll(html|ele) $("#btn11").click(function(){ $("#chn li").wrapAll("<span class='cGreen'></span>"); }); // wrapInner(html|ele|fn) $("#btn12").click(function(){ $("#chn li").wrapInner("<span class='cGreen'></span>"); }); // replaceWith(content|fn) $("#btn13").click(function(){ $("#chn li").replaceWith("<span class='cOrange'>city</span>"); }); // replaceAll(selector) $("#btn14").click(function(){ $("<span class='cGreen'>所有的城市被替換了</span>").replaceAll("#usa li"); }); // empty() $("#btn15").click(function(){ // 始終牢記empty()是清空當前選擇出來的標籤的子元素，如果你寫的是#usa li // 那麼被清空的就是li中的text內容，而li標籤本身還是會被留下來！ // $("#usa li").empty(); $("#usa").empty(); }); // remove([expr]) $("#btn16").click(function(){ // 只有remove才是刪除自己。 $("#usa li").remove("#ny,#scg"); }); // clone([Even[, deepEven]]) $("#btn17").click(function(){ /* clone裡面如果設定為true的話則會將匹配到的元素的事件等一同複製; 否則只能複製DOM元素，不能克隆事件等。 */ $("#usa li").clone(true).css("color", "#A9A9A9").appendTo("#ger"); }); }); </script> </head> <body> <span>中國城市</span>：<br> <ul id="chn"> <li id="bj">北京</li> <li id="sh">上海</li> <li id="gz">廣州</li> <li id="sz">深圳</li> <li id="hk">香港</li> </ul> <br><br> <span>美國城市</span>：<br> <ul id="usa"> <li id="wst">華盛頓特區</li> <li id="ny">紐約</li> <li id="la">洛杉磯</li> <li id="scg">芝加哥</li> </ul> <br><br> <span>德國城市</span>：<br> <ul id="ger"> <li id="mnh">慕尼黑</li> </ul> <div style="clear:both;"></div> <br><br> <hr> <input type="button" id="btn1" value="append()向每個城市(li元素內)追加 ，你喜歡嗎？"> <input type="button" id="btn2" value="appendTo()向德國追加一個城市 法蘭克福"> <input type="button" id="btn3" value="prepend()向每個城市(li元素內)追加 你好，"> <input type="button" id="btn4" value="prependTo()向德國追加一個城市 柏林"> <input type="button" id="btn5" value="after()向xx城市之後追加 列表"> <input type="button" id="btn6" value="before()向xx城市之前追加 請看 "> <input type="button" id="btn7" value="insertAfter()將美國的所有城市置入德國的城市之後"> <input type="button" id="btn8" value="insertBefore()將美國的所有城市置入德國的城市之前"> <input type="button" id="btn9" value="wrap()將每個城市(li元素)用span包裹起來"> <input type="button" id="btn10" value="unwrap()將每個城市(li元素)的父元素移除"> <input type="button" id="btn11" value="wrapAll()將中國的所有城市(li元素)用一個span包裹起來"> <input type="button" id="btn12" value="wrapInner()將中國的所有城市(li元素內)每個城市內容用span包裹起來"> <input type="button" id="btn13" value="replaceWith()將中國的所有城市(li元素)替換為span元素"> <input type="button" id="btn14" value="replaceAll()將美國的所有城市(li元素)替換為span元素"> <input type="button" id="btn15" value="empty()清空美國的所有城市"> <input type="button" id="btn16" value="remove()刪除美國的紐約和芝加哥兩個城市"> <input type="button" id="btn17" value="clone()複製美國的城市到德國的城市之後"> </body> </html>