前端培訓-中級階段（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. 前端培訓-初級階段（1三、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 速查地址