jq學習筆記（二）

jq筆記-dom篇-慕課網學習筆記

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

創建元素節點：
　　1.$("<div></div>")
創建為本節點：
　　1.$("<div>我是文本節點</div>")
創建為屬性節點：
　　1.$("<div id='test' class='aaron'>我是文本節點</div>")
　　2.$("<div class='right'><div class='aaron'>動態創建DIV元素節點</div></div>")

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

　　①append() 向每個匹配的元素內部追加內容
　　②appendTo() 把所有匹配的元素追加到另一個

　　簡單的總結就是：

　　.append()和.appendTo()兩種方法功能相同，主要的不同是語法——內容和目標的位置不同

　　　　—— append()前面是被插入的對象，後面是要在對象內插入的元素內容
　　　　—— appendTo()前面是要插入的元素內容，而後面是被插入的對象

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

　　①after() 在匹配元素幾何中的每個元素後面插入參數所指定的內容，作為其兄弟節點
　　②before() 據參數設定，在匹配元素的面前插入內容

　　註意：
　　　　①after向元素的後邊添加html代碼，如果元素後面有元素了，那將後面的元素後移，然後將html代碼插入
　　　　②before向元素的前邊添加html代碼，如果元素前面有元素了，那將前面的元素前移，然後將html代碼插


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

　　①prepend() 向每個匹配的元素內部前置內容
　　②prependTop() 把所有匹配的元素前置到另一個指定的元素幾何中

　　總結dom內部插入的四個方法的區別
　　　　①append()向每個匹配的元素內部追加內容
　　　　②prepend()向每個匹配的元素內部前置內容
　　　　③appendTo()把所有匹配的元素追加到另一個指定元素的集合中
　　　　④prependTo()把所有匹配的元素前置到另一個指定的元素集合中

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

　　①insertBefore() 在目標元素前面插入幾何中的每一個元素
　　②insertAfter() 在目標元素後面插入幾何中的每個匹配的元素

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

　　empty 顧名思義，清空方法，但是與刪除又有點不一樣，因為它只移除了 指定元素中的所有子節點。


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

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


8.DOM節點刪除之empty和remove區別

　　①empty方法
　　　　嚴格地講，empty()方法並不是刪除節點，而是清空節點，它能清空元素中的所有後代節點
　　　　empty不能刪除自己本身這個節點

　　②remove方法
　　　　該節點與該節點所包含的所有後代節點將同時被刪除
　　　　提供傳遞一個篩選的表達式，刪除指定合集中的元素

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

10.DOM節點刪除之detach()和remove()區別

　　remove：移除節點
　　　　①無參數，移除自身整個節點以及該節點的內部的所有節點，包括節點上事件與數據
　　　　②有參數，移除篩選出的節點以及該節點的內部的所有節點，包括節點上事件與數據

　　detach：移除節點
　　　　①移除的處理與remove一致
　　　　②與remove()不同的是，所有綁定的事件、附加的數據等都會保留下來
　　　　③例如：$("p").detach()這一句會移除對象，僅僅是顯示效果沒有了。但是記憶體中還是存在的。當你append之後，又重新回到了文檔流中。就又顯示出來了。

11.DOM拷貝clone()

.clone()方法深度 複製所有匹配的元素集合，包括所有匹配元素、匹配元素的下級元素、文位元組點。

clone方法比較簡單就是克隆節點，但是需要註意，如果節點有事件或者數據之類的其他處理，我們需要通過clone(ture)傳遞一個布爾值ture用來指定，這樣不僅僅只是克隆單純的節點結構，還要把附帶的事件與數據給一併克隆了說

使用上就是這樣簡單，使用克隆的我們需要額外知道的細節：

　　①clone()方法時，在將它插入到文檔之前，我們可以修改克隆後的元素或者元素內容，如右邊代碼我 $(this).clone().css('color','red') 增加了一個顏色
　　②通過傳遞true，將所有綁定在原始元素上的事件處理函數複製到克隆元素上
　　③clone()方法是jQuery擴展的，只能處理通過jQuery綁定的事件與數據
　　④元素數據（data）內對象和數組不會被覆制，將繼續被克隆元素和原始元素共用。深複製的所有數據，需要手動複製每一個


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

