前端培訓-中級階段（6）- jQuery元素節點操作（2019-07-18期）

前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS），本着提升技術水平，打牢基礎知識的中心思想，我們開課啦（每週四）。

上一節我們講了 jQuery 的基本使用。這節我們講元素節點相關的內容。

內容目錄

1. 選擇器
2. 文檔處理
3. 篩選

選擇器

選擇器在初級的時候就講過了。上節也簡單的列了一下。這節就找一點騷東西說一說吧。

Sizzle 選擇器引擎

先問問DOM的API查找性能，有不知道的嗎？由快到慢 ID > Class > Name > Tag。
CSS 選擇器匹配的順序，有不知道的嗎？從左往右
jQuery的選擇器匹配的順序，有沒有不知道的？Sizzle 選擇器引擎從左往右，當然，既然人家優秀肯定有道理。如果支持更快querySelector會選擇更快的方法。如果有id選擇器，他會先進行id選擇，縮小範圍。感興趣可以去看看Sizzle選擇器引擎介紹，有能力讀源碼當然更好了。

舉個栗子

1. 查詢語句：
   $('div span')

2. 代碼結構：

   div
    div
     div 
      span
     div
    span

3. 先查div的話，我們需要遍歷多少次？兩次可以嗎？但是如果先查span，那我們parent去找直到找到頭就完事了。
4. 再說另一個，子節點只有一個父節點。但是父節點會有很多子節點。

文檔處理

append、appendTo 和 prepend、prependTo

操作的是父子節點，效果也等同於原生的api。已存在節點是移動，新節點是新增。

1. parent.append(child) 是將child添加到parent的最後面。鏈式操作對象爲parent。對應原生appendChild
2. child.appendTo(parent) 是將child添加到parent的最後面。鏈式操作對象爲child。
3. parent.prepend(child) 是將child添加到parent的最前面。鏈式操作對象爲parent。
4. child.prependTo(parent) 是將child添加到parent的最前面。鏈式操作對象爲child。

insertAfter、after 和 insertBefore、before

操作的是兄弟節點，效果同上。

1. A.after(B) 是在A後面增加B。鏈式操作對象爲A
2. B.insertAfter(A) 是把B增加到A後面。鏈式操作對象爲B
3. A.before(B) 是在A前面增加B。鏈式操作對象爲A
4. B.insertBefore(A) 是把B增加到A前面。鏈式操作對象爲B

wrap、unwrap、wrapall、wrapInner、replaceWith、replaceAll

說實話這幾個我用都沒用過。

1. $("a").wrap("<div class='wrap'></div>") 是指，將所有a標籤，用後面的節點包起來。
2. $('li').unwrap()將他們的父節點移除。也就是說所有子節點佔據了原來父級的位置。
3. $("a").wrapAll("<div class='wrap'></div>") 是指，將所有到標籤都合併到第一個位置，並且包裹起來。
4. $("a").wrapInner("<b></b>")是指，講a標籤的內容，用b標籤包裹起來。
5. $("a").replaceWith('<a href="//www.lilnong.top">lilnong.top</a>') 將所有的a標籤，用新標籤替換。那麼鏈式操作對象是誰？
6. $('<a href="//www.lilnong.top">lilnong.top</a>').replaceAll("a") 用新標籤替換，把所有的a標籤替換。那麼鏈式操作對象是誰？

empty、remove、detach

1. $("a").empty() 刪除匹配的元素集合中所有的子節點。
2. $("a").remove() 從DOM中刪除所有匹配的元素。這個方法不會把匹配的元素從jQuery對象中刪除，因而可以在將來再使用這些匹配的元素。但除了這個元素本身得以保留之外，其他的比如綁定的事件，附加的數據等都會被移除。
3. $("a").detach() 從DOM中刪除所有匹配的元素。這個方法不會把匹配的元素從jQuery對象中刪除，因而可以在將來再使用這些匹配的元素。與remove()不同的是，所有綁定的事件、附加的數據等都會保留下來。

clone([Event[,deepEven]])

克隆一個副本出來。我們知道，如果這個元素是文檔內的，那麼上面的方法會變成移動。當我們不想移動的時候，就需要clone。

1. event: 一個布爾值（true 或者 false）指示事件處理函數是否會被複制。V1.5以上版本默認值是：false
2. deepEven: 一個布爾值，指示是否對事件處理程序和克隆的元素的所有子元素的數據應該被複制。

篩選

1. hasClass(class) 判斷當前元素有沒有對應class。比如我們在模擬複選框，我們需要判斷當前的狀態。$(this).hasClass('checked')
2. filter(class) 比如我們現有一個所有複選框的合集，我們要過濾出所有選中狀態的。
3. next() 獲取下一個元素
4. nextAll() 獲取後面所有元素
5. nextUntil() 獲取後面所有元素，可以設置終止條件。
6. parent()、prev() 基本有next()相識的方法
7. siblings() 獲取所有兄弟元素
8. end() 我覺得這個方法就很厲害，把當前的鏈式操作對象移交給上次。
   $("p").find("span").end()目前操作對象是$("p")
9. 等等…… 我就列舉這些常用的吧。

微信公衆號：前端linong

初級階段文章目錄

1. 前端培訓-初級階段（17） - 數據存儲（cookie、session、stroage）
2. 前端培訓-初級階段（13） - 正則表達式
3. 前端培訓-初級階段（13） - 類、模塊、繼承
4. 前端培訓-初級階段（13） - ECMAScript （內置對象、函數）
5. 前端培訓-初級階段（13） - ECMAScript （語法、變量、值、類型、運算符、語句）
6. 前端培訓-初級階段（13、18）
7. 前端培訓-初級階段（9 -12）
8. 前端培訓-初級階段（5 - 8）
9. 前端培訓-初級階段（1 - 4）

中級階段文章目錄

1. 前端培訓-中級階段（2） - 事件(event) 事件冒泡、捕獲 - （2019-06-20期）
2. 前端培訓-中級階段（3） - DOM 文檔對象模型（2019-06-27期）
3. 前端培訓-中級階段（4）- BOM 瀏覽器對象模型（2019-07-04期）
4. 前端培訓-中級階段（5）- jQuery的概念與基本使用（2019-07-11期）

資料

1. 前端培訓目錄、前端培訓規劃、前端培訓計劃
2. jQuery 速查地址