標籤：使用 before 記錄 -name 文本 事件 附加 new 失效
上一篇文章是記錄了jquery中選取器的作用，這裡只要記錄下jquery中的DOM操作，還是按照上篇的格式來。
下面是測試用的html代碼，接下來DOM的操作會在下面的代碼下進行。
1 <body>2 <p>你最喜歡的水果是?</p>3 <ul>4 <li>蘋果</li>5 <li>橘子</li>6 <li>梨子</li>7 <li>banana</li>8 </ul>9 </body>
1 <script> 2 $(function(){ 3 var $newLi1 = $("<li>桃子</li>")//$(html),會根據傳入的html建立一個DOM對象並且加工成jQuery對象後返回。; 4 var $newLi2 = $("<li>西瓜</li>");//上面這種方法傳入的html格式是需要閉合的，並且標籤是需要小寫。可以傳入$("<li />") 5 var $newLi3 = $("<li title=‘奇異果‘>奇異果</li>")//如果在在建立的html中包含屬性或者特性也會體現在建立好的元素中 6 var $newLi4 = $("<li data-name=‘xwt‘>葡萄</li>") 7 var $ul = $("ul"); 8 $ul.append($newLi1);//append方法是向每個匹配的元素內部追加內容（在結束標籤的前面新增內容，添加的內容被元素包圍） 9 $newLi2.appendTo($ul);//appendTo是將所以匹配的元素追加到傳入元素的內部。和上面的方法大致相同，只是兩個元素的位置改變了。10 $ul.prepend($newLi3);//prepend將匹配的元素頭部追加元素。另外同append相同11 $newLi4.prependTo($ul);//prependTo將匹配的元素追加到傳入的元素中。其他同appendTo12 $ul.after($("<button>測試</button>"));//after是在指定元素的後面（不是內部）添加相關的元素;insertAfter()方法顛倒了2個對象的位置。13 $("button").before("<button>測試1</button>");//特別注意：以上的每個插入對象的方法(如append,prepend,after,before)參數可以是jquery對象，即$("XXX")，也可以是普通文本。14 $("<p>123</p>").insertBefore("button:first");//如果文本符合html文法，則建立相應的element，否則以文本插入15 $("li:first-child").after($("li:nth-child(2)"));//如果是操作已有的節點，這些方法也可以用於元素的移動。也可寫成.after("li:nth-child(2)")16 var $lastLi = $("ul > li:last").remove();//移除最後一個ul中的li節點。如果不傳參數則刪除全部匹配的元素集合。刪除後返回引用remove之前的對象，包含刪除的元素。17 var $lastSecondLi = $("ul > li").detach(":last");//使用方法和remove基本相同。但是detach不會刪除元素已經綁定的函數和附加資料18 $lastSecondLi.appendTo($ul);//添加回去刪除的倒數第二個元素19 $ul.append($lastLi);//將已經刪除掉的li元素重新添加回來。如果之前該元素繫結過函數或者附加資料，重新添加回去以後函數綁定失效，丟失附加資料20 $("ul > li:first").appendTo($ul);//appendTo方法簡化上面2部。原理相同，先刪除指定元素在添加回去21 $("button").empty();//empty()並不是刪除節點，而是清除元素的所有後代節點22 var $ul2 = $("ul").clone();//複製當前的元素對象，但是該對象和複製的對象是完全不同的2個對象。包括裡面封裝的DOM元素也是不用的。如果想複製其綁定事件,則用XX.clone(true);23 $("button").replaceWith($("<input type=‘checkbox‘>"));//用括弧中的元素替換前面的元素。綁定的事件會失效。replaceAll作用相同，顛倒2個元素的位置而已24 $("li").wrap("<strong></strong>");//會為每個匹配的元素在外層包裹一個strong標籤25 $("li").wrapAll($("<div></div>"));//會為匹配到的所有元素一起在外層包裹一個div。如果被包裹的多個元素之間有其他元素則會被放到包裹元素之後26 $("li").wrapInner("<span></span");//會為每個匹配中的元素的子節點外邊包裹一層標籤27 });28 </script>
操作DOM元素的主要方法和功能都在注釋中詳細說明了。這裡還沒有介紹jquery操作屬性和css等相關方法，下次有空再記錄下。
jquery DOM操作（一）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
