jQuery的DOM操作：建立節點、添加節點、删除節點、複制節點、替換節點和包裹節點。也就是對文檔中的元素節點、屬性節點和文本節點進行增删改查，隻不過在原生JS基礎上進行封裝和增加了許多方法，是以能夠更友善的操作DOM。
擷取元素節點
jQuery擷取DOM元素是使用選擇器，至于選擇器的使用這裡就不介紹了，請戳jQuery選擇器總結。 如果有時候為了提高運作效率，可以先用原生JS擷取元素節點，之後再轉成jQuery對象進行操作也是可行的。
建立DOM節點
jQuery建立DOM節點是通過傳入一個HTML格式字元串給構造函數，jQuery會傳回包含該元素的jQuery對象。 傳入的HTML格式需帶有閉合标簽或完整标簽名。 這種建立節點形式是動态建立的，也可以将别的jQuery對象傳入進來，相當于克隆。
$("<div/>") //無子元素或文本内容,寫成閉合标簽
$("<div></div>") //完整格式，可嵌套子元素或文本
//不加斜杠非閉合标簽，會被解析成如下方式
$("<div>") == $( document.createElement("div") )
$("div") //直接寫元素名，相當于元素選擇器，無效...
$("<p>我是段落</p>") //HTML内容，嵌套文本
$("<p></p>").text("傳入字元串内容"); //靈活一點，動态設定文本
//方法連寫
$("<div><ul><li></li></ul></div>")
.appendTo($('body')) //添加進body元素中，這裡傳回的依然是原jQuery對象。
.find("li").text("OK"); //後代元素中找<li>元素，設定它們的文本内容
jQuery建立節點支援HTML内容，是以無需建立多個元素節點。在上面執行個體中，還使用了jQuery方法的連寫方式：鍊式操作方式。
鍊式操作方式
對發生在同一個jQuery對象上的一組動作，可以直接連接配接而無須重複擷取對象。
//鍊式操作
$("div p").text("一段話").css("color", "red");
$("div").append( $("<button>按鈕</button>").css("color", "red") );
如果寫多了就會明白，當方法傳回某個值時，鍊式操作是沒辦法進行的，例如調用 text()、html()和val()方法，後續不能鍊式操作。個人簡單了解：因為方法存在傳回值，當傳回的非jQuery對象時，後續自然無法調用jQuery方法，也就無法繼續鍊式操作。
添加節點
- append() : 給選取元素的内部尾部添加内容(元素、innerHTML、文本)。
- prepend()： 給選取元素的内部開頭處添加内容(元素、innerHTML、文本)。
- appendTo() ： 把選取元素添加到指定DOM元素内部的結尾處，和上面append()是一樣的。
- prependTo()： 給選取元素的内部開頭處添加内容(元素、innerHTML、文本)。
操作同級節點
- before() ： 在選取元素之前添加内容。
- after()： 在選取元素之後添加内容。
- insertBefore()：将選取元素插入到指定元素前面。
- insertAfter()： 将選取元素插入到指定元素之後。
$("body").append("<div/>"); //給<body>元素尾部添加一個div元素
$("body").append("<p>一段話</p>"); //等同于append( $("<p>一段話<p>") )
$("body p").append("作為文本節點"); //給<body>中的所有<p>元素的尾部添加文本節點
//appendTo() 将什麼添加到什麼的尾部位置
$("<h1>可以</h1>").appendTo("body");
$("<p>一段小文本</p>").appendTo("body");
//prepend() 給div元素中的頭部位置添加如下元素
$("div").prepend("<p>第二位</p>");
$("div").prepend("<p>第一位</p>");
//prependTo() 将什麼添加到什麼的頭部位置
$("<button>按鈕1</button>").prependTo("span");
$("body").append("<div id='abc'>我是div#abc</div>");
//在id為abc的div元素前面，添加如下元素
$("div#abc").before("<p>在div前面</p>");
//在id為abc的div元素後面，添加如下元素
$("div#abc").after("<h5>在div後面</h5>");
//把如下建立的元素 添加到id為abc的div元素之前
$("<p/>").text("insertBefore").insertBefore("div#abc");
//把如下建立的元素 添加到id為abc的div元素之後
$("<div/>").text("insertAfter").insertAfter("div#abc");
這些DOM操作方法的參數都是以選擇器作為參數，會進行比對元素的操作，是以不需要$(selector)擷取元素節點後再傳入進來。
删除節點
- remove( [selector] ) ： 移除所有比對的元素， 可根據可選的selector來篩選元素。
- remove()移除元素後，會傳回被移除的jQuery對象，可以寫成鍊式操作。可以将該元素移動到其他元素中，相當于appendTo()。
- empty() : 删除所有的後代元素，相當于清空節點。
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
<script>
//選取<ul>中所有<li>元素，對它們進行移除操作
$("ul li").remove();
//移除選取的<ul>元素
$("ul").remove();
//移除選取的<li>元素中第一個<li>元素
$("ul li").remove(":eq(0)"); //$("ul li:eq(0)").remove();
//find()查找後代元素，移除index > 3的<li>元素
$("ul").find("li").remove(":gt(3)");
//将移除的第一個<li>元素 插入到最後一個<li>元素的後面
$("ul li:first").remove().insertAfter("ul li:last");
//選取所有的li元素，然後清空它們的後代所有節點。所有<li>文本值都會清空
$("ul li").empty();
//移除ul中所有元素
$("ul").empty();
//使用html("")來完成此效果, 相當于innerHTML = "";
$("ul li").html(""); $("ul").html("");
</script>
複制節點
- clone()：建立調用該方法的jQuery對象副本（即選取的元素副本），然後傳回該對象，完成複制。
<div id="div_1" style="width:80px; height:50px; font-size: 15px; background-color: pink;">
點一下複制一下
</div>
<script>
//單擊該<div>元素，會複制一份，然後被<body>元素添加到尾部
$("#div_1").on("click", function(){
$("body").append( $("#div_1").clone() );
});
</script>
替換節點
- $(selector).replaceWith(content) : content是DOM元素 或者是 HTML代碼。
- $(content).replaceAll(selector)： 将内容替換比對到的所有元素。
replaceWith() 和 replaceAll() 兩個方法都是用于替換内容，作用相同，隻是颠倒一下文法， 和之前的append() appendTo() prepend()和prependTo() 差不多。 翻譯成中文就一目了然了，replaceWith:用什麼來替換； replaceAll():替換全部。
<p>1</p>
<p>2</p>
<script>
//選取所有<p>元素，用如下HTML代碼來替換
$("p").replaceWith("<h6>替換掉P标簽</h6>");
//建立div元素，用于代替所有的<h6>元素
$("</div>").replaceAll("h6"); //使用閉合标簽形式替換相應元素後，也會消失，即不存在。
$("<div></div>").replaceAll("h6"); //标簽元素會存在。
要注意，閉合标簽形式替換相應元素後，也會不存在，例如上面執行個體中的</div>。 要使用完整形式建立DOM元素才不會消失。 還有，如果将已有的元素作為替換元素，那麼原來的元素就會被移除。
包裹節點
當需要對文檔中某些DOM元素插入額外的結構化标記非常有用，而且不會破壞原始文檔的語義。使用起來就像動态代理一樣，不會影響原始代碼，使用時才會做相關操作。
- wrap() ： 把比對的元素用指定的元素或HTML内容包裹起來。
- wrapAll()：所有的比對元素都隻用一個元素來包裹。即隻有一個父元素。
- wrapInner()：把比對元素的内部(子元素、文本)用其他結構化的标記包裹起來。
<span>span标簽</span>
<p>P1</p>
<p>P2</p>
<h5>H5标簽</h5>
<div>
<p>内部p1</p>
<p>内部p2</p>
<p>内部p3</p>
</div>
<script>
//把選取的<span>元素 用指定HTML代碼包裹起來
$("span").wrap("<div>wrap測試:</div>");
//把所有<p>元素都包裹到一個<div>元素中
$("p").wrapAll("<div id='all_wrap'></div>");
//選取<h5>元素， 内部内容被如下的HTML内容包裹起來
$("h5").wrapInner("<span style='color:red;'>wrapInner：</span>");
</script>
wrapAll() 會把所有的比對元素都聚集在一起，如果比對的元素處于其他元素中，會被移除，然後轉移。是以上面<div>元素中的<p>元素都被移除了。
DOM元素的屬性操作
attr()：設定或者擷取相關屬性， 相當于綜合了setAttribute()和getAttribute()用法。
文法：$(selector).attr("key", "value")、$(selector).attr("key")
removeAttr()：删除指定屬性。
文法：$(selector).attr("attrName")
<div id="d1">123456</div>
<p id="d1">一段文本</p>
<script>
//設定style屬性和class屬性
$("#d1").attr("style", "color:red;");
$("#d1").attr("class", "test");
//擷取style屬性的值
$("#d1").attr("style");
//删除class屬性
$("#d1").removeAttr("class");
批量設定屬性
//使用json對象來作為屬性參數，批量設定屬性
$(selector).attr({
key : value,
key : value,
...
});
DOM元素的文本操作
- html()：擷取和設定比對元素的HTML内容，相當于innerHTML。
- text()：擷取和設定比對元素的文本内容，相當于innerText。
- val()：擷取和設定比對元素的value值，一般用于表單元素。
<div>
<p id="p1">第一段文本</p>
<div>
<p>内部文本1</p>
<p>内部文本2</p>
</div>
</div>
<input type="button" value="簡單按鈕"/>
<script>
//擷取id=p1的元素中的HTML内容
$("#p1").html();
//設定id=p1的元素中由如下内容來填充。
$("#p1").html("<strong>strong文本<strong>");
//擷取第一個<div>元素中所有文本内容
var $allText = $("div:eq(0)").text();
console.log($allText);
//選取第二個<div>元素中的<p>元素，設定相關文本
$("div:eq(1) p").text("設定一下文本内容咯");
//選取type = button 的<input>元素的value
$(":button").val();
$(":button").val("設定按鈕值");
關于jQuery操作DOM的方法就介紹到這裡，如果想了解更多的細節，可以去查詢jQuery教程。