　　①.replaceWith( newContent )：用提供的內容替換集合中所有匹配的元素並且返回被刪除元素的集合
　　②.replaceAll( target ) ：用集合的匹配元素替換每個目標元素

　　總結：
　　　　①replaceAll()和.replaceWith()功能類似，主要是目標和源的位置區別
　　　　②.replaceWith()與.replaceAll() 方法會刪除與節點相關聯的所有數據和事件處理程式
　　　　③.replaceWith()方法，和大部分其他jQuery方法一樣，返回jQuery對象，所以可以和其他方法鏈接使用
　　　　④.replaceWith()方法返回的jQuery對象引用的是替換前的節點，而不是通過replaceWith/replaceAll方法替換後的節點

　　　　例子:

　　　　　　①$("p:eq(1)").replaceWith('<a style="color:red">替換第二段的內容</a>')
　　　　　　②$('<a style="color:red">替換第二段的內容</a>').replaceAll('p:eq(1)')

13.DOM包裹wrap()方法

　　如果要將元素用其他元素包裹起來，也就是給它增加一個父元素，針對這樣的處理，JQuery提供了一個wrap方法

　　①.wrap( wrappingElement )：在集合中匹配的每個元素周圍包裹一個HTML結構

　　例子：
　　　　<p>p元素</p>

　　　　給p元素增加一個div包裹

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

　　　　最後的結構，p元素增加了一個父div的結構

　　　　<div>
　　　　　　<p>p元素</p>
　　　　</div>

　　②.wrap( function ) ：一個回調函數，返回用於包裹匹配元素的 HTML 內容或 jQuery 對象

　　例子：
　　　　$('p').wrap(function() {
　　　　　　return '<div></div>'; //與第一種類似，只是寫法不一樣
　　　　})

　　　　使用後的效果與直接傳遞參數是一樣，只不過可以把代碼寫在函數體內部，寫法不同而已

　　註意：
　　　　.wrap()函數可以接受任何字元串或對象，可以傳遞給$()工廠函數來指定一個DOM結構。這種結構可以嵌套了好幾層深，但應該只包含一個核心的元素。每個匹配的元素都會被這種結構包裹。該方法返回原始的元素集，以便之後使用鏈式方法。

14.DOM包裹unwrap()方法

　　作用：刪除父元素

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

　　例子：
　　　　<div>
　　　　　　<p>p元素</p>
　　　　</div>

　　　　——>

　　　　$('p').unwarp();

　　　　——>

　　　　<p>p元素</p>

15.DOM包裹wrapAll()方法

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

　　例子一：
　　　　<p>p元素</p>
　　　　<p>p元素</p>

　　　　——> 給所有p元素增加一個div包裹

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

　　　　——> 結果 2個P元素都增加了一個父div的結構

　　　　<div>
　　　　　　<p>p元素</p>
　　　　　　<p>p元素</p>
　　　　</div>

　　②.wrapAll( function ) ：一個回調函數，返回用於包裹匹配元素的 HTML 內容或 jQuery 對象

　　通過回調的方式可以單獨處理每一個元素

　　例子二：
　　　　$('p').wrapAll(function() {
　　　　　　return '<div><div/>';
　　　　})

　　　　——> 以上的寫法的結果如下，等同於warp的處理了

　　　　<div>
　　　　　　<p>p元素</p>
　　　　</div>
　　　　<div>
　　　　　　<p>p元素</p>
　　　　</div>

　　註意：
　　　　.wrapAll()函數可以接受任何字元串或對象，可以傳遞給$()工廠函數來指定一個DOM結構。這種結構可以嵌套多層，但是最內層只能有一個元素。所有匹配元素將會被當作是一個整體，在這個整體的外部用指定的 HTML 結構進行包裹。

16.DOM包裹wrapInner()方法

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

　　例子一：
　　　　<div>p元素</div>
　　　　<div>p元素</div>

　　　　——> 給所有元素增加一個p包裹

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

　　　　——> 結果

　　　　<div>
　　　　　　<p>p元素</p>
　　　　</div>
　　　　<div>
　　　　　　<p>p元素</p>
　　　　</div>

　　②.wrapInner( function ) ：允許我們用一個callback函數做參數，每次遇到匹配元素時，該函數被執行，返回一個DOM元素，jQuery對象，或者HTML片段，用來包住匹配元素的內容

　　例子二：

