jQuery基礎（DOM篇，append()，after()，prepend()，insertAfter()，節點刪除，遍歷方法each()）

1.DOM創建節點及節點屬性

 

創建流程比較簡單，大體如下：

 

- 創建節點(常見的：元素、屬性和文本)

- 添加節點的一些屬性

- 加入到文檔中

 

流程中涉及的一點方法：

 

- 創建元素：document.createElement

- 設置屬性：setAttribute

- 添加文本：innerHTML

- 加入文檔：appendChild

 

2.jQuery節點創建與屬性的處理

 

創建元素節點：

 

可以有幾種方式，后面會慢慢接觸。常見的就是直接把這個節點的結構給通過HTML標記字符串描述出來，通過$()函數處理，$("html結構")

 

$("<div></div>")

 

創建為本節點：

 

與創建元素節點類似，可以直接把文本內容一並描述

 

$("<div>我是文本節點</div>")

 

創建為屬性節點：

 

與創建元素節點同樣的方式

 

$("<div id='test' class='aaron'>我是文本節點</div>")

 

3.DOM內部插入append()與appendTo()

 

 

 

$(".content").append('<div class="append">通過append方法添加的元素</div>')

 

$('<div class="appendTo">通過appendTo方法添加的元素</div>').appendTo($(".content"))

 

4.DOM外部插入after()與before()

 

 

 

5.DOM內部插入prepend()與prependTo()

 

 

- .prepend()方法將指定元素插入到匹配元素里面作為它的第一個子元素 (如果要作為最后一個子元素插入用.append()).

- .prepend()和.prependTo()實現同樣的功能，主要的不同是語法，插入的內容和目標的位置不同

 

6.DOM外部插入insertAfter()與insertBefore()

 

 

 

- .before()和.insertBefore()實現同樣的功能。主要的區別是語法——內容和目標的位置。 對於before()選擇表達式在函數前面，內容作為參數，而.insertBefore()剛好相反，內容在方法前面，它將被放在參數里元素的前面

- .after()和.insertAfter() 實現同樣的功能。主要的不同是語法——特別是（插入）內容和目標的位置。 對於after()選擇表達式在函數的前面，參數是將要插入的內容。對於 .insertAfter(), 剛好相反，內容在方法前面，它將被放在參數里元素的后面

- before、after與insertBefore。insertAfter的除了目標與位置的不同外，后面的不支持多參數處理

 

注意事項：

 

- insertAfter將JQuery封裝好的元素插入到指定元素的后面，如果元素后面有元素了，那將后面的元素后移，然后將JQuery對象插入；

- insertBefore將JQuery封裝好的元素插入到指定元素的前面，如果元素前面有元素了，那將前面的元素前移，然后將JQuery對象插入；

 

7.DOM節點刪除之empty()的基本用法

 

這個方法不僅移除子元素（和其他后代元素），同樣移除元素里的文本。因為，根據說明，元素里任何文本字符串都被看做是該元素的子節點

 

//通過empty處理

$('.hello').empty()

 

8.DOM節點刪除之remove()的有參用法和無參用法

 

remove與empty一樣，都是移除元素的方法，但是remove會將元素自身移除，同時也會移除元素內部的一切，包括綁定的事件及與該元素相關的jQuery數據。

 

empty方法

 

- 嚴格地講，empty()方法並不是刪除節點，而是清空節點，它能清空元素中的所有后代節點

- empty不能刪除自己本身這個節點

 

remove方法

 

- 該節點與該節點所包含的所有后代節點將同時被刪除

- 提供傳遞一個篩選的表達式，刪除指定合集中的元素

 

9.DOM節點刪除之保留數據的刪除操作detach()

 

這個方法不會把匹配的元素從jQuery對象中刪除，因而可以在將來再使用這些匹配的元素。與remove()不同的是，所有綁定的事件、附加的數據等都會保留下來。

$("div").detach()這一句會移除對象，僅僅是顯示效果沒有了。但是內存中還是存在的。當你append之后，又重新回到了文檔流中。就又顯示出來了。

 

 

 

remove：移除節點

 

- 無參數，移除自身整個節點以及該節點的內部的所有節點，包括節點上事件與數據

- 有參數，移除篩選出的節點以及該節點的內部的所有節點，包括節點上事件與數據

 

detach：移除節點

 

- 移除的處理與remove一致

- 與remove()不同的是，所有綁定的事件、附加的數據等都會保留下來

- 例如：$("p").detach()這一句會移除對象，僅僅是顯示效果沒有了。但是內存中還是存在的。當你append之后，又重新回到了文檔流中。就又顯示出來了。

 

10.DOM拷貝clone()

 

.clone()方法深度 復制所有匹配的元素集合，包括所有匹配元素、匹配元素的下級元素、文字節點。

 

- clone()方法時，在將它插入到文檔之前，我們可以修改克隆后的元素或者元素內容，如右邊代碼我 $(this).clone().css('color','red') 增加了一個顏色

- 通過傳遞true，將所有綁定在原始元素上的事件處理函數復制到克隆元素上

- clone()方法是jQuery擴展的，只能處理通過jQuery綁定的事件與數據

- 元素數據（data）內對象和數組不會被復制，將繼續被克隆元素和原始元素共享。深復制的所有數據，需要手動復制每一個

 

11.DOM替換replaceWith()和replaceAll()

 

 

