jQuery

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.(jQuery 官方介紹)

1. 什么是 jQuery

jQuery 是一個使用 JavaScript 編寫的庫，可以讓開發者用更少的代碼來完成業務邏輯。

許多年前前端的技術沒有現在這么豐富，jQuery 和 JavaScript 也會被經常稱為兩個技術，因為使用 jQuery 完全可以替代掉使用原生的 JavaScript 操作 DOM、處理動畫、處理 AJAX 等，這讓兩者之間的概念變得模糊。

可以對比一下刪除一個節點的操作：

// 使用JavaScript
var el = document.getElementById('element');

el.parentNode.removeChild(el);

// 使用 jQuery
$('#element').remove();

兩者的區別一比較就出來了，jQuery 封裝一層 DOM 操作，將原生的 DOM 方法向上層抽象，提供了一套更簡潔的 API 來操作 DOM，同時也針對各個瀏覽器做了兼容性處理，如事件對象、事件的綁定方式等。

2. 引入 jQuery

jQuery 可以直接從官網下載，也可以用 npm 安裝，也可以使用 bower 等這些包管理工具，本篇幅采用 CDN 的形式引入，本身 jQuery 就是一個 .js 文件，只需引入就能使用。

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

引入之后就可以在全局下通過 jQuery 或者 $ 調用 jQuery 了。

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  console.log($);
  console.log(jQuery);

  console.log($ === jQuery); // 輸出：true
</script>

3. 使用 jQuery

jQuery 使用 $ 或者 jQuery 來生成一個 jQuery 對象，這里統一使用 $。

$ 可以接受一個 CSS 規范的選擇器，用來選擇元素，html 方法相當于設置 DOM 節點的 innerHTML 屬性。

在 DOM 相關章節有提到，如果使用 querySelector 來選擇節點，碰到節點不存在的情況下，會返回 null，這樣就需要一層判斷， jQuery 已經處理好了這些情況。

<div>DOM節點</div>
<div class="element">

</div>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $('.ele').html('<p>這里是用 jQuery 插入的 HTML</p>');

  console.log('不會影響正常程序執行');
</script>

其可以接受的參數不僅僅是 CSS 選擇器，也可以是一個原生 DOM 節點，一段 HTML 字符串等。

jQuery 選擇 $ 作為作為入口名稱，一部分是因為簡單，原生 DOM 提供的選擇 DOM 節點的方法都是一長串，另一個原因是 $ 本身的發音 dollar 和 DOM 的發音接近。

4. 小結

jQuery 提供了一系列的方法使得操作 DOM 變得更簡單，更具體的內容可以參考官方官方文檔。

現代框架的涌現，使得 jQuery 被使用到的場景也在變少，也有許多文獻有 不應將 jQuery 與現代框架一起使用 的說法。其實 jQuery 在壓縮后非常小，如果有需要完全可以考慮引入。