　　　　$('div').wrapInner(function() {
　　　　　　return '<p></p>';
　　　　})

　　　　——>

　　　　<div>
　　　　　　<p>p元素</p>
　　　　</div>
　　　　<div>
　　　　　　<p>p元素</p>
　　　　</div>

　　註意：
　　　　當通過一個選擇器字元串傳遞給.wrapInner() 函數，其參數應該是格式正確的 HTML，並且 HTML 標簽應該是被正確關閉的。



17.jQuery遍歷之children()方法

.children(selector) 方法是返回匹配元素集合中每個元素的所有子元素（僅兒子輩，這裡可以理解為就是父親-兒子的關係）

18.jQuery遍歷之find()方法

例子：
<div class="div">
　　<ul class="son">
　　　　<li class="grandson">1</li>
　　</ul>
</div>

代碼如果是$("div").find("li")，此時，li與div是祖輩關係，通過find方法就可以快速的查找到了。

.find()方法要註意的知識點：
　　①find是遍歷當前元素集合中每個元素的後代。只要符合，不管是兒子輩，孫子輩都可以。
　　②與其他的樹遍歷方法不同，選擇器表達式對於 .find() 是必需的參數。如果我們需要實現對所有後代元素的取回，可以傳遞通配選擇器 '*'。
　　③find只在後代中遍歷，不包括自己。
　　④選擇器 context 是由 .find() 方法實現的；因此，$('.item-ii').find('li') 等價於 $('li', '.item-ii')(找到類名為item-ii的標簽下的li標簽)。

註意重點：
　　.find()和.children()方法是相似的
　　　　1.children只查找第一級的子節點
　　　　2.find查找範圍包括子節點的所有後代節點


19.jQuery遍歷之parent()方法

parent()方法作用：查找父元素

因為是父元素，這個方法只會向上查找一級


20.jQuery遍歷之parents()方法

作用：parents()方法可以查找祖輩元素

例子：
<div class="div">
　　<ul class="son">
　　　　<li class="grandson">1</li>
　　</ul>
</div>

在li節點上找到祖 輩元素div， 這裡可以用$("li").parents()方法

註意：
　　1 .parents()和.parent()方法是相似的，但後者只是進行了一個單級的DOM樹查找
　　2 $( "html" ).parent()方法返回一個包含document的集合，而$( "html" ).parents()返回一個空集合。


21.jQuery遍歷之closest()方法

作用：也是祖輩查找器，但更偏向與祖輩過濾查找器

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

從元素本身開始，在DOM 樹上逐級向上級元素匹配，並返回最先匹配的祖先元素

註意事項：在使用的時候需要特別註意下

粗看.parents()和.closest()是有點相似的，都是往上遍歷祖輩元素，但是兩者還是有區別的，否則就沒有存在的意義了

　　①起始位置不同：.closest開始於當前元素 .parents開始於父元素
　　②遍歷的目標不同：.closest要找到指定的目標，.parents遍歷到文檔根元素，closest向上查找，直到找到一個匹配的就停止查找，parents一直查找到根元素，並將匹配的元素加入集合
　　③結果不同：.closest返回的是包含零個或一個元素的jquery對象，parents返回的是包含零個或一個或多個元素的jquery對象


22.jQuery遍歷之next()方法

作用：查找下一個兄弟元素

例：
　　①$("li.item-1").next().css("border","1px solid red")
　　② $('.item-2').next(':first').css('border', '1px solid blue')

23.jQuery遍歷之prev()方法

作用：查找緊鄰的前一個兄弟元素

24.jQuery遍歷之siblings()

siblings()作用：快速查找指定元素幾何中每一個元素的同輩元素

25.add方法

　　jQuery是一個合集對象，通過$()方法找到指定的元素合集後可以進行一系列的操作。$()之後就意味著這個合集對象已經是確定的，如果後期需要再往這個合集中添加一新的元素要如何處理？jQuery為此提供add方法，用來創建一個新的jQuery對象 ，元素添加到匹配的元素集合中


26.jquery歷遍之 each()

each()是什麼?
　　①each是一個for迴圈的包裝迭代器
　　②each通過回調的方式處理，並且會有2個固定的實參，索引與元素
　　③each回調方法中的this指向當前迭代的dom元素

個人感覺，each更適合做“斑馬線”之類的效果