本系列適合作為JQ的復(fù)習(xí)文檔。
本章主要參考來源：綠葉學(xué)習(xí)網(wǎng) - jQuery入門教程
3 DOM操作
DOM，“Document Object Model（文檔對象模型）”。
3.1 創(chuàng)建節(jié)點
var e = $(HTML標(biāo)簽字符串);
$().append(e); //append()方法表示向所選元素內(nèi)部的“末尾”插入內(nèi)容
PS:對于jQuery創(chuàng)建的節(jié)點，變量命名習(xí)慣用“$”開頭，以表示這是一個jQuery對象。
對比；JS的語法：
var e = document.createElement("元素名"); //創(chuàng)建元素節(jié)點
var t = document.createTextNode("元素內(nèi)容"); //創(chuàng)建文本節(jié)點
e.appendChild(t); //把元素內(nèi)容插入元素中去
3.2 插入節(jié)點
兩組的效果是相同的，記一組就好，推薦第2組。
//第1組
append()、prepend()、before()、after()
//第2組
appendTo()、prependTo()、insertBefore()、insertAfter()
3.2.1 內(nèi)部插入節(jié)點
- append()和appendTo()
$(A).append(B) //表示在A內(nèi)部的“末尾”插入B。
$(A).appendTo(B) //表示將A插入B內(nèi)部的“末尾”。 - prepend()和prependTo()；
$(A).prepend(B) //表示在A內(nèi)部的“開始”插入B。
$(A).prependTo(B) //表示將A插入B內(nèi)部的“開始”。
3.2.2 外部插入節(jié)點
- before()和insertBefore()
$(A).before(B) //表示在A“之前”插入B。
$(A).insertBefore(B) //表示將A插入B“之前”。 - after()和insertAfter()
$(selector).after(content) //表示在content之后插入selector。
$(content).insertAfter(selector) //表示在content之后插入selector。
3.3 刪除節(jié)點
$(A).remove(expression)表示刪除符合expression條件的A元素。當(dāng)expression省略，即$(A).remove()時，表示刪除所有的A元素。
一般情況下，建議使用無參數(shù)的remove()方法，直接把篩選條件放在$()選擇器里面，沒必要多此一舉把篩選條件放在方法后面。
3.3.1 remove()
$(A).remove() // 徹底刪除，刪除元素和事件；將自身節(jié)點以及后代節(jié)點一并刪除
remove()方法可以返回一個值，返回值類型為刪除的jQuery節(jié)點對象。
使用變種：來進(jìn)行兩個元素的互換
$("#btn").click(function () {
//將內(nèi)容為“CSS”這一個li刪除并賦值給$li1
var $li1 = $("ul li:eq(1)").remove();
$($li1).insertAfter("ul li:eq(1)");
//將內(nèi)容為“jQuery”這一個li刪除并賦值給$li2
var $li2 = $("ul li:eq(3)").remove();
$($li2).insertBefore("ul li:eq(1)");
})
3.3.2 detach()
$(A).detach() //半刪除，刪除元素，不刪除事件；將自身節(jié)點以及后代節(jié)點一并刪除
總結(jié)：
當(dāng)我們刪除節(jié)點后，如果希望重新使用該節(jié)點，并且希望被刪除的節(jié)點在重新使用后還能保留原來綁定的事件，應(yīng)該使用detach()而不是remove()。
3.3.3 empty()
$(A).empty() //清空A，僅刪除后代節(jié)點，而保留自身節(jié)點。
3.4 復(fù)制節(jié)點
$(A).clone() //將A節(jié)點復(fù)制，但不復(fù)制A節(jié)點所綁定的事件。
$(A).clone(true) //將A節(jié)點復(fù)制，并且復(fù)制A節(jié)點所綁定的事件。
clone()方法的布爾參數(shù)默認(rèn)為false。
3.5 替換節(jié)點
如果在替換節(jié)點之前，已經(jīng)為元素綁定了事件；那么，使用replaceWith()或replaceAll()之后，該元素所綁定的事件會消失。因此，如果想要保留事件，則需要在新元素上重新綁定事件。
3.5.1 replaceWith()
$(A).replaceWith(B) //表示用B來替換A。
3.5.2 replaceAll()
$(A).replaceAll(B) //表示用A來替換B。
3.6 包裹節(jié)點
3.6.1 wrap()
$(A).wrap(B) //表示用B元素將A元素包裹起來。
3.6.2 wrapAll()
$(A).wrapAll(B) //表示用1個B來包裹所有匹配的元素A。與wrap()不等價
3.6.3 wrapInner()
$(A).wrapInner(B) //表示將A元素“所有內(nèi)部子元素”使用B元素包裹起來（不包括A本身）。
3.7 遍歷節(jié)點
$(selector).each(function(index,element)) //each() 方法規(guī)定為每個匹配元素規(guī)定運行的函數(shù)。
// index - 選擇器的 index 位置
// element - 當(dāng)前的元素（也可使用 "this" 選擇器）