1.DOM創(chuàng)建節(jié)點(diǎn)及節(jié)點(diǎn)屬性
創(chuàng)建流程比較簡單，大體如下：
創(chuàng)建節(jié)點(diǎn)(常見的：元素妥凳、屬性和文本)
添加節(jié)點(diǎn)的一些屬性
加入到文檔中
流程中涉及的一點(diǎn)方法：
創(chuàng)建元素：document.createElement
設(shè)置屬性：setAttribute
添加文本：innerHTML
加入文檔：appendChild(注意append和appendChild方法的區(qū)別)
2.jQuery節(jié)點(diǎn)創(chuàng)建與屬性的處理
創(chuàng)建元素節(jié)點(diǎn)：
可以有幾種方式秩仆，后面會慢慢接觸。
常見的就是直接把這個節(jié)點(diǎn)的結(jié)構(gòu)給通過HTML標(biāo)記字符串描述出來 $("html結(jié)構(gòu)")
$("<div></div>")
創(chuàng)建文本節(jié)點(diǎn)：
與創(chuàng)建元素節(jié)點(diǎn)類似猾封，可以直接把文本內(nèi)容一并描述
$("<div>我是文本節(jié)點(diǎn)</div>")
創(chuàng)建為屬性節(jié)點(diǎn)：
與創(chuàng)建元素節(jié)點(diǎn)同樣的方式
$("<div id='test' class='aaron'>我是屬性節(jié)點(diǎn)</div>")
3.DOM內(nèi)部插入append()與appendTo()
$(".content").append('<div class="append">通過append方法添加的元素</div>')
$$ ('<div class="appendTo">通過appendTo方法添加的元素</div>').appendTo($(".content"))
4.DOM外部插入after()與before()
5.DOM內(nèi)部插入prepend()與prependTo()
.prepend()方法將指定元素插入到匹配元素里面作為它的第一個子元素 (如果要作為最后一個子元素插入用.append()).
.prepend()和.prependTo()實(shí)現(xiàn)同樣的功能，主要的不同是語法噪珊，插入的內(nèi)容和目標(biāo)的位置不同
6.DOM外部插入insertAfter()與insertBefore()
.before()和.insertBefore()實(shí)現(xiàn)同樣的功能晌缘。主要的區(qū)別是語法——內(nèi)容和目標(biāo)的位置。 對于before()選擇表達(dá)式在函數(shù)前面痢站，內(nèi)容作為參數(shù)磷箕，而.insertBefore()剛好相反，內(nèi)容在方法前面阵难，它將被放在參數(shù)里元素的前面
.after()和.insertAfter() 實(shí)現(xiàn)同樣的功能岳枷。主要的不同是語法——特別是（插入）內(nèi)容和目標(biāo)的位置。 對于after()選擇表達(dá)式在函數(shù)的前面呜叫，參數(shù)是將要插入的內(nèi)容空繁。對于 .insertAfter(), 剛好相反，內(nèi)容在方法前面朱庆，它將被放在參數(shù)里元素的后面
before盛泡、after與insertBefore。insertAfter的除了目標(biāo)與位置的不同外娱颊，后面的不支持多參數(shù)處理
注意事項：
insertAfter將JQuery封裝好的元素插入到指定元素的后面傲诵，如果元素后面有元素了凯砍，那將后面的元素后移，然后將JQuery對象插入拴竹；
insertBefore將JQuery封裝好的元素插入到指定元素的前面悟衩，如果元素前面有元素了，那將前面的元素前移栓拜，然后將JQuery對象插入座泳；
7.DOM節(jié)點(diǎn)刪除之empty()的基本用法
這個方法不僅移除子元素（和其他后代元素），同樣移除元素里的文本菱属。因為钳榨，根據(jù)說明，元素里任何文本字符串都被看做是該元素的子節(jié)點(diǎn)
//通過empty處理
$('.hello').empty()
8.DOM節(jié)點(diǎn)刪除之remove()的有參用法和無參用法
remove與empty一樣纽门，都是移除元素的方法薛耻，但是remove會將元素自身移除，同時也會移除元素內(nèi)部的一切赏陵，包括綁定的事件及與該元素相關(guān)的jQuery數(shù)據(jù)饼齿。
empty方法
嚴(yán)格地講，empty()方法并不是刪除節(jié)點(diǎn)蝙搔，而是清空節(jié)點(diǎn)缕溉，它能清空元素中的所有后代節(jié)點(diǎn)
empty不能刪除自己本身這個節(jié)點(diǎn)
remove方法
該節(jié)點(diǎn)與該節(jié)點(diǎn)所包含的所有后代節(jié)點(diǎn)將同時被刪除
提供傳遞一個篩選的表達(dá)式，刪除指定合集中的元素
9.DOM節(jié)點(diǎn)刪除之保留數(shù)據(jù)的刪除操作detach()
這個方法不會把匹配的元素從jQuery對象中刪除吃型，因而可以在將來再使用這些匹配的元素证鸥。與remove()不同的是，所有綁定的事件勤晚、附加的數(shù)據(jù)等都會保留下來枉层。
$("div").detach()這一句會移除對象，僅僅是顯示效果沒有了赐写。但是內(nèi)存中還是存在的鸟蜡。當(dāng)你append之后，又重新回到了文檔流中挺邀。就又顯示出來了揉忘。
remove：移除節(jié)點(diǎn)
無參數(shù)，移除自身整個節(jié)點(diǎn)以及該節(jié)點(diǎn)的內(nèi)部的所有節(jié)點(diǎn)端铛，包括節(jié)點(diǎn)上事件與數(shù)據(jù)
有參數(shù)泣矛，移除篩選出的節(jié)點(diǎn)以及該節(jié)點(diǎn)的內(nèi)部的所有節(jié)點(diǎn)，包括節(jié)點(diǎn)上事件與數(shù)據(jù)
detach：移除節(jié)點(diǎn)
移除的處理與remove一致
與remove()不同的是禾蚕，所有綁定的事件乳蓄、附加的數(shù)據(jù)等都會保留下來
例如：$("p").detach()這一句會移除對象，僅僅是顯示效果沒有了夕膀。但是內(nèi)存中還是存在的虚倒。當(dāng)你append之后美侦，又重新回到了文檔流中。就又顯示出來了魂奥。
10.DOM拷貝clone()
.clone()方法深度 復(fù)制所有匹配的元素集合菠剩，包括所有匹配元素、匹配元素的下級元素耻煤、文字節(jié)點(diǎn)具壮。
clone()方法時，在將它插入到文檔之前哈蝇，我們可以修改克隆后的元素或者元素內(nèi)容棺妓，如右邊代碼我 $(this).clone().css('color','red') 增加了一個顏色
通過傳遞true，將所有綁定在原始元素上的事件處理函數(shù)復(fù)制到克隆元素上
clone()方法是jQuery擴(kuò)展的炮赦，只能處理通過jQuery綁定的事件與數(shù)據(jù)
元素數(shù)據(jù)（data）內(nèi)對象和數(shù)組不會被復(fù)制怜跑，將繼續(xù)被克隆元素和原始元素共享。深復(fù)制的所有數(shù)據(jù)吠勘，需要手動復(fù)制每一個
11.DOM替換replaceWith()和replaceAll()
.replaceWith( newContent )：用提供的內(nèi)容替換集合中所有匹配的元素并且返回被刪除元素的集合
**.replaceAll( target ) **：用集合的匹配元素替換每個目標(biāo)元素
.replaceAll()和.replaceWith()功能類似性芬，主要是目標(biāo)和源的位置區(qū)別
.replaceWith()與.replaceAll() 方法會刪除與節(jié)點(diǎn)相關(guān)聯(lián)的所有數(shù)據(jù)和事件處理程序
.replaceWith()方法，和大部分其他jQuery方法一樣剧防，返回jQuery對象雹嗦，所以可以和其他方法鏈接使用
.replaceWith()方法返回的jQuery對象引用的是替換前的節(jié)點(diǎn)狠持，而不是通過replaceWith/replaceAll方法替換后的節(jié)點(diǎn)
12.DOM包裹wrap()方法
.wrap( wrappingElement )：在集合中匹配的每個元素周圍包裹一個HTML結(jié)構(gòu) $('p').wrap('<div></div>')
13.DOM包裹unwrap()方法
jQuery提供了一個unwarp()方法 弧满，作用與wrap方法是相反的咬扇。將匹配元素集合的父級元素刪除，保留自身（和兄弟元素鸡挠，如果存在）在原來的位置辉饱。
$('p').unwarp();
14.DOM包裹wrapAll()方法
.wrapAll( wrappingElement )：給集合中匹配的元素增加一個外面包裹HTML結(jié)構(gòu)
15.DOM包裹wrapInner()方法
.wrapInner( wrappingElement )：給集合中匹配的元素的內(nèi)部，增加包裹的HTML結(jié)構(gòu)
$('div').wrapInner('<p></p>')
最后的結(jié)構(gòu)宵凌，匹配的di元素的內(nèi)部元素被p給包裹了
<div>
<p>p元素</p>
</div>
<div>
<p>p元素</p>
</div>
16.jQuery遍歷之children()方法
jQuery是一個合集對象，如果想快速查找合集里面的第一級子元素止后，此時可以用children()方法瞎惫。這里需要注意：.children(selector) 方法是返回匹配元素集合中每個元素的所有子元素（僅兒子輩，這里可以理解為就是父親-兒子的關(guān)系）
17.jQuery遍歷之find()方法
.find()方法要注意的知識點(diǎn)：
find是遍歷當(dāng)前元素集合中每個元素的后代译株。只要符合瓜喇，不管是兒子輩，孫子輩都可以歉糜。
與其他的樹遍歷方法不同乘寒，選擇器表達(dá)式對于 .find() 是必需的參數(shù)。如果我們需要實(shí)現(xiàn)對所有后代元素的取回匪补，可以傳遞通配選擇器 '*'伞辛。
find只在后代中遍歷烂翰，不包括自己。
選擇器 context 是由 .find() 方法實(shí)現(xiàn)的蚤氏；因此甘耿，
('li', '.item-ii')(找到類名為item-ii的標(biāo)簽下的li標(biāo)簽)。
18.jQuery遍歷之parent()方法
jQuery是一個合集對象竿滨，如果想快速查找合集里面的每一個元素的父元素（這里可以理解為就是父親-兒子的關(guān)系）佳恬，此時可以用parent()方法
parent()方法允許我們能夠在DOM樹中搜索到這些元素的父級元素，從有序的向上匹配元素于游，并根據(jù)匹配的元素創(chuàng)建一個新的 jQuery 對象
注意：jQuery是一個合集對象毁葱，所以通過parent是匹配合集中每一個元素的父元素
19.****jQuery遍歷之parents()方法
Query是一個合集對象，如果想快速查找合集里面的每一個元素的所有祖輩元素贰剥，此時可以用parents()方法
20.jQuery遍歷之closest()方法
closest()方法接受一個匹配元素的選擇器字符串
注意：jQuery是一個合集對象倾剿，所以通過closest是匹配合集中每一個元素的祖先元素
21.jQuery遍歷之next()方法
如果想快速查找指定元素集合中每一個元素緊鄰的后面同輩元素的元素集合，此時可以用next()方法
注意：jQuery是一個合集對象鸠澈，所以通過next匹配合集中每一個元素的下一個兄弟元素
22.jQuery遍歷之prev()方法
prev()無參數(shù)
取得一個包含匹配的元素集合中每一個元素緊鄰的前一個同輩元素的元素集合
23.jQuery遍歷之siblings()
如果想快速查找指定元素集合中每一個元素的同輩元素柱告，此時可以用siblings()方法 選區(qū)上和下
24.jQuery遍歷之a(chǎn)dd()方法
如果后期需要再往這個合集中添加一新的元素要如何處理？jQuery為此提供add方法笑陈，用來創(chuàng)建一個新的jQuery對象 际度，元素添加到匹配的元素集合中
.add()的參數(shù)可以幾乎接受任何的$()，包括一個jQuery選擇器表達(dá)式涵妥，DOM元素乖菱，或HTML片段引用。
25.jQuery遍歷之each()
jQuery是一個合集對象蓬网，通過("li").css('') 給所有的li設(shè)置style值，因為jQuery是一個合集對象帆锋，所以css方法內(nèi)部就必須封裝一個遍歷的方法吵取，被稱為隱式迭代的過程。要一個一個給合集中每一個li設(shè)置顏色锯厢，這里方法就是each
.each() 方法就是一個for循環(huán)的迭代器皮官，它會迭代jQuery對象合集中的每一個DOM元素。每次回調(diào)函數(shù)執(zhí)行時实辑，會傳遞當(dāng)前循環(huán)次數(shù)作為參數(shù)(從0開始計數(shù)
$("li").each(function(index, element) {
index 索引 0,1
element是對應(yīng)的li節(jié)點(diǎn) li,li
this 指向的是li
})
ajax中 $.each(data, function (index, sport)
function (index, value)中index是當(dāng)前元素的位置捺氢，value是值。
本文參考自熊一樂的博客剪撬，用于學(xué)習(xí)
