jQuery的DOM操作

標籤：第一個   資料   影響   尋找   ext   刪除   不同的   說明   完整   

jQuery的DOM操作和JavaScript的DOM操作類似 但是更加簡單並且新增的一些十分使用的方法。

建立節點時DOM時選擇先建立好元素節點然後把內容插入節點 經過幾次插入和innerHTML的插入文本後的形成

而jQuery的建立節點十分簡單可以在$()內直接書寫HTML代碼

$("<div class="name>學習jQuery</div>") 這樣就可以創造一個節點並且這個節點還有自己得ClassName

jQuery插入節點使用的方法是append()和appendTo

append()類似於appendChild方法 是在指定的節點插入入節點 ()內放置想要插入的節點

$("div").append($("<span>haha</span>")  這樣就在一個div的元素節點插入一個span元素

appendTo()方法是相反的 是把節點插入到指定的元素節點內 ()內放置被插入的指定節點  

$("<span>aa</span>").appendTo($("div"))  和上面的內容等價 兩個方法內容功能相同只是位置和內容不同

append()和appendTo()都是把元素插入到指定元素節點內的最後一個子項目的位置 就相當於把元素放在指定元素節點的子節點的最後一位上

after()和before()方法是兩個針對於兄弟節點的 使用這兩個方法插入的節點都是指定節點的兄弟節點

after() ()括弧內加入的想要插入的內容可以是jQuery對象也可以是HTML代碼  所以前面說指定的元素節點  

把括弧內的內容插入到指定元素節點的後面  緊挨著指定的元素節點 如果元素節點後面還有別的節點就把後面的節點順次後移

同理before也是一樣只不過是把內容插入到指定元素的前面並且一樣是緊挨著的

這兩個方法的內容可以接受的不只是HTML代碼還可以是dom元素 元素數組

prepend()和prependTo也是插入節點用法類似語append()和appendTo()

prepend()和prependTo是把元素插入到指定元素內的前面 就是當指定元素的第一個子節點

insertAfter() insertBefore()同樣是類似於after()和before()的文法功能是一樣的只是內容和位置不同  

insertAfter()和insertBefore()把想要插入的內容放在前面而把目標的內容放在後面所以目標內容不接受多個參數

empty()方法是移除目標的所有子節點 例:$("ul").empty() 這會移除掉ul內部的所有的li節點但不會對ul節點本身有什麼影響

被移除的子節點不光節點元素被移除而且常值內容也會被移除 例：<div>你好嗎？<span>朋友</span></div>   

$("div").empty()  那麼結果就是<div>你好嗎？</div>

remove()移除節點不光移除子節點包括本身的節點也會被移除但是remove可以接受一個參數這個參數是一個選取器

就是把符合這個選取器的節點集合全部移除並且移除這些節點的事件和資料

$("div").remove(".name") 就相對移除div節點的所有class的值為name的節點  ?????仍有疑問以後再完善

remove()方法的傳回值是這個被移除的所有節點的合集

detach()方法  和remove的效果類似也是移除元素節點但是會保留被移除的元素節點的記憶體模型  這樣就可以儲存被移除的節點上面的事件和記憶體

detach()方法的傳回值也是被移除的節點  如果我們再次調用這些被移除的節點他們上面的事件並不會消失直接就可以使用

clone()方法是jQuery新增的方法是拷貝節點  也就是複製複製節點  

clone()方法可以傳入一個參數true 如果不傳入參數則說明複製為淺複製 如果傳入參數true則說明複製是深複製

淺複製:只複製結構  深複製: 複製結構資料和時間  節點是通過淺複製得來的那麼它將沒有之前節點的事件 深複製就會仍然擁有之前綁定的事件

元素資料（data）內對象和數組不會被複製，將繼續被複製元素和原始元素共用。深複製的所有資料，需要手動複製每一個（並不理解）

replaceWith()和replaceAll()也是一對功能相同內容和位置不同的方法

replaceWith()括弧內是用於替換的節點 它作用在被替換的節點上

replaceAll()相反  括弧內是被替換的節點  作用在用於替換的節點上   括弧內可以用HTML結構

wrap()方法  包裹方法 就是給指定元素包裹一個父元素  作用在指定元素內  ()括弧內傳入想要用於包裹的父元素(HTML結構的)

由於式包裹一個父元素 並不是祖父元素所以指定元素就是包裹內容的子節點而不是子孫節點

warp方法也有一個回呼函數回電函數的傳回值就是HTML內容和jQuery內容

unwrap()方法 刪除包裹 保留內部結構只是刪除父元素  並不需要傳入任何參數

wrapInner()方法就是作用在節點的所有子節點上  為其所有的子節點包裹一段HTML代碼

也支援回呼函數回呼函數的傳回值應該是一段完整的HTML代碼

例:<div>p元素1 </div> <div>p元素2</div>  $("div").warpInner("<p></p>")結果就是:

<div><p>p元素1</p></div> <div><p>p元素2</p></div>

children()方法  返回所有的子節點(不可以是子孫節點)   也就是必須是第一級子節點

可以選擇性的接受參數  接受的參數也就是選取器  返回的就是在目標內的所有的子節點(第一級)中滿足選取器內容的子節點

find()方法  返回所有的後代節點  包含父子節點 必須要傳遞參數  參數是選取器 如果所有的子節點全部需要那麼就傳入萬用字元*

find()方法並不會找到自己只會找尋所有的子節點

選取器 context 是由 .find() 方法實現的；因此，$(‘.item-ii‘).find(‘li‘) 等價於 $(‘li‘, ‘.item-ii‘)(找到類名為item-ii的標籤下的li標籤)。(還未理解)

parent()方法只會尋找自己的父元素  並不會再向祖先元素等去尋找  會匹配每一個父元素並且也接受選取器

parents()方法類似但是會尋找向上尋找 尋找祖先元素 返回的也會是一個合集 可以接受一個選取器  

closest()方法 傳入一個匹配元素的選取器參數  這個類似於parents()方法 都會對指定元素的祖先元素進行尋找 但是尋找到符合選取器的匹配元素後就會停止尋找 而且還是從當前元素開始的

 parents()和closest()的區別 

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

next()方法  會尋找指定元素集合中每一個元素緊鄰的後面的元素(一定是同輩元素)  也就是下一個直接兄弟元素  也允許傳入一個選取器運算式進行篩選。

jQuery的DOM操作