目錄
what ？Are you kidding me？老弟，現在是 2020 年了，你還在學 jQuery？別是個傻子吧？
確實，如今想從事前端行業的新人基本上沒有學 jQuery 的了，大家基本都是學 Vue 和 React，那我爲什麼還要寫這篇博客？
1、爲什麼還要學 jQuery
回想第一次接觸 jQuery 的時候還是在兩年前的大四，當時的我正考慮走前端這條道路，不知從哪搞來了一張前端學習路線圖，從 HTML + CSS + JavaScript 開始入門，自學過 jQuery，當時還沒聽說過 Vue（也可能是剛接觸前端，比較孤陋寡聞）。
當時跟着書和網上的資料瞭解了一遍 jQuery，到現在，只記得 jQuery 的 $ 起手式，還有一個鏈式操縱，剩下的都忘了。就當下的時間來看，熱門的前端框架是 Vue 和 React，大多數人可能認爲沒有必要再去學習 jQuery，因爲 jQuery 已經過時了。
且不說 jQuery 過不過時，先來了解一個事實，看一下當年的 jQuery 到底有多火。
jQuery 於 2006 年發佈，到如今已有 14 個年頭了，自有前端行業以來，數以千萬計的前端的框架和庫，請問誰能比的了，Vue 和 React 兩種比較新的框架也只不過五六年而已，能繼續熱幾年還是個未知數，從這一點來看，jQuery 肯定是有相當優秀之處值得我們去學習。
其次 jQuery 在世界上使用的廣泛程度，也是其他任何框架所不能比擬的，全球百分之 80% 左右的網站在使用 jQuery，吹牛呢吧？不相信的可以去 builtwith.com 上看一下，2020 年，全球前 10000 的網站中，有 8000+ 的網站在使用 jQuery。同比 Vue 還不到 1000。
但是不得不說，jQuery 確實過時了，它過時的原因並不是因爲它本身不好，而是前端如今已經不怎麼操作 DOM 了。
綜上所述，jQuery 極爲經典，它能活到現在肯定是有其優秀之處的，大家不要排斥學習 jQuery，瞭解一下思想也是好的。
既然對 jQuery 有了一個初步的瞭解，那我們來看一下 jQuery 的封裝思想及相關 API 和基本使用吧。阮一峯：jQuery設計思想
2、jQuery 的封裝思想
jQuery 極爲簡單，這句話是相對 Vue 和 React 來說的。jQuery 的源碼就是封裝的 JavaScript 的原生 dom API，而 Vue 和 React 是不推薦操作 dom 的，它們是基於 MVVM 的思想，其底層源碼肯定是比 jQuery 複雜的。
如果瞭解一點 jQuery 的封裝思想，你就會知道 jQuery 的源碼是多簡單，其思想是多精髓。就比如 jQuery 的鏈式操作，它是怎麼做到的？
$('#div').addClass('red').addClass('blue'); //鏈式操作
window.$ = window.jQuery = function(selector){ //jQuery的封裝思想
let nodes = document.querySelctorAll(selector);
return { //閉包，返回一個可以操作當前選中節點的對象
adClass:function(className){
for (let i=0;i<nodes.length;i++){
nodes[i].classList.add(className);
}
ruturn this; //返回調用該函數的對象
}
}
}
jQuery 的其他相關 API 也是這樣封裝的，是不是符合上面說的，jQuery 的封裝比較簡單？實際上就是用到的閉包，每次調用封裝的 API 後都能返回調用該方法的對象，通過這樣來實現鏈式編程。
jQuery 其他方法的封裝這裏就先不寫了，打算後期出一個完整的文檔，如有更新會在這附上鍊接。
2、jQuery 如何獲取元素
在使用 jQuery 前注意先將其引入到項目中，可以到 BootCDN 上找，或者到 jQuery 官網：
<script src="https://cdn.bootcss.com/jquery/3.4.1/core.js"></script>
jQuery 的基本設計思想和主要用法，就是 "選擇某個網頁元素，然後對其進行某種操作"。這是它區別於其他 Javascript 庫的根本特點。使用 jQuery 的第一步，往往就是將一個選擇表達式，放進構造函數 jQuery()（簡寫爲$），然後得到被選中的元素。
$(document) //選擇整個文檔對象
$('#myId') //選擇ID爲myId的網頁元素
$('div.myClass') // 選擇class爲myClass的div元素
$('input[name=first]') // 選擇name屬性等於first的input元素
//也可以是jQuery特有的表達式：
$('a:first') //選擇網頁中第一個a元素
$('tr:odd') //選擇表格的奇數行
$('#myForm :input') // 選擇表單中的input元素
$('div:visible') //選擇可見的div元素
$('div:gt(2)') // 選擇所有的div元素，除了前三個
$('div:animated') // 選擇當前處於動畫狀態的div元素
3、jQuery 的鏈式操作
jQuery 中一個重要的設計思想，就是最終選中網頁元素以後，可以對它進行一系列操作，並且所有操作可以連接在一起，以鏈條的形式寫出來，比如：
$('div').find('h3').eq(2).html('Hello');
這是 jQuery 最令人稱道、最方便的特點。它的原理在於每一步的 jQuery 操作，返回的都是一個 jQuery 對象，所以不同操作可以連在一起。
jQuery 還提供了.end() 方法，使得結果集可以後退一步：
$('div').find('h3').html('Hello').end() //退回到選中所有的h3元素的那一步
.html('World'); //將它的內容改爲World
4、jQuery 如何創建元素
常見的是直接把這個節點的結構，給通過 HTML 標記字符串描述出來
$("<div></div>")
創建爲文本節點，與創建元素節點類似，可以直接把文本內容一併描述
$("<div>我是文本節點</div>")
創建爲屬性節點，與創建元素節點同樣的方式
$("<div id='test' class='aaron'>我是文本節點</div>")
通過 jQuery 對上一節代碼進行改造
$("<div class='right'><div class='aaron'>動態創建DIV元素節點</div></div>")
這就是 jQuery 創建節點的方式，但是動態創建的元素只是臨時存放在內存中，最終需要放到頁面文檔並呈現出來，這裏就涉及到一個位置關係，常見的就是把這個新創建的元素，當作頁面某一個元素的子元素放到其內部，append() 與 appendTo() 。
5、jQuery 如何移動元素
jQuery 提供了兩組方法，來操作元素在網頁中的位置移動。一組方法是直接移動該元素，另一組方法是移動其他元素，使得目標元素達到我們想要的位置。假定我們選中了一個 div 元素，需要把它移動到 p 元素後面：
第一種方法是使用 .insertAfter()，把 div 元素移動 p 元素後面：
$('div').insertAfter($('p'));
第二種方法是使用 .after()，把 p 元素加到 div 元素前面：
$('p').after($('div'));
表面上看，這兩種方法的效果是一樣的，唯一的不同似乎只是操作視角的不同。但是實際上，它們有一個重大差別，那就是返回的元素不一樣。第一種方法返回 div 元素，第二種方法返回 p 元素。你可以根據需要，選擇到底使用哪一種方法。
使用這種模式的操作方法，一共有四對：
.insertAfter()和.after()：在現存元素的外部，從後面插入元素
.insertBefore()和.before()：在現存元素的外部，從前面插入元素
.appendTo()和.append()：在現存元素的內部，從後面插入元素
.prependTo()和.prepend()：在現存元素的內部，從前面插入元素