.replaceWith( newContent )：用提供的內容替換集合中所有匹配的元素並且返回被刪除元素的集合

 

.replaceAll( target ) ：用集合的匹配元素替換每個目標元素

 

- .replaceAll()和.replaceWith()功能類似，主要是目標和源的位置區別

- .replaceWith()與.replaceAll() 方法會刪除與節點相關聯的所有數據和事件處理程序

- .replaceWith()方法，和大部分其他jQuery方法一樣，返回jQuery對象，所以可以和其他方法鏈接使用

- .replaceWith()方法返回的jQuery對象引用的是替換前的節點，而不是通過replaceWith/replaceAll方法替換后的節點

 

12.DOM包裹wrap()方法

 

.wrap( wrappingElement )：在集合中匹配的每個元素周圍包裹一個HTML結構 $('p').wrap('<div></div>')

 

13.DOM包裹unwrap()方法

 

jQuery提供了一個unwarp()方法 ，作用與wrap方法是相反的。將匹配元素集合的父級元素刪除，保留自身（和兄弟元素，如果存在）在原來的位置。  

$('p').unwarp();

 

14.DOM包裹wrapAll()方法

 

.wrapAll( wrappingElement )：給集合中匹配的元素增加一個外面包裹HTML結構

 

15.DOM包裹wrapInner()方法

 

.wrapInner( wrappingElement )：給集合中匹配的元素的內部，增加包裹的HTML結構

 

$('div').wrapInner('<p></p>')

 

最后的結構，匹配的di元素的內部元素被p給包裹了

 

<div>

    <p>p元素</p>

</div>

<div>

    <p>p元素</p>

</div>

 

16.jQuery遍歷之children()方法

 

jQuery是一個合集對象，如果想快速查找合集里面的第一級子元素，此時可以用children()方法。這里需要注意：.children(selector) 方法是返回匹配元素集合中每個元素的所有子元素（僅兒子輩，這里可以理解為就是父親-兒子的關系）

 

 

 

17.jQuery遍歷之find()方法

 

 

 

.find()方法要注意的知識點：

 

- find是遍歷當前元素集合中每個元素的后代。只要符合，不管是兒子輩，孫子輩都可以。

- 與其他的樹遍歷方法不同，選擇器表達式對於 .find() 是必需的參數。如果我們需要實現對所有后代元素的取回，可以傳遞通配選擇器 '*'。

- find只在后代中遍歷，不包括自己。

- 選擇器 context 是由 .find() 方法實現的；因此，$('.item-ii').find('li') 等價於 $('li', '.item-ii')(找到類名為item-ii的標簽下的li標簽)。

 

18.jQuery遍歷之parent()方法

 

jQuery是一個合集對象，如果想快速查找合集里面的每一個元素的父元素（這里可以理解為就是父親-兒子的關系），此時可以用parent()方法

 

parent()方法允許我們能夠在DOM樹中搜索到這些元素的父級元素，從有序的向上匹配元素，並根據匹配的元素創建一個新的 jQuery 對象

 

注意：jQuery是一個合集對象，所以通過parent是匹配合集中每一個元素的父元素

 

19.jQuery遍歷之parents()方法

 

Query是一個合集對象，如果想快速查找合集里面的每一個元素的所有祖輩元素，此時可以用parents()方法

 

20.jQuery遍歷之closest()方法

 

closest()方法接受一個匹配元素的選擇器字符串

注意：jQuery是一個合集對象，所以通過closest是匹配合集中每一個元素的祖先元素

 

 

21.jQuery遍歷之next()方法

 

如果想快速查找指定元素集合中每一個元素緊鄰的后面同輩元素的元素集合，此時可以用next()方法

 

注意：jQuery是一個合集對象，所以通過next匹配合集中每一個元素的下一個兄弟元素

 

 

22.jQuery遍歷之prev()方法

 

prev()無參數

取得一個包含匹配的元素集合中每一個元素緊鄰的前一個同輩元素的元素集合

 

23.jQuery遍歷之siblings()

 

如果想快速查找指定元素集合中每一個元素的同輩元素，此時可以用siblings()方法 選區上和下

 

24.jQuery遍歷之add()方法

 

如果后期需要再往這個合集中添加一新的元素要如何處理？jQuery為此提供add方法，用來創建一個新的jQuery對象 ，元素添加到匹配的元素集合中

.add()的參數可以幾乎接受任何的$()，包括一個jQuery選擇器表達式，DOM元素，或HTML片段引用。

 

25.jQuery遍歷之each()

 

jQuery是一個合集對象，通過$()方法找到指定的元素合集后可以進行一系列的操作。比如我們操作$("li").css('') 給所有的li設置style值，因為jQuery是一個合集對象，所以css方法內部就必須封裝一個遍歷的方法，被稱為隱式迭代的過程。要一個一個給合集中每一個li設置顏色，這里方法就是each

 

.each() 方法就是一個for循環的迭代器，它會迭代jQuery對象合集中的每一個DOM元素。每次回調函數執行時，會傳遞當前循環次數作為參數(從0開始計數

 

$("li").each(function(index, element) {
    index 索引 0,1
    element是對應的li節點 li,li
    this 指向的是li
})

 

ajax中   $.each(data, function (index, sport)

function (index, value)中index是當前元素的位置，value是值。