在開始展開DOM操作前，首先需要構建一棵DOM樹。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="jquery-3.2.1.js"></script> </head> <body> <p title="選擇你最喜歡的水果">你最喜歡的水果是？</p> <ul> <li title='蘋果'>蘋果</li> <li title='香蕉'><span>香蕉</span></li> <li title='荔枝'>荔枝</li> </ul> </body> </html>
接下來，對DOM的增刪改查操作都將圍繞這棵DOM樹展開。
1、查找節點
1.1查找元素節點
$(function(){ var li = $("ul li:eq(1)"); console.log(li.text()); console.log(li.html()); })
在獲取元素節點內容的時候，text()方法只對文本其作用，該方法獲得節點包含內容時，會把html標簽給刪除，只保留文本內容html()方法對"文本"和"html"代碼都起作用。
1.2查找屬性節點
$(function(){ var p = $("p"); console.log(p.attr('title')); })
attr()方法常用來獲取元素的各種屬性值，該方法可以接收一個或者兩個參數，現在，當接收一個參數時，用來查詢屬性名為該參數的屬性值，后面會繼續展示接收兩個參數的方法。
2、插入節點
在jQuery中，將新創建的節點插入到某個文檔中的方法有很多，下面先來介紹一下各種方法的特點。
- append()：向每個匹配的元素內部追加內容（成為最后一個子節點）
- appendTo()：將所有匹配的元素追加到指定的元素中，實際上就是上面的append()相反操作
- prepend()：向每個匹配的元素內部前置內容（成為第一個子節點）
- prependTo()：將所有匹配的元素前置到指定的元素中，實際上就是上面的prepend()相反操作
- after()：在每個匹配的元素之后插入內容（成為緊鄰的后一個兄弟節點）
- insertAfter()：將所有匹配的元素插入到指定元素的后面，實際上就是上面的after()相反操作
- before()：在每個匹配的元素之前插入內容（成為緊鄰的前一個兄弟節點）
- insertBefore()：將所有匹配的元素插入到指定的元素的前面，實際上就是上面的before()相反操作
下面，依舊以上面的html為基礎，逐一操作上面的方法。
append()
$(function(){ var li1 = $("<li></li>"); var li2 = $("<li title='櫻桃'>櫻桃</li>"); $("ul").append(li1); $("ul").append(li2); })
appendTo()
$(function(){ var li1 = $("<li></li>"); var li2 = $("<li title='櫻桃'>櫻桃</li>"); li1.appendTo('ul'); li2.appendTo('ul'); })
該方法還可以用來移動元素，在進行移動時，先從文檔上將該元素刪除，然后在將該元素插入到刪除后的文檔中的指定節點處。
$(function(){ var li1 =$('ul li:eq(1)'); li1.appendTo('ul'); })
prepend()
$(function(){ var li1 = $("<li></li>"); var li2 = $("<li title='櫻桃'>櫻桃</li>"); $('ul').prepend(li1); $('ul').prepend(li2); })
prependTo()
$(function(){ var li1 = $("<li></li>"); var li2 = $("<li title='櫻桃'>櫻桃</li>"); li1.prependTo('ul'); li2.prependTo('ul'); })
after()
$(function(){ var div1 = $("<div>水果</div>"); var div2 = $("<div>蔬菜</div>"); $('ul').after(div1); $('ul').after(div2); })
insertAfter()
$(function(){ var div1 = $("<div>水果</div>"); var div2 = $("<div>蔬菜</div>"); div1.insertAfter('ul'); div2.insertAfter('ul'); })
before()
$(function(){ var div1 = $("<div>水果</div>"); var div2 = $("<div>蔬菜</div>"); $('ul').before(div1); $('ul').before(div2); })
insertBefore()
$(function(){ var div1 = $("<div>水果</div>"); var div2 = $("<div>蔬菜</div>"); div1.insertBefore('ul'); div2.insertBefore('ul'); })
3、刪除節點
jQuery中提供了三種刪除節點的方法，分別為remove()、detach()和empty()。下面，依舊以最開始的html為基礎依次展示這三種方法。
remove()
該方法能從DOM中刪除所有匹配的元素，當某個節點使用該方法刪除后，該節點所包含的所有后代節點將同時被刪除，這個方法的返回值是一個指向已被刪除的節點的引用，因此，可以在以后再使用這些元素。
$(function(){ $("ul li:eq(1)").remove(); })
$(function(){ $("ul li").remove("li[title='香蕉']"); })
$(function(){ var li1 = $("ul li:eq(1)").remove(); li1.appendTo("ul"); })
detach()
detach()和remove()一樣，也是從DOM中去掉所有匹配的元素，但是，該方法不會把匹配的元素從jQuery對象中刪除，因此可以在將來再使用這些匹配的元素，並且，所有綁定的事件、附加的數據都會保留下來。
$(function(){ $("ul li").hover(function(){ alert($(this).html()); }) var li = $("ul li:eq(1)").detach(); li.appendTo("ul"); })
在上面的代碼中，刪除的li中綁定的hover事件被保存，再次使用這些元素的時候，hover事件依舊有效，但是，如果將上面的方法換成remove()方法，雖然匹配的元素依據存在，可以再次使用，但是它所綁定的事件和附加數據都不會保留，也就是說hover事件不會繼續存在。
empty()
嚴格來講，empty()方法並不是刪除節點，而是清空節點，它能清空元素中的所有后代節點。
$(function(){ $("ul li:eq(1)").empty(); })
4、復制節點
在jQuery中，常用clone() 方法生成被選元素的副本，包含子節點、文本和屬性。該參數接收一個可選參數，規定是否復制元素的所有事件處理。默認地，副本中不包含事件處理器。
上面通過li的點擊事件復制了li,並將其追加到ul中，但是，此時新追加的節點並不具備任何行為，想要新的節點也具有復制前的節點的行為，需要向clone()方法中添加參數。
$("ul li").click(function(){ $(this).clone(true).appendTo("ul"); })
該參數表明，復制元素的同時復制元素中所綁定的事件，也就是說，新添加的復制節點也具有點擊事件。
5、替換節點
在jQuery中，替換節點有兩種方法：replaceWidth()和replaceAll()。其中，replaceWidth()方法的作用是將所有匹配的元素都替換成指定的HTML或者DOM元素。replaceAll()方法與replaceWidth()方法的作用相同，只是顛倒了replaceWidth()操作。需要注意的是，不管采用哪種方法，如果在替換前已經為元素綁定了事件，替換后原來綁定的事件將會與被替換的元素一起消失，需要在新元素上重新綁定事件。
6、包裹節點
如果要將某個節點用其他標記包裹起來，jQuery提供了三種方法，現在，依次演示這三種方法。
wrap()
該方法對於需要在文檔中插入額外的結構化標記非常有用，而且它不會破壞原始文檔的語義。
$(function(){ $("span").wrap("<strong style='color:red;'></strong>") })
wrapAll()
該方法會將所有匹配的元素用一個元素來包裹，而wrap()方法則是將所有的元素進行單獨的包裹。
為了演示兩者的區別，先對原來的html進行調整。
<ul> <li title='蘋果'>蘋果</li> <li title='香蕉'><span>香蕉</span></li> <li title='菠蘿'><span>菠蘿</span></li> <li title='荔枝'>荔枝</li> </ul>
首先使用wrap()方法將所有的元素進行單獨的包裹，此時，每一個匹配的元素都分別進行了包裹。
$(function(){ $("span").wrap("<strong style='color:red;'></strong>") })
再使用wrapAll()將所有匹配的元素用一個元素來包裹，此時，兩個匹配的元素被同時包裹到了一個<strong>元素中，而li這種處於被包裹的多個元素間的其他元素，被放到了包裹元素之后。
$(function(){ $("span").wrapAll("<strong style='color:red;'></strong>") })
wrapInner()
該方法將每一個匹配的元素中的子內容（包括文本節點）用其他結構化的標記包裹起來。
$(function(){ $("span").wrapInner("<strong style='color:red;'></strong>") })
與前面兩個方法不同的是，這個方法中，包裹的是匹配元素的子元素，而不是匹配的元素，也就是上面所示，<strong>在<span>里面。