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操作